From ff580d9962128245657261afe289dabe73b13cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?BITARD=20Micha=C3=ABl?= <michael.bitard@beta.gouv.fr>
Date: Mon, 10 Feb 2025 08:01:50 +0000
Subject: [PATCH] =?UTF-8?q?feat(accessibilit=C3=A9):=20rend=20Camino=20un?=
=?UTF-8?q?=20peu=20plus=20accessible=20(pub/pnm-public/camino!1630)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 157 +-
packages/ui/package.json | 2 +
packages/ui/src/app.tsx | 42 +-
.../components/_charts/chart-with-export.tsx | 19 +-
.../components/_charts/configurable-chart.tsx | 60 +-
packages/ui/src/components/_charts/utils.ts | 6 +-
.../ui/src/components/_common/downloads.tsx | 1 +
.../_common/dsfr-perimetre-table.tsx | 2 +-
...imetre.stories_snapshots_CustomPoints.html | 76 +-
...ots_CustomPointsWithAnotherGeoSysteme.html | 76 +-
...stomPointsWithAnotherLegacyGeoSysteme.html | 76 +-
...pshots_CustomPointsWithoutNameAndDesc.html | 76 +-
...hots_MultiplePolygonWithLacuneTableau.html | 76 +-
...rimetre.stories_snapshots_WithForages.html | 74 +-
.../types.stories_snapshots_AllTypes.html | 144 +-
.../src/components/_common/filtres/types.tsx | 2 +-
...e-typeahead.stories_snapshots_Default.html | 98 +-
...apshots_WithGeoSystemeAlreadySelected.html | 74 +-
...ection-element.stories_snapshots_JORF.html | 2 +-
.../_common/new-section-element.tsx | 2 +-
...new-section.stories_snapshots_Default.html | 2 +-
...tion.stories_snapshots_WithoutContent.html | 2 +-
.../ui/src/components/_common/new-section.tsx | 2 +-
.../_common/new-sections-edit.stories.tsx | 22 +-
...-sections-edit.stories_snapshots_Date.html | 4 +-
...ctions-edit.stories_snapshots_Default.html | 34 +-
...ories_snapshots_ParticipationDuPublic.html | 5 +-
...ries_snapshots_TousLesElementsRemplis.html | 32 +-
...ories_snapshots_TousLesElementsRequis.html | 32 +-
...pshots_TousLesElementsVidesOptionnels.html | 20 +-
....stories_snapshots_ToutesLesActivites.html | 403 ++-
...ries_snapshots_VolumeGranulatsExtrait.html | 5 +-
.../components/_common/new-sections-edit.tsx | 4 +-
...om.stories_snapshots_AlreadyUppercase.html | 2 +-
.../nom.stories_snapshots_Default.html | 2 +-
.../nom.stories_snapshots_Lowercase.html | 2 +-
packages/ui/src/components/_common/nom.tsx | 2 +-
.../components/_common/page-with-filters.tsx | 14 +-
...e-typeahead.stories_snapshots_Default.html | 10 +-
...hots_WithSubstanceTypeAlreadySelected.html | 6 +-
...e-select.stories_snapshots_WithValues.html | 4 +-
.../_common/titre-reference-select.tsx | 18 +-
...ect.stories_snapshots_AlreadySelected.html | 4 +-
...type-select.stories_snapshots_Default.html | 2 +-
...e-select.stories_snapshots_Entreprise.html | 4 +-
...lert.stories_snapshots_ApiErrorSimple.html | 2 +-
...snapshots_ApiErrorWithCompleteMessage.html | 2 +-
....stories_snapshots_ApiErrorWithDetail.html | 2 +-
..._ApiErrorWithDetailAndCompleteMessage.html | 2 +-
packages/ui/src/components/_ui/alert.tsx | 17 +-
.../components/_ui/dsfr-callout.stories.tsx | 10 +
...sfr-callout.stories_snapshots_Default.html | 4 +
.../ui/src/components/_ui/dsfr-callout.tsx | 18 +
.../components/_ui/dsfr-input-checkbox.tsx | 3 +-
.../components/_ui/dsfr-input-checkboxes.tsx | 2 +-
.../_ui/dsfr-input-file.stories.tsx | 5 +-
...ut-file.stories_snapshots_ManyFormats.html | 2 +-
...-input-file.stories_snapshots_PdfOnly.html | 2 +-
...input-file.stories_snapshots_Required.html | 3 +
.../ui/src/components/_ui/dsfr-input-file.tsx | 5 +-
...input-radio.stories_snapshots_Default.html | 2 +-
...nput-radio.stories_snapshots_Disabled.html | 2 +-
...ut-radio.stories_snapshots_Horizontal.html | 2 +-
....stories_snapshots_OneElementDisabled.html | 2 +-
...nput-radio.stories_snapshots_Required.html | 2 +-
...dio.stories_snapshots_WithDescription.html | 2 +-
...put-radio.stories_snapshots_WithValue.html | 2 +-
.../src/components/_ui/dsfr-input-radio.tsx | 2 +-
.../src/components/_ui/dsfr-input.stories.tsx | 30 +-
.../dsfr-input.stories_snapshots_Date.html | 4 +-
.../dsfr-input.stories_snapshots_Default.html | 3 +-
...dsfr-input.stories_snapshots_Disabled.html | 3 +-
.../dsfr-input.stories_snapshots_Number.html | 3 +-
...dsfr-input.stories_snapshots_Optional.html | 5 +
...dsfr-input.stories_snapshots_Required.html | 4 +-
...put.stories_snapshots_WithDescription.html | 3 +-
...apshots_WithDescriptionAndPlaceholder.html | 3 +-
...sfr-input.stories_snapshots_WithError.html | 3 +-
...dsfr-input.stories_snapshots_WithInfo.html | 3 +-
...sfr-input.stories_snapshots_WithValue.html | 3 +-
packages/ui/src/components/_ui/dsfr-input.tsx | 8 +-
.../components/_ui/dsfr-select.stories.tsx | 19 +-
...ect.stories_snapshots_ElementDisabled.html | 2 +-
...sfr-select.stories_snapshots_Optional.html | 7 +
...sfr-select.stories_snapshots_Required.html | 2 +-
.../ui/src/components/_ui/dsfr-select.tsx | 4 +-
.../components/_ui/dsfr-textarea.stories.tsx | 9 +-
...fr-textarea.stories_snapshots_Default.html | 2 +-
...r-textarea.stories_snapshots_Optional.html | 3 +
...r-textarea.stories_snapshots_Required.html | 3 +-
...apshots_WithDescriptionAndPlaceholder.html | 2 +-
...-textarea.stories_snapshots_WithValue.html | 2 +-
.../ui/src/components/_ui/dsfr-textarea.tsx | 6 +-
...eckboxes.stories_snapshots_AllFilters.html | 1000 ++++---
...s.stories_snapshots_WithInitialValues.html | 120 +-
.../_ui/filters/filters-checkboxes.tsx | 44 +-
.../filters-input-autocomplete.stories.tsx | 5 +-
...utocomplete.stories_snapshots_Default.html | 208 +-
...omplete.stories_snapshots_Entreprises.html | 6 +-
.../filters/filters-input-autocomplete.tsx | 5 +-
.../_ui/filters/filters-input.stories.tsx | 2 +-
...put.stories_snapshots_Administrations.html | 2 +-
.../components/_ui/filters/filters-input.tsx | 12 +-
...tories_snapshots_AllFiltersWithValues.html | 2097 +++++++++------
...ies_snapshots_AllFiltersWithoutValues.html | 2300 +++++++++++------
...rs.stories_snapshots_CustomWithValues.html | 263 +-
...ilters.stories_snapshots_WithoutValue.html | 37 +-
.../ui/src/components/_ui/filters/filters.tsx | 67 +-
.../src/components/_ui/functional-popup.tsx | 18 +-
.../src/components/_ui/label-with-value.tsx | 7 +-
packages/ui/src/components/_ui/tabs.tsx | 16 +-
.../src/components/_ui/typeahead-multiple.tsx | 59 +-
.../src/components/_ui/typeahead-single.tsx | 44 +-
.../_ui/typeahead-smart-multiple.tsx | 5 +-
.../src/components/_ui/typeahead.module.css | 22 +-
.../typeahead.stories_snapshots_Multiple.html | 20 +-
....stories_snapshots_MultipleAlwaysOpen.html | 36 +-
...shots_MultipleWithALotOfItemsSelected.html | 9 +-
...es_snapshots_MultipleWithInitialItems.html | 18 +-
...ts_MultipleWithInitialItemsAlwaysOpen.html | 32 +-
.../typeahead.stories_snapshots_Single.html | 8 +-
...head.stories_snapshots_SingleDisabled.html | 7 +-
...ories_snapshots_SingleWithInitialItem.html | 7 +-
...peahead.stories_snapshots_SmartSingle.html | 7 +-
...snapshots_SmartSingleWithInitialValue.html | 6 +-
...VideLaSelectionAuChangementDeContexte.html | 8 +-
...ition.stories_snapshots_FullDeposable.html | 15 +-
...e-edition.stories_snapshots_FullEmpty.html | 41 +-
...pshots_FullEmptyWithMandatoryDocument.html | 41 +-
.../ui/src/components/activite-edition.tsx | 4 +-
...activite.stories_snapshots_ACompleter.html | 4 +-
.../activite.stories_snapshots_Deposable.html | 4 +-
...ctivite.stories_snapshots_Supprimable.html | 4 +-
...stories_snapshots_DocumentObligatoire.html | 6 +-
...p.stories_snapshots_DocumentOptionnel.html | 6 +-
.../activite/add-activite-document-popup.tsx | 3 +-
.../preview.stories_snapshots_ACompleter.html | 6 +-
.../preview.stories_snapshots_Defaut.html | 6 +-
.../preview.stories_snapshots_Deposable.html | 6 +-
...preview.stories_snapshots_Supprimable.html | 6 +-
.../ui/src/components/activite/preview.tsx | 2 +-
.../activites.stories_snapshots_Full.html | 1043 +++++---
...inistration.stories_snapshots_Default.html | 18 +-
...dModificationSurAdministrationVisible.html | 4 +-
...ts_EmailLectureAndModificationVisible.html | 4 +-
.../administration/activites-types-emails.tsx | 4 +-
...nistrations.stories_snapshots_Default.html | 136 +-
.../about.stories_snapshots_Default.html | 24 +-
packages/ui/src/components/content/about.tsx | 2 +-
.../components/dashboard/dgtm-stats-full.tsx | 14 +-
...ration-dashboard.stories_snapshots_Ok.html | 8 +-
...ries_snapshots_OkWithoutBlockedTitres.html | 6 +-
.../pure-administration-dashboard.tsx | 3 +-
.../components/dashboard/pure-dgtm-stats.tsx | 16 +-
.../dashboard/pure-entreprise-dashboard.tsx | 20 +-
...ape.stories_snapshots_AvisDefavorable.html | 2 +-
...ape.stories_snapshots_AvisDesServices.html | 2 +-
...es_snapshots_AxmDeposableAvecDaeEtAsl.html | 78 +-
...snapshots_DemandeArmMecaniseDeposable.html | 78 +-
...pshots_DemandeArmMecaniseNonDeposable.html | 78 +-
...pshots_DemandeArmNonMecaniseDeposable.html | 78 +-
...e.stories_snapshots_DemandeAvecForage.html | 78 +-
...ories_snapshots_DemandeAvecGrosseNote.html | 78 +-
...apshots_DemandeAvecSeulementPerimetre.html | 78 +-
...stories_snapshots_DemandeDeComplement.html | 2 +-
...apshots_DemandeDeComplementEntreprise.html | 2 +-
...ories_snapshots_DemandeDeConsentement.html | 2 +-
...s_DemandeMultipleEntreprisesDocuments.html | 2 +-
...-etape.stories_snapshots_DemandeNoMap.html | 2 +-
...stories_snapshots_DemandeNonDeposable.html | 2 +-
...ories_snapshots_DemandeNonSupprimable.html | 2 +-
...emarche-etape.stories_snapshots_Depot.html | 2 +-
..._snapshots_EtapeAvecNoteAvertissement.html | 2 +-
.../components/demarche/demarche-etape.tsx | 6 +-
...res-etapes.stories_snapshots_Multiple.html | 240 +-
...pes.stories_snapshots_PartialOneValue.html | 120 +-
.../components/demarches/filtres-etapes.tsx | 5 +-
.../page.stories_snapshots_Demarches.html | 1336 ++++++----
.../page.stories_snapshots_Loading.html | 1296 ++++++----
.../page.stories_snapshots_Travaux.html | 1120 +++++---
.../page.stories_snapshots_WithError.html | 1296 ++++++----
.../entreprise.stories_snapshots_Complet.html | 22 +-
...reprise.stories_snapshots_NonConnecte.html | 18 +-
...ument-popup.stories_snapshots_Default.html | 11 +-
...ies_snapshots_TypeDeDocumentVerouille.html | 11 +-
.../add-entreprise-document-popup.tsx | 8 +-
.../add-popup.stories_snapshots_Super.html | 6 +-
.../src/components/entreprise/add-popup.tsx | 4 +-
.../edit-popup.stories_snapshots_Ok.html | 6 +-
.../edit-popup.stories_snapshots_Super.html | 6 +-
.../src/components/entreprise/edit-popup.tsx | 6 +-
...se-fiscalite.stories_snapshots_Guyane.html | 2 +-
...ories_snapshots_GuyaneAnneePrecedente.html | 2 +-
...e-fiscalite.stories_snapshots_Loading.html | 2 +-
...eprise-fiscalite.stories_snapshots_Ok.html | 2 +-
...fiscalite.stories_snapshots_WithError.html | 2 +-
.../entreprise/entreprise-fiscalite.tsx | 3 +-
...eprises.stories_snapshots_NonConnecte.html | 47 +-
...stories_snapshots_canCreateEntreprise.html | 47 +-
...ition.stories_snapshots_AffichageAide.html | 112 +-
...ion.stories_snapshots_AxmEnZoneDuSdom.html | 108 +-
...pe-edition.stories_snapshots_Creation.html | 4 +-
....stories_snapshots_DemandeArmComplete.html | 218 +-
...dition.stories_snapshots_Modification.html | 112 +-
..._snapshots_ModificationDemandeHeritee.html | 108 +-
...EnvironnementaleADesStatutsDifferents.html | 12 +-
...atoireSuppressionDuStatutNonRenseigne.html | 12 +-
...apshots_DocumentInitialDejaSauvegarde.html | 12 +-
...s_snapshots_DocumentInitialTemporaire.html | 12 +-
...stories_snapshots_SansDocumentInitial.html | 42 +-
.../components/etape/add-etape-avis-popup.tsx | 1 +
...ument-popup.stories_snapshots_Default.html | 18 +-
...pup.stories_snapshots_DocumentInitial.html | 9 +-
...tories_snapshots_DocumentInitialAutre.html | 9 +-
...nt-popup.stories_snapshots_Entreprise.html | 17 +-
...ries_snapshots_UnSeulDocumentPossible.html | 9 +-
.../etape/add-etape-document-popup.tsx | 1 +
...rise-single.stories_snapshots_Default.html | 6 +-
...le.stories_snapshots_WithInitialValue.html | 7 +-
.../autocomplete-entreprises.stories.tsx | 3 +-
...entreprises.stories_snapshots_Default.html | 8 +-
..._snapshots_WithEntitiesAlreadyPresent.html | 10 +-
.../etape/autocomplete-entreprises.tsx | 4 +-
...e-type-edit.stories_snapshots_Default.html | 13 +-
...e-type-edit.stories_snapshots_Loading.html | 4 +-
...type-edit.stories_snapshots_WithError.html | 6 +-
...ype-edit.stories_snapshots_WithTypeId.html | 14 +-
...ories_snapshots_WithTypeIdAndStatutId.html | 14 +-
.../src/components/etape/date-type-edit.tsx | 2 +-
.../etape/entreprises-documents-edit.tsx | 2 +
...e-edit-form.stories_snapshots_Default.html | 50 +-
...eConsultationAdministrationsCentrales.html | 20 +-
...snapshots_EtapeDecisionAdministration.html | 46 +-
...m.stories_snapshots_EtapeModification.html | 126 +-
...ories_snapshots_EtapeModificationAvis.html | 20 +-
.../src/components/etape/etape-edit-form.tsx | 2 +-
...-edit.stories_snapshots_ArmDemandeONF.html | 21 +-
...stories_snapshots_ArmDemandeOperateur.html | 12 +-
...les-edit.stories_snapshots_ArmJorfONF.html | 27 +-
...-edit.stories_snapshots_AxmDemandeONF.html | 21 +-
...dit.stories_snapshots_AxmDemandeSuper.html | 21 +-
...tories_snapshots_AxmDemandeTropLongue.html | 21 +-
...-edit.stories_snapshots_PrmDemandeONF.html | 28 +-
...napshots_PrmDeplacementDePerimetreONF.html | 2 +-
.../components/etape/fondamentales-edit.tsx | 89 +-
...t-popup.stories_snapshots_CsvSelected.html | 80 +-
...mport-popup.stories_snapshots_Default.html | 76 +-
.../components/etape/forages-import-popup.tsx | 2 +-
.../etape/heritage-edit.stories.tsx | 24 +-
...it.stories_snapshots_HeritageDisabled.html | 4 +-
...snapshots_HeritageEnabledWithoutValue.html | 3 +-
...age-edit.stories_snapshots_NoHeritage.html | 4 +-
...itage-edit.stories_snapshots_Optional.html | 8 +
.../ui/src/components/etape/heritage-edit.tsx | 2 +
...-edit.stories_snapshots_EmptyHeritage.html | 2 +-
...it.stories_snapshots_FilledNoHeritage.html | 76 +-
...metre-edit.stories_snapshots_Heritage.html | 76 +-
...it.stories_snapshots_LegacyGeoSysteme.html | 76 +-
...re-edit.stories_snapshots_WithForages.html | 74 +-
.../src/components/etape/perimetre-edit.tsx | 1 +
...mport-popup.stories_snapshots_Default.html | 76 +-
.../etape/perimetre-import-popup.tsx | 2 +-
...mport-popup.stories_snapshots_Default.html | 78 +-
.../components/etape/points-import-popup.tsx | 2 +-
.../etape/section-element-with-value-edit.tsx | 3 +-
...s-edit.stories_snapshots_AvecHeritage.html | 4 +-
...s-edit.stories_snapshots_DecisionJorf.html | 8 +-
...s-edit.stories_snapshots_SansHeritage.html | 4 +-
...s-edit.stories_snapshots_AvecHeritage.html | 2 +-
...s-edit.stories_snapshots_SansHeritage.html | 94 +-
...-edit.stories_snapshots_SansSubstance.html | 95 +-
.../src/components/etape/substances-edit.tsx | 7 +-
...ies_snapshots_DemandeAvecUnSeulStatut.html | 12 +-
...t.stories_snapshots_DemandeSansStatut.html | 12 +-
.../type-edit.stories_snapshots_Empty.html | 2 +-
.../type-edit.stories_snapshots_NoEtape.html | 2 +-
...dit.stories_snapshots_NouvelleDemande.html | 11 +-
...es_snapshots_SelectedEtapeNotPossible.html | 2 +-
...type-edit.stories_snapshots_WithError.html | 2 +-
.../ui/src/components/etape/type-edit.tsx | 4 +-
...naux.stories_snapshots_AvecPagination.html | 47 +-
.../journaux.stories_snapshots_Default.html | 47 +-
.../journaux.stories_snapshots_Loading.html | 47 +-
.../journaux.stories_snapshots_WithError.html | 47 +-
.../footer.stories_snapshots_Default.html | 19 +-
packages/ui/src/components/page/footer.tsx | 115 +-
.../header.stories_snapshots_AdminDGTM.html | 12 +-
.../header.stories_snapshots_AdminONF.html | 12 +-
...eader.stories_snapshots_BureauDEtudes.html | 12 +-
...der.stories_snapshots_CanOpenAnnuaire.html | 12 +-
.../header.stories_snapshots_Deconnecte.html | 12 +-
.../page/header.stories_snapshots_Defaut.html | 12 +-
.../header.stories_snapshots_Editeur.html | 12 +-
.../header.stories_snapshots_Entreprise.html | 12 +-
.../header.stories_snapshots_Lecteur.html | 12 +-
.../page/header.stories_snapshots_Super.html | 12 +-
packages/ui/src/components/page/header.tsx | 131 +-
packages/ui/src/components/page/menu.ts | 35 +
.../ui/src/components/page/plan.stories.tsx | 20 +
.../plan.stories_snapshots_AdminDGTM.html | 17 +
.../page/plan.stories_snapshots_AdminONF.html | 16 +
.../plan.stories_snapshots_BureauDEtudes.html | 15 +
.../plan.stories_snapshots_Deconnecte.html | 13 +
.../page/plan.stories_snapshots_Defaut.html | 13 +
.../page/plan.stories_snapshots_Editeur.html | 16 +
.../plan.stories_snapshots_Entreprise.html | 16 +
.../page/plan.stories_snapshots_Lecteur.html | 15 +
.../page/plan.stories_snapshots_Super.html | 17 +
packages/ui/src/components/page/plan.tsx | 47 +
...-access-titre.stories_snapshots_Empty.html | 6 +-
...k-access-titre.stories_snapshots_Full.html | 607 ++++-
...itre.stories_snapshots_FullAlwaysOpen.html | 408 +--
...access-titre.stories_snapshots_Simple.html | 19 +-
.../components/page/quick-access-titre.tsx | 4 +-
packages/ui/src/components/statistiques.tsx | 7 +-
.../src/components/statistiques/globales.tsx | 42 +-
.../granulats-marins-activite.tsx | 8 +-
.../statistiques/granulats-marins.tsx | 20 +-
.../statistiques/guyane-activite.tsx | 14 +-
.../ui/src/components/statistiques/guyane.tsx | 56 +-
.../mineraux-metaux-metropole.tsx | 53 +-
...on.stories_snapshots_DefaultUserSuper.html | 2 +-
...napshots_DisplayErrorMessageUserSuper.html | 25 +-
...tion.stories_snapshots_FullEntreprise.html | 29 +-
...-creation.stories_snapshots_FullSuper.html | 25 +-
...shots_OnlyOneEntrepriseUserEntreprise.html | 10 +-
..._snapshots_OnlyOneEntrepriseUserSuper.html | 2 +-
packages/ui/src/components/titre-creation.tsx | 2 +-
...stories_snapshots_AbattisKoticaOctroi.html | 171 +-
.../titre.stories_snapshots_BasseManaMod.html | 187 +-
...tre.stories_snapshots_BonEspoirOctroi.html | 193 +-
...ries_snapshots_BonEspoirProlongation2.html | 121 +-
...re.stories_snapshots_BonEspoirTravaux.html | 43 +-
...e.stories_snapshots_ChantepieMutation.html | 98 +-
...tre.stories_snapshots_ChantepieOctroi.html | 250 +-
...snapshots_ChantepieOctroiAsEntreprise.html | 250 +-
...stories_snapshots_CriqueAdolpheOctroi.html | 181 +-
.../titre.stories_snapshots_Empty.html | 2 +-
.../titre.stories_snapshots_Full.html | 156 +-
.../titre.stories_snapshots_Lenoncourt.html | 199 +-
...AvecUnOctroiEnConstructionEtUnTravaux.html | 156 +-
...treAvecUneSeuleDemarcheEnConstruction.html | 156 +-
.../titre.stories_snapshots_WithDoublon.html | 2 +-
...ries_snapshots_WithLinkableTitreAmont.html | 2 +-
...ories_snapshots_WithLinkableTitreAval.html | 2 +-
packages/ui/src/components/titre.tsx | 2 +-
...e-edit-popup.stories_snapshots_Create.html | 4 +-
...stories_snapshots_DisplayErrorMessage.html | 4 +-
...che-edit-popup.stories_snapshots_Edit.html | 4 +-
.../components/titre/demarche-edit-popup.tsx | 2 +-
....stories_snapshots_DefaultNoReference.html | 4 +-
...-popup.stories_snapshots_OneReference.html | 6 +-
...concurrence.stories_snapshots_Default.html | 8 +-
...concurrence.stories_snapshots_Loading.html | 4 +-
...hots_PerimetreAvecSatelliteEquivalent.html | 8 +-
...ries_snapshots_PerimetreSansSatellite.html | 8 +-
...ncurrence.stories_snapshots_WithError.html | 6 +-
.../titre/resultat-mise-en-concurrence.tsx | 2 +-
.../titre/titre-timeline.module.css | 21 +
...timeline.stories_snapshots_BigExample.html | 47 +-
...re-timeline.stories_snapshots_Default.html | 29 +-
...es_snapshots_DefaultWithEventSelected.html | 29 +-
..._snapshots_DefaultWithTravauxSelected.html | 29 +-
...ultipleUnorderedDemarchesWithoutPhase.html | 18 +-
...snapshots_OnePhaseMultipleAlterations.html | 17 +-
...line.stories_snapshots_SimpleOnePhase.html | 11 +-
...-timeline.stories_snapshots_TwoPhases.html | 18 +-
.../src/components/titre/titre-timeline.tsx | 43 +-
.../titres-link.stories_snapshots_AXM.html | 20 +-
...snapshots_AXMWithAlreadySelectedTitre.html | 15 +-
...link.stories_snapshots_DemarcheFusion.html | 20 +-
...emarcheFusionWithAlreadySelectedTitre.html | 10 +-
...isateur.stories_snapshots_AnotherUser.html | 12 +-
.../utilisateur.stories_snapshots_MySelf.html | 14 +-
.../utilisateur.stories_snapshots_error.html | 2 +-
...edit.stories_snapshots_Administration.html | 4 +-
...ission-edit.stories_snapshots_Default.html | 2 +-
...ion-edit.stories_snapshots_Entreprise.html | 4 +-
...ots_UserAdminCanEditDefautIntoLecteur.html | 2 +-
.../utilisateur/permission-edit.tsx | 2 +
.../src/components/utilisateur/qgis-token.tsx | 43 +-
...lisateurs.stories_snapshots_Connected.html | 368 ++-
...tilisateurs.stories_snapshots_Loading.html | 368 ++-
...lisateurs.stories_snapshots_WithError.html | 368 ++-
packages/ui/src/router/camino-router-link.tsx | 5 +-
packages/ui/src/router/index.ts | 26 +-
packages/ui/src/router/routes.ts | 33 +-
packages/ui/src/utils/page-ids.ts | 6 +
388 files changed, 17395 insertions(+), 6997 deletions(-)
create mode 100644 packages/ui/src/components/_ui/dsfr-callout.stories.tsx
create mode 100644 packages/ui/src/components/_ui/dsfr-callout.stories_snapshots_Default.html
create mode 100644 packages/ui/src/components/_ui/dsfr-callout.tsx
create mode 100644 packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_Required.html
create mode 100644 packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Optional.html
create mode 100644 packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Optional.html
create mode 100644 packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Optional.html
create mode 100644 packages/ui/src/components/etape/heritage-edit.stories_snapshots_Optional.html
create mode 100644 packages/ui/src/components/page/menu.ts
create mode 100644 packages/ui/src/components/page/plan.stories.tsx
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_AdminDGTM.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_AdminONF.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_BureauDEtudes.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_Deconnecte.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_Defaut.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_Editeur.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_Entreprise.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_Lecteur.html
create mode 100644 packages/ui/src/components/page/plan.stories_snapshots_Super.html
create mode 100644 packages/ui/src/components/page/plan.tsx
create mode 100644 packages/ui/src/utils/page-ids.ts
diff --git a/package-lock.json b/package-lock.json
index 795026833..0294fa4b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3459,6 +3459,100 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
+ "node_modules/@formatjs/ecma402-abstract": {
+ "version": "1.18.2",
+ "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz",
+ "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/intl-localematcher": "0.5.4",
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@formatjs/fast-memoize": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+ "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@formatjs/icu-messageformat-parser": {
+ "version": "2.7.6",
+ "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.6.tgz",
+ "integrity": "sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/ecma402-abstract": "1.18.2",
+ "@formatjs/icu-skeleton-parser": "1.8.0",
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@formatjs/icu-skeleton-parser": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.0.tgz",
+ "integrity": "sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/ecma402-abstract": "1.18.2",
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@formatjs/intl": {
+ "version": "2.10.2",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.2.tgz",
+ "integrity": "sha512-raPGWr3JRv3neXV78SqPFrGC05fIbhhNzVghHNxFde27ls2KkXiMhtP7HBybjGpikVSjjhdhaZto+4p1vmm9bQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/ecma402-abstract": "1.18.2",
+ "@formatjs/fast-memoize": "2.2.0",
+ "@formatjs/icu-messageformat-parser": "2.7.6",
+ "@formatjs/intl-displaynames": "6.6.6",
+ "@formatjs/intl-listformat": "7.5.5",
+ "intl-messageformat": "10.5.12",
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "typescript": "^4.7 || 5"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@formatjs/intl-displaynames": {
+ "version": "6.6.6",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.6.tgz",
+ "integrity": "sha512-Dg5URSjx0uzF8VZXtHb6KYZ6LFEEhCbAbKoYChYHEOnMFTw/ZU3jIo/NrujzQD2EfKPgQzIq73LOUvW6Z/LpFA==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/ecma402-abstract": "1.18.2",
+ "@formatjs/intl-localematcher": "0.5.4",
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@formatjs/intl-listformat": {
+ "version": "7.5.5",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.5.5.tgz",
+ "integrity": "sha512-XoI52qrU6aBGJC9KJddqnacuBbPlb/bXFN+lIFVFhQ1RnFHpzuFrlFdjD9am2O7ZSYsyqzYRpkVcXeT1GHkwDQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/ecma402-abstract": "1.18.2",
+ "@formatjs/intl-localematcher": "0.5.4",
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@formatjs/intl-localematcher": {
+ "version": "0.5.4",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+ "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
"node_modules/@graphql-tools/graphql-file-loader": {
"version": "8.0.6",
"resolved": "https://registry.npmjs.org/@graphql-tools/graphql-file-loader/-/graphql-file-loader-8.0.6.tgz",
@@ -4572,8 +4666,7 @@
"node_modules/@kurkle/color": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
- "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
- "dev": true
+ "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
},
"node_modules/@mapbox/geojson-rewind": {
"version": "0.5.2",
@@ -10740,6 +10833,37 @@
"pnpm": ">=8"
}
},
+ "node_modules/chart2music": {
+ "version": "1.17.0",
+ "resolved": "https://registry.npmjs.org/chart2music/-/chart2music-1.17.0.tgz",
+ "integrity": "sha512-oDlISz51Mttx74cbA8REJDHxennlRxdafSSyimeqtsk/EUF3wO+KCuBMEGj9ZYTemlfe+GtfUa9kkV6tPScEvQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@formatjs/intl": "2.10.2"
+ }
+ },
+ "node_modules/chartjs-plugin-chart2music": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/chartjs-plugin-chart2music/-/chartjs-plugin-chart2music-0.6.0.tgz",
+ "integrity": "sha512-70MJF5XAk/aAauIX6Z8IQh/gAeBLIqBLFapS+Kt7+cb9pdrbCu5RerqhI41X+ffQKl9ImsWoa/kDRyVQBgXj0Q==",
+ "license": "MIT",
+ "dependencies": {
+ "chart.js": "4.4.4",
+ "chart2music": "1.17.0"
+ }
+ },
+ "node_modules/chartjs-plugin-chart2music/node_modules/chart.js": {
+ "version": "4.4.4",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+ "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+ "license": "MIT",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=8"
+ }
+ },
"node_modules/check-error": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -13916,6 +14040,15 @@
"integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
"dev": true
},
+ "node_modules/focus-trap": {
+ "version": "7.6.4",
+ "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz",
+ "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==",
+ "license": "MIT",
+ "dependencies": {
+ "tabbable": "^6.2.0"
+ }
+ },
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -15208,6 +15341,18 @@
"node": ">= 0.10"
}
},
+ "node_modules/intl-messageformat": {
+ "version": "10.5.12",
+ "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.12.tgz",
+ "integrity": "sha512-izl0uxhy/melhw8gP2r8pGiVieviZmM4v5Oqx3c1/R7g9cwER2smmGfSjcIsp8Y3Q53bfciL/gkxacJRx/dUvg==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@formatjs/ecma402-abstract": "1.18.2",
+ "@formatjs/fast-memoize": "2.2.0",
+ "@formatjs/icu-messageformat-parser": "2.7.6",
+ "tslib": "^2.4.0"
+ }
+ },
"node_modules/into-stream": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/into-stream/-/into-stream-7.0.0.tgz",
@@ -24308,6 +24453,12 @@
"url": "https://opencollective.com/unts"
}
},
+ "node_modules/tabbable": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+ "license": "MIT"
+ },
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -26857,7 +27008,9 @@
"version": "1.0.0",
"dependencies": {
"@codegouvfr/react-dsfr": "1.17.0",
+ "chartjs-plugin-chart2music": "^0.6.0",
"decimal.js": "^10.4.3",
+ "focus-trap": "^7.6.4",
"zod": "^3.23.8"
},
"devDependencies": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1bcf1750e..1a611a954 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -103,7 +103,9 @@
],
"dependencies": {
"@codegouvfr/react-dsfr": "1.17.0",
+ "chartjs-plugin-chart2music": "^0.6.0",
"decimal.js": "^10.4.3",
+ "focus-trap": "^7.6.4",
"zod": "^3.23.8"
}
}
diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx
index 13b3a1bed..679396d37 100644
--- a/packages/ui/src/app.tsx
+++ b/packages/ui/src/app.tsx
@@ -11,6 +11,8 @@ import { MapPattern } from './components/_map/pattern'
import { RouterView, useRoute } from 'vue-router'
import { isNullOrUndefinedOrEmpty } from 'camino-common/src/typescript-tools'
import { userKey } from './moi'
+import { FunctionalComponent } from 'vue'
+import { PAGE_IDS } from './utils/page-ids'
export const App = defineComponent(() => {
const route = useRoute()
@@ -33,18 +35,50 @@ export const App = defineComponent(() => {
return () => (
<div>
+ <Skiplink />
<MapPattern />
-
<Header user={user} currentMenuSection={currentMenuSection.value} routePath={route.fullPath} />
-
- <main role="main">
+ <main role="main" id={PAGE_IDS.contenu.id}>
<div class={hasGutter.value ? ['fr-container', 'fr-py-3w'] : null}>{loaded.value ? <RouterView /> : null}</div>
</main>
-
<Footer version={version.value} />
</div>
)
})
+const Skiplink: FunctionalComponent = () => {
+ return (
+ <div class="fr-skiplinks">
+ <nav role="navigation" aria-label="Accès rapide" class="fr-container">
+ <ul class="fr-skiplinks__list">
+ <li>
+ <a class="fr-link" href={`#${PAGE_IDS.contenu.id}`}>
+ {PAGE_IDS.contenu.label}
+ </a>
+ </li>
+
+ <li>
+ <a class="fr-link" href={`#${PAGE_IDS.menu.id}`}>
+ {PAGE_IDS.menu.label}
+ </a>
+ </li>
+
+ <li>
+ <a class="fr-link" href={`#${PAGE_IDS.search.id}`}>
+ {PAGE_IDS.search.label}
+ </a>
+ </li>
+
+ <li>
+ <a class="fr-link" href={`#${PAGE_IDS.footer.id}`}>
+ {PAGE_IDS.footer.label}
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ )
+}
+
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
App.props = ['user']
diff --git a/packages/ui/src/components/_charts/chart-with-export.tsx b/packages/ui/src/components/_charts/chart-with-export.tsx
index 90fc0139d..58af81716 100644
--- a/packages/ui/src/components/_charts/chart-with-export.tsx
+++ b/packages/ui/src/components/_charts/chart-with-export.tsx
@@ -6,10 +6,23 @@ import { defineAsyncComponent } from 'vue'
import type { JSX } from 'vue/jsx-runtime'
import { DsfrButtonIcon } from '../_ui/dsfr-button'
-interface Props<T> {
+type AutoyearlyDescription = {
+ a11yDescription: 'autoyearlytable'
+ description: string
+}
+
+type A11yDescription = {
+ a11yDescription: JSX.Element
+}
+
+type AriaHidden = {
+ ariaHidden: boolean
+}
+
+type Props<T> = {
data: AsyncData<T>
getConfiguration: (data: T) => ChartConfiguration
-}
+} & (A11yDescription | AriaHidden | AutoyearlyDescription)
const exportCsv = (conf: ChartConfiguration) => {
const title = conf.options?.plugins?.title?.text ?? 'export'
@@ -37,7 +50,7 @@ export const ChartWithExport = <T,>(props: Props<T>): JSX.Element => {
renderItem={item => {
return (
<div style="position: relative">
- <ConfigurableChart chartConfiguration={props.getConfiguration(item)} />
+ <ConfigurableChart chartConfiguration={props.getConfiguration(item)} {...props} />
<DsfrButtonIcon
icon="fr-icon-download-line"
onClick={() => exportCsv(props.getConfiguration(item))}
diff --git a/packages/ui/src/components/_charts/configurable-chart.tsx b/packages/ui/src/components/_charts/configurable-chart.tsx
index d32a2b898..083d2a892 100644
--- a/packages/ui/src/components/_charts/configurable-chart.tsx
+++ b/packages/ui/src/components/_charts/configurable-chart.tsx
@@ -16,12 +16,28 @@ import {
ArcElement,
ChartType,
} from 'chart.js'
+
import { ref, onMounted, onUnmounted, defineComponent } from 'vue'
+import { JSX } from 'vue/jsx-runtime'
+import chartjs2music from 'chartjs-plugin-chart2music'
+
+type AutoyearlyDescription = {
+ a11yDescription: 'autoyearlytable'
+ description: string
+}
+
+type A11yDescription = {
+ a11yDescription: JSX.Element
+}
+type AriaHidden = {
+ ariaHidden: boolean
+}
+Chart.register(chartjs2music)
Chart.register(LinearScale, PieController, ArcElement, BarController, CategoryScale, BarElement, LineController, PointElement, LineElement, Filler, Legend, Tooltip, Title)
-interface Props<TType extends ChartType> {
+type Props<TType extends ChartType> = {
chartConfiguration: ChartConfiguration<TType>
-}
+} & (A11yDescription | AriaHidden | AutoyearlyDescription)
export const ConfigurableChart = defineComponent(<TType extends ChartType = ChartType>(props: Props<TType>) => {
const myCanvas = ref<HTMLCanvasElement | null>(null)
@@ -31,7 +47,11 @@ export const ConfigurableChart = defineComponent(<TType extends ChartType = Char
if (!context) {
console.error('le canvas ne devrait pas être null')
} else {
- chart = new Chart(context, props.chartConfiguration)
+ chart = new Chart<TType>(context, {
+ ...props.chartConfiguration,
+ // @ts-ignore 2025-01-23 type multiverse :sad:
+ options: { ...props.chartConfiguration.options, plugins: { ...props.chartConfiguration.options?.plugins, chartjs2music: { lang: 'fr' } } },
+ })
}
})
@@ -42,8 +62,38 @@ export const ConfigurableChart = defineComponent(<TType extends ChartType = Char
}
})
- return () => <canvas ref={myCanvas} />
+ const getA11yDescription = <TType extends ChartType>(caption: string, configuration: ChartConfiguration<TType>): JSX.Element => {
+ return (
+ <table>
+ <caption>{caption}</caption>
+ <thead>
+ <tr>
+ <th>Année</th>
+ {configuration.data.datasets.map(d => (
+ <th>{d.label}</th>
+ ))}
+ </tr>
+ </thead>
+ <tbody>
+ {configuration.data.labels?.map((label, index) => (
+ <tr>
+ <td>{label}</td>
+ {configuration.data.datasets.map(d => (
+ <th>{typeof d.data[index] === 'number' && Number.isNaN(d.data[index]) ? 'Pas de donnée' : d.data[index]}</th>
+ ))}
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ )
+ }
+
+ return () => (
+ <canvas ref={myCanvas} aria-hidden={'ariaHidden' in props ? props.ariaHidden : false}>
+ {'a11yDescription' in props ? (props.a11yDescription === 'autoyearlytable' ? getA11yDescription(props.description, props.chartConfiguration) : props.a11yDescription) : null}
+ </canvas>
+ )
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-ConfigurableChart.props = ['chartConfiguration']
+ConfigurableChart.props = ['chartConfiguration', 'a11yDescription', 'ariaHidden', 'description']
diff --git a/packages/ui/src/components/_charts/utils.ts b/packages/ui/src/components/_charts/utils.ts
index 533356a09..ee75edb0a 100644
--- a/packages/ui/src/components/_charts/utils.ts
+++ b/packages/ui/src/components/_charts/utils.ts
@@ -1,12 +1,12 @@
export const CHART_COLORS = {
red: 'rgb(255, 99, 132)',
- orange: 'rgb(255, 159, 64)',
- yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
+ orange: 'rgb(255, 159, 64)',
blue: 'rgb(54, 162, 235)',
+ yellow: 'rgb(255, 205, 86)',
purple: 'rgb(153, 102, 255)',
- grey: 'rgb(201, 203, 207)',
black: 'rgb(0, 0, 0)',
+ grey: 'rgb(201, 203, 207)',
} as const
type ChartColor = (typeof CHART_COLORS)[keyof typeof CHART_COLORS]
diff --git a/packages/ui/src/components/_common/downloads.tsx b/packages/ui/src/components/_common/downloads.tsx
index 070cceb28..148034a5d 100644
--- a/packages/ui/src/components/_common/downloads.tsx
+++ b/packages/ui/src/components/_common/downloads.tsx
@@ -46,6 +46,7 @@ export const PureDownloads = defineComponent(<T extends DownloadRestRoutes>(prop
<div style={{ display: 'flex' }}>
{props.formats.length > 1 ? (
<DsfrSelect
+ required={false}
id={props.id}
class="fr-mr-1v"
items={items}
diff --git a/packages/ui/src/components/_common/dsfr-perimetre-table.tsx b/packages/ui/src/components/_common/dsfr-perimetre-table.tsx
index 8623b6c22..59b31fdb0 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre-table.tsx
+++ b/packages/ui/src/components/_common/dsfr-perimetre-table.tsx
@@ -149,7 +149,7 @@ export const TabCaminoTable = defineComponent<Props>(props => {
<div style={{ display: 'flex', flexDirection: 'column' }}>
<GeoSystemeTypeahead disabled={true} geoSystemeId={props.geo_systeme_id} />
- <TablePoints caption={isNotNullNorUndefined(props.geojson_origine_forages) ? 'Points' : ''} {...props} />
+ <TablePoints caption="Points" {...props} />
{isNotNullNorUndefined(props.geojson_origine_forages) ? (
<TableForages geo_systeme_id={props.geo_systeme_id} geojson_origine_forages={props.geojson_origine_forages} titreSlug={props.titreSlug} />
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 50cac8a51..3f6889ee6 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
@@ -309,8 +309,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -319,7 +389,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 06f39f09b..9bfe8e305 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
@@ -309,8 +309,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGF93 / Lambert-93 - (2154)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -319,7 +389,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 da4936340..6d8bb8adc 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
@@ -309,8 +309,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 - (4624)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -319,7 +389,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 a1930163c..6c1461ab1 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
@@ -309,8 +309,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -319,7 +389,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 273a814ca..621a6e450 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
@@ -309,8 +309,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -319,7 +389,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 c3c72962e..3e66c3088 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
@@ -10,8 +10,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 - (4624)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
diff --git a/packages/ui/src/components/_common/filtres/types.stories_snapshots_AllTypes.html b/packages/ui/src/components/_common/filtres/types.stories_snapshots_AllTypes.html
index 1c5c544e1..1cff1e85f 100644
--- a/packages/ui/src/components/_common/filtres/types.stories_snapshots_AllTypes.html
+++ b/packages/ui/src/components/_common/filtres/types.stories_snapshots_AllTypes.html
@@ -304,291 +304,291 @@
</thead>
<tr>
<td>ap</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ar</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ax</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>cx</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>in</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>pc</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pr</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>px</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>ap-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-m"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-m"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-c"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-c"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-f"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-f"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-g"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-g"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-h"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-h"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-r"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-r"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-s"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-s"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ap-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-w"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap-w"></rect></svg><span>Autorisation de prospections préalables</span></span></td>
</tr>
<tr>
<td>ar-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-m"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-m"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-c"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-c"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-f"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-f"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-g"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-g"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-h"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-h"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-r"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-r"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-s"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-s"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ar-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-w"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar-w"></rect></svg><span>Autorisation de recherches</span></span></td>
</tr>
<tr>
<td>ax-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-m"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-m"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-c"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-c"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-f"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-f"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-g"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-g"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-h"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-h"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-r"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-r"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-s"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-s"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>ax-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-w"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax-w"></rect></svg><span>Autorisation d'exploitation</span></span></td>
</tr>
<tr>
<td>cx-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-m"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-m"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-c"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-c"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-f"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-f"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-g"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-g"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-h"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-h"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-r"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-r"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-s"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-s"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>cx-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-w"></rect></svg><span class="h6 bold">Concession</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx-w"></rect></svg><span>Concession</span></span></td>
</tr>
<tr>
<td>in-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-m"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-m"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-c"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-c"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-f"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-f"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-g"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-g"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-h"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-h"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-r"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-r"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-s"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-s"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>in-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-w"></rect></svg><span class="h6 bold">Indéterminé</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in-w"></rect></svg><span>Indéterminé</span></span></td>
</tr>
<tr>
<td>pc-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-m"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-m"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-c"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-c"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-f"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-f"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-g"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-g"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-h"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-h"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-r"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-r"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-s"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-s"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pc-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-w"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc-w"></rect></svg><span>Permis exclusif de carrières</span></span></td>
</tr>
<tr>
<td>pr-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-m"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-m"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-c"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-c"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-f"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-f"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-g"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-g"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-h"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-h"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-r"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-r"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-s"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-s"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>pr-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-w"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr-w"></rect></svg><span>Permis exclusif de recherches</span></span></td>
</tr>
<tr>
<td>px-m</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-m"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-m"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-c</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-c"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-c"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-f</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-f"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-f"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-g</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-g"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-g"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-h</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-h"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-h"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-r</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-r"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-r"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-s</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-s"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-s"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
<tr>
<td>px-w</td>
- <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-w"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span></td>
+ <td><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px-w"></rect></svg><span>Permis d'exploitation</span></span></td>
</tr>
</table>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/filtres/types.tsx b/packages/ui/src/components/_common/filtres/types.tsx
index c97be712d..1168d8749 100644
--- a/packages/ui/src/components/_common/filtres/types.tsx
+++ b/packages/ui/src/components/_common/filtres/types.tsx
@@ -16,7 +16,7 @@ export const FiltresTypes: FunctionalComponent<Props> = (props: Props) => {
<svg width="24" height="24" class="mr-s mb--xs">
<rect width="24" height="24" class={`svg-fill-pattern-${props.element.id}`} />
</svg>
- <span class="h6 bold">{capitalize(props.element.nom)}</span>
+ <span>{capitalize(props.element.nom)}</span>
</span>
)
}
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 af64a6826..cf6114dee 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 id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <div class="_typeahead-list_8eddf1">
- <div class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1">
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_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_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-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>
- </div>
- </div>
+ </li>
+ </ul>
</div>
\ No newline at end of file
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 35e2d724c..13427e8e4 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,4 +1,74 @@
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGF93 / Lambert-93 - (2154)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/new-section-element.stories_snapshots_JORF.html b/packages/ui/src/components/_common/new-section-element.stories_snapshots_JORF.html
index 34e58966a..57a3f4b7e 100644
--- a/packages/ui/src/components/_common/new-section-element.stories_snapshots_JORF.html
+++ b/packages/ui/src/components/_common/new-section-element.stories_snapshots_JORF.html
@@ -1,4 +1,4 @@
<div>
<div class="fr-h6 fr-m-0">JORF</div>
- <div><span><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000592092" title="Légifrance - Lien externe">JORFTEXT000000592092</a><!----></span><span class="fr-hint-text"><span>description</span></span></div>
+ <div><span><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000592092" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000000592092</a><!----></span><span class="fr-hint-text"><span>description</span></span></div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/new-section-element.tsx b/packages/ui/src/components/_common/new-section-element.tsx
index d8a87ce13..1f634fad2 100644
--- a/packages/ui/src/components/_common/new-section-element.tsx
+++ b/packages/ui/src/components/_common/new-section-element.tsx
@@ -23,7 +23,7 @@ export const SectionElement: FunctionalComponent<Props> = (props: Props): JSX.El
) : (
<span>
{props.element.id === 'jorf' && props.element.value !== null && props.element.value !== '' ? (
- <a target="_blank" rel="noopener noreferrer" href={`https://www.legifrance.gouv.fr/jorf/id/${valeurFind(props.element)}`} title={`Légifrance - Lien externe`}>
+ <a target="_blank" rel="noopener noreferrer" href={`https://www.legifrance.gouv.fr/jorf/id/${valeurFind(props.element)}`} title={`Numéro JORF Légifrance - Lien externe`}>
{valeurFind(props.element)}
</a>
) : (
diff --git a/packages/ui/src/components/_common/new-section.stories_snapshots_Default.html b/packages/ui/src/components/_common/new-section.stories_snapshots_Default.html
index 3637a9d15..85c8d14e0 100644
--- a/packages/ui/src/components/_common/new-section.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/new-section.stories_snapshots_Default.html
@@ -1,5 +1,5 @@
<div>
- <h5 class="fr-m-0 fr-pt-4w">Caractéristiques ARM</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Caractéristiques ARM</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Mécanisation</div>
<div><span>Oui<!----></span>
diff --git a/packages/ui/src/components/_common/new-section.stories_snapshots_WithoutContent.html b/packages/ui/src/components/_common/new-section.stories_snapshots_WithoutContent.html
index 43b6d4b62..0362437aa 100644
--- a/packages/ui/src/components/_common/new-section.stories_snapshots_WithoutContent.html
+++ b/packages/ui/src/components/_common/new-section.stories_snapshots_WithoutContent.html
@@ -1,5 +1,5 @@
<div>
- <h5 class="fr-m-0 fr-pt-4w">Caractéristiques ARM</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Caractéristiques ARM</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Mécanisation</div>
<div><span>–<!----></span>
diff --git a/packages/ui/src/components/_common/new-section.tsx b/packages/ui/src/components/_common/new-section.tsx
index 80245ce85..3fa831639 100644
--- a/packages/ui/src/components/_common/new-section.tsx
+++ b/packages/ui/src/components/_common/new-section.tsx
@@ -20,7 +20,7 @@ interface Props {
export const NewSection: FunctionalComponent<Props> = (props: Props): JSX.Element => {
return (
<div>
- {isNotNullNorUndefinedNorEmpty(props.section.nom) ? <h5 class="fr-m-0 fr-pt-4w">{props.section.nom}</h5> : null}
+ {isNotNullNorUndefinedNorEmpty(props.section.nom) ? <h3 class="fr-m-0 fr-pt-4w">{props.section.nom}</h3> : null}
{props.section.elements.map(e => (
<SectionElement class="fr-pt-2w" key={e.id} element={e} />
))}
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories.tsx b/packages/ui/src/components/_common/new-sections-edit.stories.tsx
index 1ba5c035a..513d9a005 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories.tsx
+++ b/packages/ui/src/components/_common/new-sections-edit.stories.tsx
@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions'
import { Meta, StoryFn } from '@storybook/vue3'
-import { SectionsEdit } from './new-sections-edit'
+import { NewSectionsEdit } from './new-sections-edit'
import { caminoDateValidator, toCaminoDate } from 'camino-common/src/date'
import { UNITES, Unite, Unites } from 'camino-common/src/static/unites'
import { ActiviteSectionElement, ActivitesTypes, isSubstancesFiscales } from 'camino-common/src/static/activitesTypes'
@@ -11,13 +11,13 @@ import { NonEmptyArray } from 'camino-common/src/typescript-tools'
const meta: Meta = {
title: 'Components/Common/SectionsEdit',
// @ts-ignore @storybook/vue3 n'aime pas les composants tsx
- component: SectionsEdit,
+ component: NewSectionsEdit,
}
export default meta
const completeUpdateAction = action('completeUpdate')
export const Default: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -96,7 +96,7 @@ export const Default: StoryFn = () => (
)
export const TousLesElementsVidesOptionnels: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -197,7 +197,7 @@ export const TousLesElementsVidesOptionnels: StoryFn = () => (
)
export const TousLesElementsRequis: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -298,7 +298,7 @@ export const TousLesElementsRequis: StoryFn = () => (
)
export const TousLesElementsRemplis: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -399,7 +399,7 @@ export const TousLesElementsRemplis: StoryFn = () => (
/>
)
export const VolumeGranulatsExtrait: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -423,7 +423,7 @@ export const VolumeGranulatsExtrait: StoryFn = () => (
)
export const ParticipationDuPublic: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -447,7 +447,7 @@ export const ParticipationDuPublic: StoryFn = () => (
)
export const Date: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -471,7 +471,7 @@ export const Date: StoryFn = () => (
)
export const Checkboxes: StoryFn = () => (
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
@@ -513,7 +513,7 @@ export const ToutesLesActivites: StoryFn = () => (
<td>{activiteType.nom}</td>
<td>
- <SectionsEdit
+ <NewSectionsEdit
completeUpdate={(complete, newContent) => {
completeUpdateAction(complete, newContent)
}}
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 a4839d43b..d1ff078cc 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,7 +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 *<span class="fr-hint-text">Et quelle belle date</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Une date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</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">
<!---->
</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 4f3cab010..f664c737e 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,28 +3,40 @@
<legend class="fr-fieldset__legend" id="renseignements-legend">Renseignements</legend>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g) *<span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g) *<span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l) *<span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l) *<span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
<!---->
</div>
</div>
@@ -32,7 +44,7 @@
<div class="fr-fieldset__element">
<div>
<fieldset class="fr-fieldset" id="pompes" aria-labelledby="pompes-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes *<span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes <span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="pompes-0" name="pompes"><label class="fr-label" for="pompes-0">Oui
<!---->
@@ -48,21 +60,27 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Pelles actives *<span class="fr-hint-text">Nombre moyen de pelles actives au cours du trimestre utilisées sur le chantier (aménagement, exploitation, réhabilitation).</span></label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Pelles actives
+ <!---->
+ <!----><span class="fr-hint-text">Nombre moyen de pelles actives au cours du trimestre utilisées sur le chantier (aménagement, exploitation, réhabilitation).</span>
+ </label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Effectifs *<span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Effectifs
+ <!---->
+ <!----><span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Dépenses relatives à la protection de l’environnement (euros)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Dépenses relatives à la protection de l’environnement (euros) (optionnel)
<!----><span class="fr-hint-text">Montant en euros des investissements consentis au cours du trimestre listés à l’<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000021850940&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">
<!---->
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 c22aa8e0e..98c3f1a96 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,7 +3,10 @@
<!---->
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Nombre de jours de la participation du public *<span class="fr-hint-text"></span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Nombre de jours de la participation du public
+ <!---->
+ <!----><span class="fr-hint-text"></span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
<p id="input_271-info" class="fr-info-text">Du 12-01-2024 au 23-01-2024 (inclus)</p>
</div>
</div>
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 950275030..030d34091 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,40 +3,56 @@
<!---->
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer *<span class="fr-hint-text">Description pour integer</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" value="12">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer
+ <!---->
+ <!----><span class="fr-hint-text">Description pour integer</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" value="12">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number *<span class="fr-hint-text">Description pour number</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0" value="8.2">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number
+ <!---->
+ <!----><span class="fr-hint-text">Description pour number</span>
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0" value="8.2">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date *<span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="date" value="2023-09-01">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span><span class="fr-hint-text">Description pour date</span>
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="date" value="2023-09-01">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea *<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="ceci est un textarea"></textarea></div>
+ <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea
+ <!----><span class="fr-hint-text">Description pour textarea</span>
+ </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="ceci est un textarea"></textarea></div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text *<span class="fr-hint-text">Description pour text</span></label><input class="fr-input" name="input_967" id="input_967" required="" type="text" value="ceci est un text">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text
+ <!---->
+ <!----><span class="fr-hint-text">Description pour text</span>
+ </label><input class="fr-input" name="input_967" id="input_967" required="" type="text" value="ceci est un text">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url *<span class="fr-hint-text">Description pour url</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="text" value="https://google.fr">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url
+ <!---->
+ <!----><span class="fr-hint-text">Description pour url</span>
+ </label><input class="fr-input" name="input_25" id="input_25" required="" type="text" value="https://google.fr">
<!---->
</div>
</div>
@@ -44,7 +60,7 @@
<div class="fr-fieldset__element">
<div>
<fieldset class="fr-fieldset" id="radio" aria-labelledby="radio-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio *<span class="fr-hint-text">Description pour radio</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio <span class="fr-hint-text">Description pour radio</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="radio-0" checked="" name="radio"><label class="fr-label" for="radio-0">Oui
<!---->
@@ -87,7 +103,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-select-group"><label class="fr-label" for="select_453">select *<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453" value="deg">
+ <div class="fr-select-group"><label class="fr-label" for="select_453">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453" value="deg">
<option selected="" value="deg">degré</option>
<option value="gon">grade</option>
<option value="km3">kilomètre cube</option>
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 0f0789bcb..c43bc5e8e 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,40 +3,56 @@
<!---->
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer *<span class="fr-hint-text">Description pour integer</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer
+ <!---->
+ <!----><span class="fr-hint-text">Description pour integer</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number *<span class="fr-hint-text">Description pour number</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number
+ <!---->
+ <!----><span class="fr-hint-text">Description pour number</span>
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date *<span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="date">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span><span class="fr-hint-text">Description pour date</span>
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="date">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea *<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea_878" id="textarea_878" required=""></textarea></div>
+ <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea
+ <!----><span class="fr-hint-text">Description pour textarea</span>
+ </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required=""></textarea></div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text *<span class="fr-hint-text">Description pour text</span></label><input class="fr-input" name="input_967" id="input_967" required="" type="text">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text
+ <!---->
+ <!----><span class="fr-hint-text">Description pour text</span>
+ </label><input class="fr-input" name="input_967" id="input_967" required="" type="text">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url *<span class="fr-hint-text">Description pour url</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="text">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url
+ <!---->
+ <!----><span class="fr-hint-text">Description pour url</span>
+ </label><input class="fr-input" name="input_25" id="input_25" required="" type="text">
<!---->
</div>
</div>
@@ -44,7 +60,7 @@
<div class="fr-fieldset__element">
<div>
<fieldset class="fr-fieldset" id="radio" aria-labelledby="radio-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio *<span class="fr-hint-text">Description pour radio</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio <span class="fr-hint-text">Description pour radio</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="radio-0" name="radio"><label class="fr-label" for="radio-0">Oui
<!---->
@@ -82,7 +98,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-select-group"><label class="fr-label" for="select_453">select *<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
+ <div class="fr-select-group"><label class="fr-label" for="select_453">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
<option value="deg">degré</option>
<option value="gon">grade</option>
<option value="km3">kilomètre cube</option>
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 3c1ed6cb9..e7fe7c408 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,7 +3,7 @@
<!---->
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer (optionnel)
<!----><span class="fr-hint-text">Description pour integer</span>
</label><input class="fr-input" name="input_271" id="input_271" type="number" min="0">
<!---->
@@ -12,7 +12,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number (optionnel)
<!----><span class="fr-hint-text">Description pour number</span>
</label><input class="fr-input" name="input_670" id="input_670" type="number" min="0">
<!---->
@@ -21,23 +21,19 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date
- <!----><span class="fr-hint-text">Description pour date</span>
- </label><input class="fr-input" name="input_74" id="input_74" type="date">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date (optionnel)<span class="fr-hint-text">au format jj/mm/yyyy</span><span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="input_74" id="input_74" type="date">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea
- <!----><span class="fr-hint-text">Description pour textarea</span>
- </label><textarea class="fr-input" name="textarea_878" id="textarea_878"></textarea></div>
+ <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea (optionnel)<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea_878" id="textarea_878"></textarea></div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text (optionnel)
<!----><span class="fr-hint-text">Description pour text</span>
</label><input class="fr-input" name="input_967" id="input_967" type="text">
<!---->
@@ -46,7 +42,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url (optionnel)
<!----><span class="fr-hint-text">Description pour url</span>
</label><input class="fr-input" name="input_25" id="input_25" type="text">
<!---->
@@ -56,7 +52,7 @@
<div class="fr-fieldset__element">
<div>
<fieldset class="fr-fieldset" id="radio" aria-labelledby="radio-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio *<span class="fr-hint-text">Description pour radio</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio <span class="fr-hint-text">Description pour radio</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="radio-0" name="radio"><label class="fr-label" for="radio-0">Oui
<!---->
@@ -94,7 +90,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-select-group"><label class="fr-label" for="select_453">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
+ <div class="fr-select-group"><label class="fr-label" for="select_453">select (optionnel)<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
<option value="deg">degré</option>
<option value="gon">grade</option>
<option value="km3">kilomètre cube</option>
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 571ba5af9..bc47c9b89 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,7 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">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">
<!---->
</div>
</div>
@@ -21,9 +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">
- <!----><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="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>
</div>
</fieldset>
@@ -38,77 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_772">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_453">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_556">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_487">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_796">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">
<!---->
</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) *<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&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">
+ <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)
+ <!---->
+ <!----><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&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">
<!---->
</div>
</div>
@@ -529,9 +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">
- <!----><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="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>
</div>
</fieldset>
@@ -546,7 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_686">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">
<!---->
</div>
</div>
@@ -556,9 +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">
- <!----><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="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>
</div>
</fieldset>
@@ -573,7 +606,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_132">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">
<!---->
@@ -582,7 +615,7 @@
</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²)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_773">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">
<!---->
@@ -591,9 +624,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_785">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -601,7 +632,7 @@
<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²)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_253">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">
<!---->
@@ -610,9 +641,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_19">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -620,7 +649,7 @@
<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²)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_35">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">
<!---->
@@ -629,7 +658,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_883">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">
<!---->
@@ -638,9 +667,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_731">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -648,7 +675,7 @@
<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²)
+ <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)
<!----><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">
<!---->
@@ -657,7 +684,7 @@
</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)
+ <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)
<!----><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">
<!---->
@@ -685,7 +712,7 @@
</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²)
+ <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)
<!----><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">
<!---->
@@ -694,7 +721,7 @@
</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)
+ <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)
<!----><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">
<!---->
@@ -722,7 +749,7 @@
</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²)
+ <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)
<!----><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">
<!---->
@@ -731,7 +758,7 @@
</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)
+ <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)
<!----><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">
<!---->
@@ -759,7 +786,7 @@
</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²)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_648">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">
<!---->
@@ -768,7 +795,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_726">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">
<!---->
@@ -796,7 +823,7 @@
</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²)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_894">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">
<!---->
@@ -805,7 +832,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_822">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">
<!---->
@@ -833,7 +860,7 @@
</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²)
+ <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)
<!----><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">
<!---->
@@ -842,7 +869,7 @@
</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)
+ <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)
<!----><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">
<!---->
@@ -870,9 +897,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_488">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -880,7 +905,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_800">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">
<!---->
@@ -889,7 +914,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_723">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">
<!---->
@@ -898,9 +923,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_152">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -908,7 +931,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_907">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">
<!---->
@@ -917,7 +940,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_547">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">
<!---->
@@ -926,7 +949,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_234">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">
<!---->
@@ -935,7 +958,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_280">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">
<!---->
@@ -944,7 +967,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_537">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">
<!---->
@@ -953,7 +976,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_184">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">
<!---->
@@ -962,7 +985,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_76">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">
<!---->
@@ -971,7 +994,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_202">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">
<!---->
@@ -980,7 +1003,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_785">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">
<!---->
@@ -989,7 +1012,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_873">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">
<!---->
@@ -998,7 +1021,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_113">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">
<!---->
@@ -1007,7 +1030,7 @@
</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)
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_120">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">
<!---->
@@ -1016,9 +1039,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_288">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -1026,7 +1047,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_645">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">
<!---->
@@ -1035,9 +1056,7 @@
</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
- <!----><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="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>
</div>
<div class="fr-fieldset__element">
@@ -1091,9 +1110,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_416">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -1138,9 +1155,7 @@
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_983">Informations complémentaires
- <!----><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="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>
</div>
</fieldset>
@@ -1155,7 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_694">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">
<!---->
</div>
</div>
@@ -1165,7 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">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">
<!---->
</div>
</div>
@@ -1175,7 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_875">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">
<!---->
</div>
</div>
@@ -1185,7 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_339">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">
<!---->
</div>
</div>
@@ -1195,7 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_179">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">
<!---->
</div>
</div>
@@ -1205,7 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_480">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">
<!---->
</div>
</div>
@@ -1215,21 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_617">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_877">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_77">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">
<!---->
</div>
</div>
@@ -1239,14 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_181">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_932">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">
<!---->
</div>
</div>
@@ -1256,42 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_344">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_258">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_268">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_886">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_776">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_647">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">
<!---->
</div>
</div>
@@ -1301,7 +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) *<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&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">
+ <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)
+ <!---->
+ <!----><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&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">
<!---->
</div>
</div>
@@ -1311,7 +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) *<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">
+ <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)
+ <!---->
+ <!----><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">
<!---->
</div>
</div>
@@ -1321,16 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_185">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">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group"><label class="fr-label" for="textarea_426">
- <!----><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="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>
</div>
</fieldset>
@@ -1345,42 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_573">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_486">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_44">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_181">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">
<!---->
</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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_804">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">
<!---->
</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²) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_353">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">
<!---->
</div>
</div>
@@ -1390,9 +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">
- <!----><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="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>
</div>
</fieldset>
@@ -1407,42 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_21">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_478">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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_152">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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</div>
</div>
@@ -1452,42 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_965">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_130">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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</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 *<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">
+ <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
+ <!---->
+ <!----><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">
<!---->
</div>
</div>
@@ -1497,21 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_266">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_940">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">
<!---->
</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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_966">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">
<!---->
</div>
</div>
@@ -1521,9 +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">
- <!----><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="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>
</div>
</fieldset>
@@ -1538,7 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_658">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">
<!---->
</div>
</div>
@@ -1548,9 +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">
- <!----><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="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>
</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 065fc332b..8e57d4bc6 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,7 +3,10 @@
<!---->
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Volume de granulats marins extrait (m3) *<span class="fr-hint-text">Volume de granulats marins extrait, en mètre cube, au cours de l'année.</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Volume de granulats marins extrait (m3)
+ <!---->
+ <!----><span class="fr-hint-text">Volume de granulats marins extrait, en mètre cube, au cours de l'année.</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
<p id="input_271-info" class="fr-info-text">Soit l’équivalent de 18 tonnes</p>
</div>
</div>
diff --git a/packages/ui/src/components/_common/new-sections-edit.tsx b/packages/ui/src/components/_common/new-sections-edit.tsx
index 5a4914a41..a1a22d534 100644
--- a/packages/ui/src/components/_common/new-sections-edit.tsx
+++ b/packages/ui/src/components/_common/new-sections-edit.tsx
@@ -19,7 +19,7 @@ interface Props {
etapeDate: CaminoDate | null
}
-export const SectionsEdit = defineComponent<Props>(props => {
+export const NewSectionsEdit = defineComponent<Props>(props => {
const [sectionsWithValue, setSectionsWithValue] = useState<SectionWithValue[]>([])
watch(
@@ -75,7 +75,7 @@ export const SectionsEdit = defineComponent<Props>(props => {
)
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-SectionsEdit.props = ['sectionsWithValue', 'completeUpdate', 'etapeDate']
+NewSectionsEdit.props = ['sectionsWithValue', 'completeUpdate', 'etapeDate']
interface SectionElementEditProps {
element: ElementWithValue
diff --git a/packages/ui/src/components/_common/nom.stories_snapshots_AlreadyUppercase.html b/packages/ui/src/components/_common/nom.stories_snapshots_AlreadyUppercase.html
index fda784a35..eb62ffd4b 100644
--- a/packages/ui/src/components/_common/nom.stories_snapshots_AlreadyUppercase.html
+++ b/packages/ui/src/components/_common/nom.stories_snapshots_AlreadyUppercase.html
@@ -1 +1 @@
-<p class="h6 bold mb-0">Nom minuscule</p>
\ No newline at end of file
+<p class="mb-0">Nom minuscule</p>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/nom.stories_snapshots_Default.html b/packages/ui/src/components/_common/nom.stories_snapshots_Default.html
index ede394630..e5fa79a66 100644
--- a/packages/ui/src/components/_common/nom.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/nom.stories_snapshots_Default.html
@@ -1 +1 @@
-<p class="h6 bold mb-0">Indéfini</p>
\ No newline at end of file
+<p class="mb-0">Indéfini</p>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/nom.stories_snapshots_Lowercase.html b/packages/ui/src/components/_common/nom.stories_snapshots_Lowercase.html
index fda784a35..eb62ffd4b 100644
--- a/packages/ui/src/components/_common/nom.stories_snapshots_Lowercase.html
+++ b/packages/ui/src/components/_common/nom.stories_snapshots_Lowercase.html
@@ -1 +1 @@
-<p class="h6 bold mb-0">Nom minuscule</p>
\ No newline at end of file
+<p class="mb-0">Nom minuscule</p>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/nom.tsx b/packages/ui/src/components/_common/nom.tsx
index 48d8a1c5f..6e7200db7 100644
--- a/packages/ui/src/components/_common/nom.tsx
+++ b/packages/ui/src/components/_common/nom.tsx
@@ -7,5 +7,5 @@ interface Props {
export const Nom: FunctionalComponent<Props> = props => {
const nom = capitalize(props.nom ?? 'indéfini')
- return <p class="h6 bold mb-0">{nom}</p>
+ return <p class="mb-0">{nom}</p>
}
diff --git a/packages/ui/src/components/_common/page-with-filters.tsx b/packages/ui/src/components/_common/page-with-filters.tsx
index 554579c33..789296fa4 100644
--- a/packages/ui/src/components/_common/page-with-filters.tsx
+++ b/packages/ui/src/components/_common/page-with-filters.tsx
@@ -1,3 +1,4 @@
+import { fr } from '@codegouvfr/react-dsfr'
import { FunctionalComponent } from 'vue'
import type { JSX } from 'vue/jsx-runtime'
type Props = {
@@ -7,11 +8,14 @@ type Props = {
export const PageWithFilters: FunctionalComponent<Props> = props => {
return (
- <div class="fr-container--fluid" style={{ overflow: 'visible' }}>
- <div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">{props.filtres}</div>
-
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">{props.content}</div>
+ <div class={fr.cx('fr-container--fluid')} style={{ overflow: 'visible' }}>
+ <div class={fr.cx('fr-grid-row')}>
+ <div class={fr.cx('fr-col-12', 'fr-col-md-9', 'fr-pt-3w', 'fr-pr-2w', 'fr-pb-3w')} aria-live="polite">
+ {props.content}
+ </div>
+ <div class={fr.cx('fr-col-12', 'fr-col-md-3')} style={{ order: -1 }}>
+ {props.filtres}
+ </div>
</div>
</div>
)
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 f526ceb6a..a9d1ad404 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" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <div class="_typeahead-list_8eddf1">
- <div class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1"><span>bauxite</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>or</span></div>
- </div>
+ <div class="flex"><input id="typeahead_substances_271" type="text" title="" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_271-control" aria-activedescendant="typeahead_substances_271-control-0" aria-expanded="true" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="typeahead_substances_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="typeahead_substances_271-control-0"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_271-control-1"><span>or</span></li>
+ </ul>
</div>
\ No newline at end of file
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 44255ccc9..f6dd81c07 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,4 +1,6 @@
<div id="typeahead_substances_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_271" type="text" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" value="or"></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_271" type="text" title="" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_271-control" aria-activedescendant="typeahead_substances_271-control" aria-expanded="false" aria-autocomplete="list" value="or"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_271-control-0"><span>bauxite</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/titre-reference-select.stories_snapshots_WithValues.html b/packages/ui/src/components/_common/titre-reference-select.stories_snapshots_WithValues.html
index d912169a9..955d24288 100644
--- a/packages/ui/src/components/_common/titre-reference-select.stories_snapshots_WithValues.html
+++ b/packages/ui/src/components/_common/titre-reference-select.stories_snapshots_WithValues.html
@@ -16,7 +16,7 @@
</select>
</div>
<div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
- <!----><input class="fr-input" name="input_670" id="input_670" type="text" value="REF1">
+ <!----><input class="fr-input" name="input_670" id="input_670" required="" type="text" value="REF1">
<!---->
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 1" aria-label="Supprimer la référence 1" type="button">
<!---->
@@ -39,7 +39,7 @@
</select>
</div>
<div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
- <!----><input class="fr-input" name="input_878" id="input_878" type="text" value="REF2">
+ <!----><input class="fr-input" name="input_878" id="input_878" required="" type="text" value="REF2">
<!---->
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 2" aria-label="Supprimer la référence 2" type="button">
<!---->
diff --git a/packages/ui/src/components/_common/titre-reference-select.tsx b/packages/ui/src/components/_common/titre-reference-select.tsx
index aa78cb214..6107c3c47 100644
--- a/packages/ui/src/components/_common/titre-reference-select.tsx
+++ b/packages/ui/src/components/_common/titre-reference-select.tsx
@@ -44,8 +44,22 @@ export const TitreReferenceSelect = defineComponent<Props>(props => {
</label>
{references.value.map((reference, index) => (
<div key={index} class="fr-grid-row fr-grid-row--middle fr-mb-3v">
- <DsfrSelect class="fr-col fr-mb-0" legend={{ main: '', visible: false }} initialValue={reference.referenceTypeId} items={referencesTypes} valueChanged={onReferenceChanged(index)} />
- <DsfrInput class="fr-col fr-ml-2v fr-mb-0" type={{ type: 'text' }} legend={{ main: '', visible: false }} initialValue={reference.nom} valueChanged={onReferenceValueChanged(index)} />
+ <DsfrSelect
+ class="fr-col fr-mb-0"
+ required={true}
+ legend={{ main: '', visible: false }}
+ initialValue={reference.referenceTypeId}
+ items={referencesTypes}
+ valueChanged={onReferenceChanged(index)}
+ />
+ <DsfrInput
+ required={true}
+ class="fr-col fr-ml-2v fr-mb-0"
+ type={{ type: 'text' }}
+ legend={{ main: '', visible: false }}
+ initialValue={reference.nom}
+ valueChanged={onReferenceValueChanged(index)}
+ />
<DsfrButtonIcon class="fr-ml-2v" icon="fr-icon-delete-bin-line" onClick={referenceRemove(index)} title={`Supprimer la référence ${index + 1}`} buttonType="tertiary" />
</div>
))}
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 df304e84a..ee802b4a3 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,10 +1,10 @@
-<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine *
+<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
<option selected="" value="m">minéraux et métaux</option>
<option disabled="" hidden="" value="">Selectionnez une option</option>
</select></div>
-<div class="fr-select-group"><label class="fr-label" for="select_670">Type *
+<div class="fr-select-group"><label class="fr-label" for="select_670">Type
<!---->
</label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ar">
<option selected="" value="ar">autorisation de recherches</option>
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 355e34353..57d271a7a 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,4 +1,4 @@
-<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine *
+<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
<option value="c">carrières</option>
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 bc584d0c6..f58a9ffae 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,10 +1,10 @@
-<div class="fr-select-group"><label class="fr-label" for="select_670">Domaine *
+<div class="fr-select-group"><label class="fr-label" for="select_670">Domaine
<!---->
</label><select class="fr-select" id="select_670" aria-label="Domaine" name="select_670" value="m">
<option value="m" selected="">minéraux et métaux</option>
<option disabled="" hidden="" value="">Selectionnez une option</option>
</select></div>
-<div class="fr-select-group"><label class="fr-label" for="select_74">Type *
+<div class="fr-select-group"><label class="fr-label" for="select_74">Type
<!---->
</label><select class="fr-select" id="select_74" aria-label="Type" name="select_74">
<option value="ar">autorisation de recherches</option>
diff --git a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorSimple.html b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorSimple.html
index 50a9fa951..af2e2d93e 100644
--- a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorSimple.html
+++ b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorSimple.html
@@ -1,3 +1,3 @@
-<div class="fr-alert fr-alert--error fr-alert--sm">
+<div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
<p>Ceci est une alerte de l'api</p>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithCompleteMessage.html b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithCompleteMessage.html
index 49daa0342..b5d7c51b3 100644
--- a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithCompleteMessage.html
+++ b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithCompleteMessage.html
@@ -1,3 +1,3 @@
-<div class="fr-alert fr-alert--error">
+<div class="fr-alert fr-alert--error" role="alert">
<h3 class="fr-alert__title">Ceci est une alerte de l'api</h3>Validation error: Array must contain at least 3 element(s) at "features[0].geometry.coordinates[0][0]"
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetail.html b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetail.html
index bc9d315ad..f00dbb3f6 100644
--- a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetail.html
+++ b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetail.html
@@ -1,3 +1,3 @@
-<div class="fr-alert fr-alert--error">
+<div class="fr-alert fr-alert--error" role="alert">
<h3 class="fr-alert__title">Ceci est une alerte de l'api</h3>Ceci est le détail human readable de l'erreur
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetailAndCompleteMessage.html b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetailAndCompleteMessage.html
index 3ccf5afea..c7b2e2e1f 100644
--- a/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetailAndCompleteMessage.html
+++ b/packages/ui/src/components/_ui/alert.stories_snapshots_ApiErrorWithDetailAndCompleteMessage.html
@@ -1,4 +1,4 @@
-<div class="fr-alert fr-alert--error">
+<div class="fr-alert fr-alert--error" role="alert">
<h3 class="fr-alert__title">Ceci est une alerte de l'api</h3>
<div style="display: flex; flex-direction: column;">
<div>Ceci est le détail human readable de l'erreur</div>
diff --git a/packages/ui/src/components/_ui/alert.tsx b/packages/ui/src/components/_ui/alert.tsx
index 861d54329..98af12915 100644
--- a/packages/ui/src/components/_ui/alert.tsx
+++ b/packages/ui/src/components/_ui/alert.tsx
@@ -1,3 +1,4 @@
+import { fr } from '@codegouvfr/react-dsfr'
import { capitalize } from 'camino-common/src/strings'
import type { CaminoError } from 'camino-common/src/zod-tools'
import type { FunctionalComponent, HTMLAttributes } from 'vue'
@@ -12,19 +13,20 @@ type ClassicProps = {
type Props = {
type: 'warning' | 'success' | 'error' | 'info'
title: string | JSX.Element
+ role?: 'alert'
} & (SmallProps | ClassicProps) & { class?: HTMLAttributes['class']; style?: HTMLAttributes['style'] }
export const Alert: FunctionalComponent<Props> = props => {
if ('small' in props) {
return (
- <div class={['fr-alert', `fr-alert--${props.type}`, 'fr-alert--sm']}>
+ <div class={[fr.cx('fr-alert'), fr.cx(`fr-alert--${props.type}`), fr.cx('fr-alert--sm')]} role={props.role}>
<p>{typeof props.title === 'string' ? capitalize(props.title) : props.title}</p>
</div>
)
} else {
return (
- <div class={['fr-alert', `fr-alert--${props.type}`]}>
- <h3 class="fr-alert__title">{props.title}</h3>
+ <div class={[fr.cx('fr-alert'), fr.cx(`fr-alert--${props.type}`)]} role={props.role}>
+ <h3 class={[fr.cx('fr-alert__title')]}>{typeof props.title === 'string' ? capitalize(props.title) : props.title}</h3>
{props.description !== undefined ? props.description : null}
</div>
)
@@ -34,12 +36,13 @@ export const Alert: FunctionalComponent<Props> = props => {
export const CaminoApiAlert: FunctionalComponent<{ caminoApiError: CaminoError<string>; class?: HTMLAttributes['class'] }> = props => {
const small = !('zodErrorReadableMessage' in props.caminoApiError || 'detail' in props.caminoApiError)
if (small) {
- return <Alert small={small} type="error" title={props.caminoApiError.message} />
+ return <Alert small={small} type="error" role="alert" title={props.caminoApiError.message} />
} else if ('zodErrorReadableMessage' in props.caminoApiError && 'detail' in props.caminoApiError) {
return (
<Alert
type="error"
title={capitalize(props.caminoApiError.message)}
+ role="alert"
description={
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div>{props.caminoApiError.detail}</div>
@@ -52,14 +55,14 @@ export const CaminoApiAlert: FunctionalComponent<{ caminoApiError: CaminoError<s
/>
)
} else if ('zodErrorReadableMessage' in props.caminoApiError) {
- return <Alert type="error" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.zodErrorReadableMessage} />
+ return <Alert type="error" role="alert" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.zodErrorReadableMessage} />
} else {
- return <Alert type="error" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.detail} />
+ return <Alert type="error" role="alert" title={capitalize(props.caminoApiError.message)} description={props.caminoApiError.detail} />
}
}
export const PageIntrouvableAlert: FunctionalComponent = () => {
- return <Alert type="error" title="Page Introuvable" small={true} />
+ return <Alert type="error" role="alert" title="Page Introuvable" small={true} />
}
// Demandé par le router car utilisé dans un import asynchrone /shrug
PageIntrouvableAlert.displayName = 'Page introuvable'
diff --git a/packages/ui/src/components/_ui/dsfr-callout.stories.tsx b/packages/ui/src/components/_ui/dsfr-callout.stories.tsx
new file mode 100644
index 000000000..2f508998b
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-callout.stories.tsx
@@ -0,0 +1,10 @@
+import { Meta, StoryFn } from '@storybook/vue3'
+import { DsfrCallout } from './dsfr-callout'
+
+const meta: Meta = {
+ title: 'Components/UI/Dsfr/Callout',
+ component: DsfrCallout,
+}
+export default meta
+
+export const Default: StoryFn = () => <DsfrCallout title="Mon title" content={<>Ceci est le contenu</>} footer={<>Ceci est le footer</>} />
diff --git a/packages/ui/src/components/_ui/dsfr-callout.stories_snapshots_Default.html b/packages/ui/src/components/_ui/dsfr-callout.stories_snapshots_Default.html
new file mode 100644
index 000000000..7289b7ea9
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-callout.stories_snapshots_Default.html
@@ -0,0 +1,4 @@
+<div class="fr-callout fr-icon-information-line">
+ <h3 class="fr-callout__title">Mon title</h3>
+ <p class="fr-callout__text">Ceci est le contenu</p>Ceci est le footer
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-callout.tsx b/packages/ui/src/components/_ui/dsfr-callout.tsx
new file mode 100644
index 000000000..926cb81eb
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-callout.tsx
@@ -0,0 +1,18 @@
+import { FunctionalComponent } from 'vue'
+import { JSX } from 'vue/jsx-runtime'
+
+type Props = {
+ content: JSX.Element
+ title: string
+ footer: JSX.Element
+}
+
+export const DsfrCallout: FunctionalComponent<Props> = props => {
+ return (
+ <div class="fr-callout fr-icon-information-line">
+ <h3 class="fr-callout__title">{props.title}</h3>
+ <p class="fr-callout__text">{props.content}</p>
+ {props.footer}
+ </div>
+ )
+}
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkbox.tsx b/packages/ui/src/components/_ui/dsfr-input-checkbox.tsx
index bab2220c9..65e1012fe 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkbox.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-checkbox.tsx
@@ -1,10 +1,11 @@
import { isEventWithTarget, random } from '@/utils/vue-tsx-utils'
import { isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
import { defineComponent } from 'vue'
+import { JSX } from 'vue/jsx-runtime'
export type Props = {
id?: string
- legend: { main: string; description?: string }
+ legend: { main: string | JSX.Element; description?: string }
size?: 'sm' | 'md'
disabled?: boolean
valueChanged: (value: boolean) => void
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx b/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx
index a537d7e00..039b96e6b 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx
@@ -65,4 +65,4 @@ export const DsfrInputCheckboxes = defineComponent(<T extends string>(props: Pro
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-DsfrInputCheckboxes.props = ['id', 'valueChanged', 'legend', 'disabled', 'elements', 'size', 'initialCheckedValue']
+DsfrInputCheckboxes.props = ['id', 'valueChanged', 'legend', 'disabled', 'elements', 'size', 'initialCheckedValue', 'required']
diff --git a/packages/ui/src/components/_ui/dsfr-input-file.stories.tsx b/packages/ui/src/components/_ui/dsfr-input-file.stories.tsx
index 66459505b..67dd491a2 100644
--- a/packages/ui/src/components/_ui/dsfr-input-file.stories.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-file.stories.tsx
@@ -10,5 +10,6 @@ const meta: Meta = {
export default meta
const uploadFile = action('uploadFile')
-export const PdfOnly: StoryFn = () => <InputFile accept={['pdf']} uploadFile={uploadFile} />
-export const ManyFormats: StoryFn = () => <InputFile accept={['pdf', 'csv']} uploadFile={uploadFile} />
+export const PdfOnly: StoryFn = () => <InputFile required={false} accept={['pdf']} uploadFile={uploadFile} />
+export const ManyFormats: StoryFn = () => <InputFile required={false} accept={['pdf', 'csv']} uploadFile={uploadFile} />
+export const Required: StoryFn = () => <InputFile required={true} accept={['pdf', 'csv']} uploadFile={uploadFile} />
diff --git a/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_ManyFormats.html b/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_ManyFormats.html
index f85cbfcaa..dd7c4fdf1 100644
--- a/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_ManyFormats.html
+++ b/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_ManyFormats.html
@@ -1 +1 @@
-<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<span class="fr-hint-text">Taille maximale : 100 Mo. Formats supportés : pdf, csv.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf,.csv"></div>
\ No newline at end of file
+<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. Formats supportés : pdf, csv.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf,.csv"></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_PdfOnly.html b/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_PdfOnly.html
index f0fdb7552..48f2b6192 100644
--- a/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_PdfOnly.html
+++ b/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_PdfOnly.html
@@ -1 +1 @@
-<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_Required.html b/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_Required.html
new file mode 100644
index 000000000..e0093d88a
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-input-file.stories_snapshots_Required.html
@@ -0,0 +1,3 @@
+<div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><span class="fr-hint-text">Taille maximale : 100 Mo. Formats supportés : pdf, csv.</span>
+ </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf,.csv"></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input-file.tsx b/packages/ui/src/components/_ui/dsfr-input-file.tsx
index d65eb8aaf..8ae852788 100644
--- a/packages/ui/src/components/_ui/dsfr-input-file.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-file.tsx
@@ -5,6 +5,7 @@ import { defineComponent, ref } from 'vue'
interface Props {
accept: FileUploadType[]
uploadFile: (file: File) => void
+ required: boolean
}
const isDragEvent = (e: Event): e is DragEvent => {
@@ -49,7 +50,7 @@ export const InputFile = defineComponent<Props>(props => {
return () => (
<div class="fr-upload-group" style={{ opacity: dragHover.value ? '20%' : '100%' }} onDragover={onDragHover} onDragleave={onDragLeave} onDrop={dropFile}>
<label class="fr-label" for="file-upload">
- Ajouter un fichier
+ Ajouter un fichier {!props.required ? ' (optionnel)' : null}
<span class="fr-hint-text">
Taille maximale : 100 Mo. Format{props.accept.length > 1 ? 's' : null} supporté{props.accept.length > 1 ? 's' : null} : {props.accept.join(', ')}.
</span>
@@ -61,4 +62,4 @@ export const InputFile = defineComponent<Props>(props => {
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-InputFile.props = ['accept', 'uploadFile']
+InputFile.props = ['accept', 'uploadFile', 'required']
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Default.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Default.html
index 48065eba0..0d2718430 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Default.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input1" aria-labelledby="input1-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input1-legend">Légende
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input1-legend">Légende (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Disabled.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Disabled.html
index 9dea9d815..61ce95fb9 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Disabled.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Disabled.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input5" aria-labelledby="input5-legend" style="flex-direction: column; align-items: flex-start;" disabled="">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Horizontal.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Horizontal.html
index c7227afb1..38047e24b 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Horizontal.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Horizontal.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input6" aria-labelledby="input6-legend" style="flex-direction: row; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende
<!---->
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_OneElementDisabled.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_OneElementDisabled.html
index 6bf4bbfe0..46c10fc94 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_OneElementDisabled.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_OneElementDisabled.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input5" aria-labelledby="input5-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende élément 2 désactivé
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input5-legend">Légende élément 2 désactivé (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Required.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Required.html
index 4a17295a8..0f34990bc 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Required.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_Required.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input6" aria-labelledby="input6-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input6-legend">Légende
<!---->
</legend>
<div class="fr-fieldset__element">
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithDescription.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithDescription.html
index a52923308..0063216f2 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithDescription.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithDescription.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input2" aria-labelledby="input2-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input2-legend">Légende <span class="fr-hint-text">description</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input2-legend">Légende (optionnel)<span class="fr-hint-text">description</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="input2-0" name="input2"><label class="fr-label" for="input2-0">checkbox1<span class="fr-hint-text">avec description</span></label></div>
</div>
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithValue.html b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithValue.html
index 69cc584d9..0def679d8 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithValue.html
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.stories_snapshots_WithValue.html
@@ -1,5 +1,5 @@
<fieldset class="fr-fieldset" id="input4" aria-labelledby="input4-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input4-legend">Légende
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="input4-legend">Légende (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.tsx b/packages/ui/src/components/_ui/dsfr-input-radio.tsx
index 902cf798a..8ef76ff54 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.tsx
@@ -33,7 +33,7 @@ export const DsfrInputRadio = defineComponent(<T extends string>(props: Props<T>
>
{isNotNullNorUndefinedNorEmpty(props.legend.main) ? (
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id={`${id}-legend`}>
- {props.legend.main} {isNotNullNorUndefined(props.required) && props.required ? ' *' : ''}
+ {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>
) : null}
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories.tsx b/packages/ui/src/components/_ui/dsfr-input.stories.tsx
index a13ab8bf6..e8e040dc5 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input.stories.tsx
@@ -11,23 +11,33 @@ const meta: Meta = {
export default meta
const valueChangedAction = action('valueChanged')
-export const Default: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input1" legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
-export const WithDescription: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', description: 'description' }} valueChanged={valueChangedAction} />
+export const Default: StoryFn = () => <DsfrInput required={true} type={{ type: 'text' }} id="input1" legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
+export const WithDescription: StoryFn = () => (
+ <DsfrInput required={true} type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', description: 'description' }} valueChanged={valueChangedAction} />
+)
export const WithDescriptionAndPlaceholder: StoryFn = () => (
- <DsfrInput type={{ type: 'text' }} id="input3" legend={{ main: 'Légende', description: 'une URL', placeholder: 'https://' }} valueChanged={valueChangedAction} />
+ <DsfrInput required={true} type={{ type: 'text' }} id="input3" legend={{ main: 'Légende', description: 'une URL', placeholder: 'https://' }} valueChanged={valueChangedAction} />
+)
+export const WithValue: StoryFn = () => (
+ <DsfrInput required={true} type={{ type: 'text' }} id="input4" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+)
+export const Disabled: StoryFn = () => (
+ <DsfrInput required={true} type={{ type: 'text' }} id="input5" disabled={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
)
-export const WithValue: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input4" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Disabled: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input5" disabled={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Required: StoryFn = () => <DsfrInput type={{ type: 'text' }} id="input6" required={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Number: StoryFn = () => <DsfrInput id="input1" type={{ type: 'number', min: 1, max: 10 }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
+export const Required: StoryFn = () => <DsfrInput required={true} type={{ type: 'text' }} id="input6" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+export const Number: StoryFn = () => <DsfrInput id="input1" required={true} type={{ type: 'number', min: 1, max: 10 }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
export const Date: StoryFn = () => (
- <DsfrInput id="input1" type={{ type: 'date' }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} initialValue={caminoDateValidator.parse('2023-02-26')} />
+ <DsfrInput id="input1" required={true} type={{ type: 'date' }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} initialValue={caminoDateValidator.parse('2023-02-26')} />
)
export const WithInfo: StoryFn = () => (
- <DsfrInput type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'info', value: 'Ceci est une information' } }} valueChanged={valueChangedAction} />
+ <DsfrInput required={true} type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'info', value: 'Ceci est une information' } }} valueChanged={valueChangedAction} />
)
export const WithError: StoryFn = () => (
- <DsfrInput type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'error', value: 'Le champ est en erreur' } }} valueChanged={valueChangedAction} />
+ <DsfrInput required={true} type={{ type: 'text' }} id="input2" legend={{ main: 'Légende', info: { type: 'error', value: 'Le champ est en erreur' } }} valueChanged={valueChangedAction} />
+)
+
+export const Optional: StoryFn = () => (
+ <DsfrInput id="input1" required={false} type={{ type: 'date' }} legend={{ main: 'Légende' }} valueChanged={valueChangedAction} initialValue={caminoDateValidator.parse('2023-02-26')} />
)
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Date.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Date.html
index 4f5418670..751993eaa 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Date.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Date.html
@@ -1,6 +1,6 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input1" id="input1" type="date" value="2023-02-26">
+ </label><input class="fr-input" name="input1" id="input1" required="" type="date" value="2023-02-26">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Default.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Default.html
index 15fc25984..dfd582b0f 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Default.html
@@ -1,6 +1,7 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende
<!---->
<!---->
- </label><input class="fr-input" name="input1" id="input1" type="text">
+ <!---->
+ </label><input class="fr-input" name="input1" id="input1" required="" type="text">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Disabled.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Disabled.html
index d1180d835..eb91e328b 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Disabled.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Disabled.html
@@ -1,6 +1,7 @@
<div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input5">Légende
<!---->
<!---->
- </label><input class="fr-input" name="input5" id="input5" disabled="" type="text" value="valeur initiale">
+ <!---->
+ </label><input class="fr-input" name="input5" id="input5" disabled="" required="" type="text" value="valeur initiale">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Number.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Number.html
index 8201e012b..e834b9ae6 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Number.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Number.html
@@ -1,6 +1,7 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende
<!---->
<!---->
- </label><input class="fr-input" name="input1" id="input1" type="number" min="1" max="10">
+ <!---->
+ </label><input class="fr-input" name="input1" id="input1" required="" type="number" min="1" max="10">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Optional.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Optional.html
new file mode 100644
index 000000000..30df70776
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Optional.html
@@ -0,0 +1,5 @@
+<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input1">Légende (optionnel)<span class="fr-hint-text">au format jj/mm/yyyy</span>
+ <!---->
+ </label><input class="fr-input" name="input1" id="input1" type="date" value="2023-02-26">
+ <!---->
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Required.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Required.html
index dc2bf004a..ec4fd46ad 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Required.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_Required.html
@@ -1,4 +1,6 @@
-<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input6">Légende *
+<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input6">Légende
+ <!---->
+ <!---->
<!---->
</label><input class="fr-input" name="input6" id="input6" required="" type="text" value="valeur initiale">
<!---->
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescription.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescription.html
index 3ff5558eb..b73fb5ee8 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescription.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescription.html
@@ -1,5 +1,6 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input2">Légende
+ <!---->
<!----><span class="fr-hint-text">description</span>
- </label><input class="fr-input" name="input2" id="input2" type="text">
+ </label><input class="fr-input" name="input2" id="input2" required="" type="text">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescriptionAndPlaceholder.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescriptionAndPlaceholder.html
index ec428c991..155292b77 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescriptionAndPlaceholder.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithDescriptionAndPlaceholder.html
@@ -1,5 +1,6 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input3">Légende
+ <!---->
<!----><span class="fr-hint-text">une URL</span>
- </label><input placeholder="https://" class="fr-input" name="input3" id="input3" type="text">
+ </label><input placeholder="https://" class="fr-input" name="input3" id="input3" required="" type="text">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithError.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithError.html
index 1650d693d..050d58b91 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithError.html
@@ -1,6 +1,7 @@
<div class="fr-input-group fr-input-group--error" style="margin-bottom: 0px;"><label class="fr-label" for="input2">Légende
<!---->
<!---->
- </label><input class="fr-input fr-input--error" name="input2" id="input2" type="text" aria-describedby="input2-info">
+ <!---->
+ </label><input class="fr-input fr-input--error" name="input2" id="input2" required="" type="text" aria-describedby="input2-info">
<p id="input2-info" class="fr-error-text">Le champ est en erreur</p>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithInfo.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithInfo.html
index c7070be56..bb3f3b963 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithInfo.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithInfo.html
@@ -1,6 +1,7 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input2">Légende
<!---->
<!---->
- </label><input class="fr-input" name="input2" id="input2" type="text" aria-describedby="input2-info">
+ <!---->
+ </label><input class="fr-input" name="input2" id="input2" required="" type="text" aria-describedby="input2-info">
<p id="input2-info" class="fr-info-text">Ceci est une information</p>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithValue.html b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithValue.html
index 1ea2c91fb..0c30f977a 100644
--- a/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithValue.html
+++ b/packages/ui/src/components/_ui/dsfr-input.stories_snapshots_WithValue.html
@@ -1,6 +1,7 @@
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input4">Légende
<!---->
<!---->
- </label><input class="fr-input" name="input4" id="input4" type="text" value="valeur initiale">
+ <!---->
+ </label><input class="fr-input" name="input4" id="input4" required="" type="text" value="valeur initiale">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-input.tsx b/packages/ui/src/components/_ui/dsfr-input.tsx
index ead3d3bf6..8428eaaf4 100644
--- a/packages/ui/src/components/_ui/dsfr-input.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input.tsx
@@ -21,7 +21,7 @@ type BaseProps = {
id?: string
legend: { main: string; visible?: boolean; description?: string; placeholder?: string; info?: { type: 'info' | 'error'; value: string } }
disabled?: boolean
- required?: boolean
+ required: boolean
}
type Props = BaseProps & (TextProps | NumberProps | DateProps)
@@ -83,7 +83,9 @@ export const DsfrInput = defineComponent<Props>(props => {
>
{(props.legend.visible ?? true) ? (
<label class="fr-label" for={id}>
- {props.legend.main} {isNotNullNorUndefined(props.required) && props.required ? ' *' : null}
+ {props.legend.main}
+ {!props.required ? ' (optionnel)' : null}
+ {props.type.type === 'date' ? <span class="fr-hint-text">au format jj/mm/yyyy</span> : null}
{isNotNullNorUndefined(props.legend.description) ? <span class="fr-hint-text" v-html={props.legend.description}></span> : null}
</label>
) : null}
@@ -95,7 +97,7 @@ export const DsfrInput = defineComponent<Props>(props => {
name={id}
id={id}
disabled={props.disabled ?? false}
- required={props.required ?? false}
+ required={props.required}
{...(props.type ?? { type: 'text' })}
aria-describedby={isNotNullNorUndefined(props.legend.info) && props.legend.info.value !== '' ? `${id}-info` : undefined}
/>
diff --git a/packages/ui/src/components/_ui/dsfr-select.stories.tsx b/packages/ui/src/components/_ui/dsfr-select.stories.tsx
index 83474a025..9c4f33af5 100644
--- a/packages/ui/src/components/_ui/dsfr-select.stories.tsx
+++ b/packages/ui/src/components/_ui/dsfr-select.stories.tsx
@@ -15,13 +15,22 @@ const items = [
{ id: 'id2', label: 'second label' },
] as const
-export const Default: StoryFn = () => <DsfrSelect id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={null} valueChanged={onvalueChangedAction} />
+export const Default: StoryFn = () => <DsfrSelect required={true} id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={null} valueChanged={onvalueChangedAction} />
export const WithDescriptionAndPlaceholder: StoryFn = () => (
- <DsfrSelect id="select" legend={{ main: 'label de cadix', description: 'Description', placeholder: 'Placeholder custom' }} items={items} initialValue={null} valueChanged={onvalueChangedAction} />
+ <DsfrSelect
+ required={true}
+ id="select"
+ legend={{ main: 'label de cadix', description: 'Description', placeholder: 'Placeholder custom' }}
+ items={items}
+ initialValue={null}
+ valueChanged={onvalueChangedAction}
+ />
)
-export const AlreadySelectedItem: StoryFn = () => <DsfrSelect id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
+export const AlreadySelectedItem: StoryFn = () => <DsfrSelect required={true} id="select" legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
-export const Disabled: StoryFn = () => <DsfrSelect id="select" disabled={true} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
+export const Disabled: StoryFn = () => (
+ <DsfrSelect required={true} id="select" disabled={true} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
+)
export const Required: StoryFn = () => <DsfrSelect id="select" required={true} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
export const ElementDisabled: StoryFn = () => (
@@ -38,3 +47,5 @@ export const ElementDisabled: StoryFn = () => (
valueChanged={onvalueChangedAction}
/>
)
+
+export const Optional: StoryFn = () => <DsfrSelect id="select" required={false} legend={{ main: 'label de cadix' }} items={items} initialValue={'id1'} valueChanged={onvalueChangedAction} />
diff --git a/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_ElementDisabled.html b/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_ElementDisabled.html
index 734d932e6..e7a086135 100644
--- a/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_ElementDisabled.html
+++ b/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_ElementDisabled.html
@@ -1,4 +1,4 @@
-<div class="fr-select-group"><label class="fr-label" for="select">label de cadix *
+<div class="fr-select-group"><label class="fr-label" for="select">label de cadix
<!---->
</label><select class="fr-select" id="select" aria-label="label de cadix" name="select" value="id1">
<option selected="" value="id1">premier label</option>
diff --git a/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Optional.html b/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Optional.html
new file mode 100644
index 000000000..ba9d7ab0a
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Optional.html
@@ -0,0 +1,7 @@
+<div class="fr-select-group"><label class="fr-label" for="select">label de cadix (optionnel)
+ <!---->
+ </label><select class="fr-select" id="select" aria-label="label de cadix" name="select" value="id1">
+ <option selected="" value="id1">premier label</option>
+ <option value="id2">second label</option>
+ <option disabled="" hidden="" value="">Selectionnez une option</option>
+ </select></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Required.html b/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Required.html
index 1bb48e582..93bca3941 100644
--- a/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Required.html
+++ b/packages/ui/src/components/_ui/dsfr-select.stories_snapshots_Required.html
@@ -1,4 +1,4 @@
-<div class="fr-select-group"><label class="fr-label" for="select">label de cadix *
+<div class="fr-select-group"><label class="fr-label" for="select">label de cadix
<!---->
</label><select class="fr-select" id="select" aria-label="label de cadix" name="select" value="id1">
<option selected="" value="id1">premier label</option>
diff --git a/packages/ui/src/components/_ui/dsfr-select.tsx b/packages/ui/src/components/_ui/dsfr-select.tsx
index 61ff1d061..f54a3ba0f 100644
--- a/packages/ui/src/components/_ui/dsfr-select.tsx
+++ b/packages/ui/src/components/_ui/dsfr-select.tsx
@@ -8,7 +8,7 @@ type Props<T, Items extends Readonly<NonEmptyArray<Item<T>>>> = {
items: Items
legend: { main: string; visible?: boolean; description?: string; placeholder?: string }
initialValue: Items[number]['id'] | null
- required?: boolean
+ required: boolean
disabled?: boolean
valueChanged: (id: NoInfer<Items>[number]['id'] | null) => void
} & HTMLAttributes
@@ -20,7 +20,7 @@ export const DsfrSelect = <T, Items extends Readonly<NonEmptyArray<Item<T>>>>(pr
<div class={['fr-select-group', (props.disabled ?? false) ? 'fr-select-group--disabled' : null]}>
{(props.legend.visible ?? true) ? (
<label class="fr-label" for={id}>
- {props.legend.main} {(props.required ?? false) ? ' *' : ''}
+ {props.legend.main} {props.required ? '' : ' (optionnel)'}
{isNotNullNorUndefinedNorEmpty(props.legend.description) ? <span class="fr-hint-text">{props.legend.description}</span> : null}
</label>
) : null}
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.stories.tsx b/packages/ui/src/components/_ui/dsfr-textarea.stories.tsx
index 6d5369f47..f663d0020 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.stories.tsx
+++ b/packages/ui/src/components/_ui/dsfr-textarea.stories.tsx
@@ -10,7 +10,8 @@ const meta: Meta = {
export default meta
const valueChangedAction = action('valueChanged')
-export const Default: StoryFn = () => <DsfrTextarea id="textarea1" legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
-export const WithDescriptionAndPlaceholder: StoryFn = () => <DsfrTextarea id="textarea3" legend={{ main: 'Légende', description: 'une URL' }} valueChanged={valueChangedAction} />
-export const WithValue: StoryFn = () => <DsfrTextarea id="textarea4" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
-export const Required: StoryFn = () => <DsfrTextarea id="textarea6" required={true} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+export const Default: StoryFn = () => <DsfrTextarea required={true} id="textarea1" legend={{ main: 'Légende' }} valueChanged={valueChangedAction} />
+export const WithDescriptionAndPlaceholder: StoryFn = () => <DsfrTextarea required={true} id="textarea3" legend={{ main: 'Légende', description: 'une URL' }} valueChanged={valueChangedAction} />
+export const WithValue: StoryFn = () => <DsfrTextarea required={true} id="textarea4" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+export const Required: StoryFn = () => <DsfrTextarea required={true} id="textarea6" legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
+export const Optional: StoryFn = () => <DsfrTextarea id="textarea6" required={false} legend={{ main: 'Légende' }} initialValue={'valeur initiale'} valueChanged={valueChangedAction} />
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Default.html b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Default.html
index ca8f26c2d..42591417b 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Default.html
@@ -1,4 +1,4 @@
<div class="fr-input-group"><label class="fr-label" for="textarea1">Légende
<!---->
<!---->
- </label><textarea class="fr-input" name="textarea1" id="textarea1"></textarea></div>
\ No newline at end of file
+ </label><textarea class="fr-input" name="textarea1" id="textarea1" required=""></textarea></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Optional.html b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Optional.html
new file mode 100644
index 000000000..266019b5a
--- /dev/null
+++ b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Optional.html
@@ -0,0 +1,3 @@
+<div class="fr-input-group"><label class="fr-label" for="textarea6">Légende (optionnel)
+ <!---->
+ </label><textarea class="fr-input" name="textarea6" id="textarea6" value="valeur initiale"></textarea></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Required.html b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Required.html
index 339958869..042b60feb 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Required.html
+++ b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_Required.html
@@ -1,3 +1,4 @@
-<div class="fr-input-group"><label class="fr-label" for="textarea6">Légende *
+<div class="fr-input-group"><label class="fr-label" for="textarea6">Légende
+ <!---->
<!---->
</label><textarea class="fr-input" name="textarea6" id="textarea6" required="" value="valeur initiale"></textarea></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithDescriptionAndPlaceholder.html b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithDescriptionAndPlaceholder.html
index 3f943da26..2f5cea223 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithDescriptionAndPlaceholder.html
+++ b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithDescriptionAndPlaceholder.html
@@ -1,3 +1,3 @@
<div class="fr-input-group"><label class="fr-label" for="textarea3">Légende
<!----><span class="fr-hint-text">une URL</span>
- </label><textarea class="fr-input" name="textarea3" id="textarea3"></textarea></div>
\ No newline at end of file
+ </label><textarea class="fr-input" name="textarea3" id="textarea3" required=""></textarea></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithValue.html b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithValue.html
index 7c8e5ad22..3ba9da7c8 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithValue.html
+++ b/packages/ui/src/components/_ui/dsfr-textarea.stories_snapshots_WithValue.html
@@ -1,4 +1,4 @@
<div class="fr-input-group"><label class="fr-label" for="textarea4">Légende
<!---->
<!---->
- </label><textarea class="fr-input" name="textarea4" id="textarea4" value="valeur initiale"></textarea></div>
\ No newline at end of file
+ </label><textarea class="fr-input" name="textarea4" id="textarea4" required="" value="valeur initiale"></textarea></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.tsx b/packages/ui/src/components/_ui/dsfr-textarea.tsx
index 351a6389e..23ea2ad77 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.tsx
+++ b/packages/ui/src/components/_ui/dsfr-textarea.tsx
@@ -7,7 +7,7 @@ type Props = {
legend: { main: string; description?: string }
valueChanged: (value: string) => void
initialValue?: string | null
- required?: boolean
+ required: boolean
}
export const DsfrTextarea = defineComponent<Props>(props => {
@@ -22,10 +22,10 @@ export const DsfrTextarea = defineComponent<Props>(props => {
return () => (
<div class="fr-input-group">
<label class="fr-label" for={id}>
- {props.legend.main} {(props.required ?? false) ? ' *' : null}
+ {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 ?? false} />
+ <textarea onInput={updateFromEvent} value={props.initialValue ?? undefined} class="fr-input" name={id} id={id} required={props.required} />
</div>
)
})
diff --git a/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_AllFilters.html b/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_AllFilters.html
index 07bfb2887..4d02c00b0 100644
--- a/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_AllFilters.html
+++ b/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_AllFilters.html
@@ -307,33 +307,47 @@
<td>administrationTypesIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
- <!---->
- </label></div><span class="h6 bold">Autorité</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div><span class="h6 bold">Dréal</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div><span class="h6 bold">Ministère</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div><span class="h6 bold">Opérateur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Autorité
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Dréal
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Ministère
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Opérateur
<!---->
- </label></div><span class="h6 bold">Préfecture</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Préfecture
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Type d'administration" aria-label="Décocher toutes les cases à cocher Type d'administration" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Type d'administration" aria-label="Cocher toutes les cases à cocher Type d'administration" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -341,43 +355,61 @@
<td>roles</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div><span class="h6 bold">Admin</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div><span class="h6 bold">Bureau d'études</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div><span class="h6 bold">Defaut</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Editeur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span class="h6 bold">Entreprise</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span class="h6 bold">Lecteur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span class="h6 bold">Super</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">Admin
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Bureau d'études
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">Defaut
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Editeur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">Entreprise
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">Lecteur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">Super
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Rôles" aria-label="Décocher toutes les cases à cocher Rôles" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Rôles" aria-label="Cocher toutes les cases à cocher Rôles" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -385,48 +417,68 @@
<td>typesIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -434,80 +486,100 @@
<td>domainesIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -515,50 +587,68 @@
<td>statutsIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -566,48 +656,68 @@
<td>activiteTypesIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (autorisations M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions W)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div><span class="h6 bold">Rapport d'intensité d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div><span class="h6 bold">Rapport environnemental d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">
- <!---->
- </label></div><span class="h6 bold">Rapport financier d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">
- <!---->
- </label></div><span class="h6 bold">Rapport social et économique d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">
- <!---->
- </label></div><span class="h6 bold">Rapport trimestriel d'exploitation d'or en Guyane</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">Rapport d'exploitation (autorisations M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Rapport d'exploitation (permis et concessions M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">Rapport d'exploitation (permis et concessions W)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">Rapport d'intensité d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">Rapport environnemental d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">Rapport financier d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">Rapport social et économique d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">Rapport trimestriel d'exploitation d'or en Guyane
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types d'activités" aria-label="Décocher toutes les cases à cocher Types d'activités" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types d'activités" aria-label="Cocher toutes les cases à cocher Types d'activités" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -615,32 +725,44 @@
<td>activiteStatutsIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts d'activité" aria-label="Décocher toutes les cases à cocher Statuts d'activité" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts d'activité" aria-label="Cocher toutes les cases à cocher Statuts d'activité" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -648,113 +770,159 @@
<td>demarchesTypesIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
- <!---->
- </label></div><span class="h6 bold">Amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
- <!---->
- </label></div><span class="h6 bold">Cession</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">Amodiation
<!---->
- </label></div><span class="h6 bold">Conversion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
- <!---->
- </label></div><span class="h6 bold">Déchéance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
- <!---->
- </label></div><span class="h6 bold">Demande de titre d'exploitation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
- <!---->
- </label></div><span class="h6 bold">Déplacement de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
- <!---->
- </label></div><span class="h6 bold">Extension de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
- <!---->
- </label></div><span class="h6 bold">Extension de substance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
- <!---->
- </label></div><span class="h6 bold">Fusion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
- <!---->
- </label></div><span class="h6 bold">Mutation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">
- <!---->
- </label></div><span class="h6 bold">Mutation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_907" type="checkbox"><label class="fr-label" for="checkbox_907">
- <!---->
- </label></div><span class="h6 bold">Octroi</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_547" type="checkbox"><label class="fr-label" for="checkbox_547">
- <!---->
- </label></div><span class="h6 bold">Prolongation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_234" type="checkbox"><label class="fr-label" for="checkbox_234">
- <!---->
- </label></div><span class="h6 bold">Prolongation 1</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_280" type="checkbox"><label class="fr-label" for="checkbox_280">
- <!---->
- </label></div><span class="h6 bold">Prolongation 2</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_537" type="checkbox"><label class="fr-label" for="checkbox_537">
- <!---->
- </label></div><span class="h6 bold">Prolongation exceptionnelle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_184" type="checkbox"><label class="fr-label" for="checkbox_184">
- <!---->
- </label></div><span class="h6 bold">Prorogation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_76" type="checkbox"><label class="fr-label" for="checkbox_76">
- <!---->
- </label></div><span class="h6 bold">Renonciation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_202" type="checkbox"><label class="fr-label" for="checkbox_202">
- <!---->
- </label></div><span class="h6 bold">Renonciation totale</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">Cession
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">Conversion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">Déchéance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">Demande de titre d'exploitation
<!---->
- </label></div><span class="h6 bold">Résiliation anticipée d'amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_873" type="checkbox"><label class="fr-label" for="checkbox_873">
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">Déplacement de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">Extension de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">Extension de substance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">Fusion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">Mutation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">Mutation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_907" type="checkbox"><label class="fr-label" for="checkbox_907">Octroi
<!---->
- </label></div><span class="h6 bold">Retrait</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_547" type="checkbox"><label class="fr-label" for="checkbox_547">Prolongation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_234" type="checkbox"><label class="fr-label" for="checkbox_234">Prolongation 1
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_280" type="checkbox"><label class="fr-label" for="checkbox_280">Prolongation 2
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_537" type="checkbox"><label class="fr-label" for="checkbox_537">Prolongation exceptionnelle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_184" type="checkbox"><label class="fr-label" for="checkbox_184">Prorogation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_76" type="checkbox"><label class="fr-label" for="checkbox_76">Renonciation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_202" type="checkbox"><label class="fr-label" for="checkbox_202">Renonciation totale
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Résiliation anticipée d'amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_873" type="checkbox"><label class="fr-label" for="checkbox_873">Retrait
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de démarche" aria-label="Décocher toutes les cases à cocher Types de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de démarche" aria-label="Cocher toutes les cases à cocher Types de démarche" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -762,23 +930,33 @@
<td>travauxTypesIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_113" type="checkbox"><label class="fr-label" for="checkbox_113">
- <!---->
- </label></div><span class="h6 bold">Autorisation d'ouverture de travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_120" type="checkbox"><label class="fr-label" for="checkbox_120">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'arrêt définitif des travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_288" type="checkbox"><label class="fr-label" for="checkbox_288">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'ouverture de travaux</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_113" type="checkbox"><label class="fr-label" for="checkbox_113">Autorisation d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_120" type="checkbox"><label class="fr-label" for="checkbox_120">Déclaration d'arrêt définitif des travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_288" type="checkbox"><label class="fr-label" for="checkbox_288">Déclaration d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de travaux" aria-label="Décocher toutes les cases à cocher Types de travaux" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de travaux" aria-label="Cocher toutes les cases à cocher Types de travaux" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
@@ -786,86 +964,116 @@
<td>demarchesStatutsIds</td>
<td>
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_645" type="checkbox"><label class="fr-label" for="checkbox_645">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_903" type="checkbox"><label class="fr-label" for="checkbox_903">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_244" type="checkbox"><label class="fr-label" for="checkbox_244">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_416" type="checkbox"><label class="fr-label" for="checkbox_416">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_983" type="checkbox"><label class="fr-label" for="checkbox_983">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_694" type="checkbox"><label class="fr-label" for="checkbox_694">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_875" type="checkbox"><label class="fr-label" for="checkbox_875">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_339" type="checkbox"><label class="fr-label" for="checkbox_339">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_179" type="checkbox"><label class="fr-label" for="checkbox_179">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_480" type="checkbox"><label class="fr-label" for="checkbox_480">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_617" type="checkbox"><label class="fr-label" for="checkbox_617">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
<!---->
</label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
</div>
</td>
</tr>
diff --git a/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_WithInitialValues.html b/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_WithInitialValues.html
index 9611177e5..64f889f01 100644
--- a/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_WithInitialValues.html
+++ b/packages/ui/src/components/_ui/filters/filters-checkboxes.stories_snapshots_WithInitialValues.html
@@ -1,76 +1,96 @@
<div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input checked="" name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input checked="" name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
<div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
<!---->
</label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters-checkboxes.tsx b/packages/ui/src/components/_ui/filters/filters-checkboxes.tsx
index 875fadf3e..9c272d4ed 100644
--- a/packages/ui/src/components/_ui/filters/filters-checkboxes.tsx
+++ b/packages/ui/src/components/_ui/filters/filters-checkboxes.tsx
@@ -11,6 +11,7 @@ import type { JSX } from 'vue/jsx-runtime'
import { DsfrButton } from '../dsfr-button'
import { ActiviteStatut } from '@/components/_common/activite-statut'
import { DsfrInputCheckbox } from '../dsfr-input-checkbox'
+import { fr } from '@codegouvfr/react-dsfr'
type Props = {
filter: CheckboxesCaminoFiltres
@@ -18,7 +19,7 @@ type Props = {
initialValues: (typeof caminoFiltres)[CheckboxesCaminoFiltres]['validator']['_output']
} & Pick<HTMLAttributes, 'class'>
-function DrawComponent(filter: CheckboxesCaminoFiltres, index: number): JSX.Element | null {
+function DrawComponent(filter: CheckboxesCaminoFiltres, index: number): JSX.Element {
const fullFilter = caminoFiltres[filter]
const component = fullFilter.component
@@ -27,7 +28,7 @@ function DrawComponent(filter: CheckboxesCaminoFiltres, index: number): JSX.Elem
return (
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<DomaineComp domaineId={fullFilter.elements[index].id} tagSize="sm" />
- <div class="h6 bold fr-pl-1w">{capitalize(fullFilter.elements[index].nom)}</div>
+ <div class="fr-pl-1w">{capitalize(fullFilter.elements[index].nom)}</div>
</div>
)
case 'FiltresTypes':
@@ -39,11 +40,11 @@ function DrawComponent(filter: CheckboxesCaminoFiltres, index: number): JSX.Elem
case 'FiltresDemarchesStatuts':
return <DemarcheStatut demarcheStatutId={fullFilter.elements[index].id} />
case 'FiltresLabel':
- return <span class="h6 bold">{capitalize(fullFilter.elements[index].nom)}</span>
+ return <>{capitalize(fullFilter.elements[index].nom)}</>
default:
exhaustiveCheck(component)
- return null
+ throw new Error('Cas impossible')
}
}
@@ -90,18 +91,37 @@ export const FiltersCheckboxes = defineComponent((props: Props) => {
return () => (
<div>
- <ul style={{ listStyleType: 'none', paddingLeft: 0, fontWeight: 'normal' }} class="fr-pb-1w">
+ <ul class={fr.cx('fr-pb-1w', 'fr-pl-0')} style={{ listStyleType: 'none', fontWeight: 'normal' }}>
{fullFilter.elements.map((element, index) => (
- <li key={element.id} class="fr-p-1v">
- <label style={{ display: 'flex', flexDirection: 'row' }}>
- <DsfrInputCheckbox legend={{ main: '' }} initialValue={selectedValues.value.includes(element.id)} valueChanged={checkboxToggle(element.id)} />
- {DrawComponent(props.filter, index)}
- </label>
+ <li key={element.id} class={fr.cx('fr-p-1v')}>
+ <div style={{ display: 'flex', flexDirection: 'row' }}>
+ <DsfrInputCheckbox legend={{ main: DrawComponent(props.filter, index) }} initialValue={selectedValues.value.includes(element.id)} valueChanged={checkboxToggle(element.id)} />
+ </div>
</li>
))}
</ul>
- <DsfrButton title="Aucun" class="fr-mr-1w" buttonType="tertiary" buttonSize="sm" onClick={() => checkboxesSelect('none')} />
- <DsfrButton title="Tous" buttonType="tertiary" buttonSize="sm" onClick={() => checkboxesSelect('all')} />
+ <ul class={[fr.cx('fr-btns-group', 'fr-btns-group--sm', 'fr-btns-group--inline')]}>
+ <li>
+ <DsfrButton
+ label="Aucun"
+ title={`Décocher toutes les cases à cocher ${fullFilter.name}`}
+ buttonType="tertiary"
+ buttonSize="sm"
+ onClick={() => checkboxesSelect('none')}
+ class={fr.cx('fr-mb-0')}
+ />
+ </li>
+ <li>
+ <DsfrButton
+ label="Tous"
+ title={`Cocher toutes les cases à cocher ${fullFilter.name}`}
+ buttonType="tertiary"
+ buttonSize="sm"
+ onClick={() => checkboxesSelect('all')}
+ class={fr.cx('fr-mb-0')}
+ />
+ </li>
+ </ul>
</div>
)
})
diff --git a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories.tsx b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories.tsx
index 698e88302..e4be3e2db 100644
--- a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories.tsx
+++ b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories.tsx
@@ -20,11 +20,14 @@ const apiClient: Pick<ApiClient, 'titresRechercherByNom' | 'getTitresByIds'> = {
},
}
-export const Default: StoryFn = () => <InputAutocomplete entreprises={[]} apiClient={apiClient} filter="substancesIds" initialValue={['aloh']} onFilterAutocomplete={action('onFilterAutocomplete')} />
+export const Default: StoryFn = () => (
+ <InputAutocomplete id="substances" entreprises={[]} apiClient={apiClient} filter="substancesIds" initialValue={['aloh']} onFilterAutocomplete={action('onFilterAutocomplete')} />
+)
const entrepriseId = entrepriseIdValidator.parse('id1')
export const Entreprises: StoryFn = () => (
<InputAutocomplete
+ id="entreprises"
entreprises={[{ id: entrepriseIdValidator.parse('id1'), nom: 'Nom', legal_siren: '12' }]}
apiClient={apiClient}
filter="entreprisesIds"
diff --git a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Default.html b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Default.html
index 3b17c900e..b8dfba979 100644
--- a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Default.html
@@ -1,4 +1,206 @@
-<div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="bauxite" aria-label="bauxite">bauxite</button><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
+<div id="substances_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer bauxite" aria-label="Supprimer bauxite">bauxite</button><input id="substances" type="text" name="substances" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="substances-control" aria-activedescendant="substances-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="substances-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="substances-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-22"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-23"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-24"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-25"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-26"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-27"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-28"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-29"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-30"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-31"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-32"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-33"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-34"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-35"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-36"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-37"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-38"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-39"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-40"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-41"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-42"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-43"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-44"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-45"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-46"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-47"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-48"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-49"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-50"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-51"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-52"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-53"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-54"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-55"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-56"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-57"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-58"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-59"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-60"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-61"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-62"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-63"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-64"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-65"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-66"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-67"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-68"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-69"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-70"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-71"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-72"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-73"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-74"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-75"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-76"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-77"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-78"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-79"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-80"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-81"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-82"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-83"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-84"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-85"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-86"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-87"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-88"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-89"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-90"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-91"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-92"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-93"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-94"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-95"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-96"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-97"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-98"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-99"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-100"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-101"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-102"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-103"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-104"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-105"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-106"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-107"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-108"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-109"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-110"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-111"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-112"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-113"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-114"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-115"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-116"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-117"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-118"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-119"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-120"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-121"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-122"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-123"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-124"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-125"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-126"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-127"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-128"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-129"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-130"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-131"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-132"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-133"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-134"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-135"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-136"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-137"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-138"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-139"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-140"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-141"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-142"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-143"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-144"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-145"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-146"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-147"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-148"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-149"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-150"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-151"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-152"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-153"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-154"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-155"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-156"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-157"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-158"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-159"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-160"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-161"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-162"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-163"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-164"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-165"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-166"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-167"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-168"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-169"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-170"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-171"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-172"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-173"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-174"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-175"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-176"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-177"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-178"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-179"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-180"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-181"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-182"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-183"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-184"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-185"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-186"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-187"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-188"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-189"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-190"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-191"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-192"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-193"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-194"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-195"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-196"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-197"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-198"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-199"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="substances-control-200"><span>zirconium</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Entreprises.html b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Entreprises.html
index 9bc7b2902..9544c8b59 100644
--- a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Entreprises.html
+++ b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.stories_snapshots_Entreprises.html
@@ -1,4 +1,4 @@
-<div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Nom" aria-label="Nom">Nom</button><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
+<div id="entreprises_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer Nom" aria-label="Supprimer Nom">Nom</button><input id="entreprises" type="text" name="entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="entreprises-control" aria-activedescendant="entreprises-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="entreprises-control" role="listbox"></ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.tsx b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.tsx
index ac13fb3cc..3e48d1e5d 100644
--- a/packages/ui/src/components/_ui/filters/filters-input-autocomplete.tsx
+++ b/packages/ui/src/components/_ui/filters/filters-input-autocomplete.tsx
@@ -8,6 +8,7 @@ import { caminoFiltres } from 'camino-common/src/filters'
export type InputAutocompleteValues = (typeof caminoFiltres)[AutocompleteCaminoFiltres]['validator']['_output']
type Props = {
+ id: string
filter: AutocompleteCaminoFiltres
initialValue: InputAutocompleteValues
entreprises: Entreprise[]
@@ -62,8 +63,8 @@ export const InputAutocomplete = defineComponent<Props>(props => {
props.onFilterAutocomplete(items.map(({ id }) => id))
}
- return () => <TypeAheadSmartMultiple filter={filterFull.value} onSelectItems={onSelectItems} />
+ return () => <TypeAheadSmartMultiple id={props.id} filter={filterFull.value} onSelectItems={onSelectItems} />
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-InputAutocomplete.props = ['filter', 'entreprises', 'initialValue', 'onFilterAutocomplete', 'apiClient']
+InputAutocomplete.props = ['filter', 'entreprises', 'initialValue', 'onFilterAutocomplete', 'apiClient', 'id']
diff --git a/packages/ui/src/components/_ui/filters/filters-input.stories.tsx b/packages/ui/src/components/_ui/filters/filters-input.stories.tsx
index e10e7bc4c..d2b1b8cc7 100644
--- a/packages/ui/src/components/_ui/filters/filters-input.stories.tsx
+++ b/packages/ui/src/components/_ui/filters/filters-input.stories.tsx
@@ -9,4 +9,4 @@ const meta: Meta = {
}
export default meta
-export const Administrations: StoryFn = () => <FiltersInput filter="nomsAdministration" initialValue="Plop" onFilterInput={action('onFilterInput')} />
+export const Administrations: StoryFn = () => <FiltersInput id="nomsAdministration" filter="nomsAdministration" initialValue="Plop" onFilterInput={action('onFilterInput')} />
diff --git a/packages/ui/src/components/_ui/filters/filters-input.stories_snapshots_Administrations.html b/packages/ui/src/components/_ui/filters/filters-input.stories_snapshots_Administrations.html
index 9dcc5c060..f58c0aee8 100644
--- a/packages/ui/src/components/_ui/filters/filters-input.stories_snapshots_Administrations.html
+++ b/packages/ui/src/components/_ui/filters/filters-input.stories_snapshots_Administrations.html
@@ -1,4 +1,4 @@
<div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom de l'administration" class="fr-input" name="input_271" id="input_271" type="text" value="Plop">
+ <!----><input placeholder="Nom de l'administration" class="fr-input" name="nomsAdministration" id="nomsAdministration" type="text" value="Plop">
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters-input.tsx b/packages/ui/src/components/_ui/filters/filters-input.tsx
index 211b285d2..7568f8e4d 100644
--- a/packages/ui/src/components/_ui/filters/filters-input.tsx
+++ b/packages/ui/src/components/_ui/filters/filters-input.tsx
@@ -4,6 +4,7 @@ import { DsfrInput } from '@/components/_ui/dsfr-input'
import type { JSX } from 'vue/jsx-runtime'
type Props = {
+ id: string
filter: InputCaminoFiltres
initialValue: string
onFilterInput: (value: string) => void
@@ -12,5 +13,14 @@ type Props = {
export function FiltersInput(props: Props): JSX.Element {
const filter = caminoFiltres[props.filter]
- return <DsfrInput initialValue={props.initialValue} type={{ type: 'text' }} legend={{ placeholder: filter.placeholder, main: filter.name, visible: false }} valueChanged={props.onFilterInput} />
+ return (
+ <DsfrInput
+ id={props.id}
+ required={false}
+ initialValue={props.initialValue}
+ type={{ type: 'text' }}
+ legend={{ placeholder: filter.placeholder, main: filter.name, visible: false }}
+ valueChanged={props.onFilterInput}
+ />
+ )
}
diff --git a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithValues.html b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithValues.html
index 2a1811446..7567f3be1 100644
--- a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithValues.html
+++ b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithValues.html
@@ -1,820 +1,1285 @@
-<nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+<form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+ <!---->
+ </h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsAdministration">Nom</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom de l'administration" class="fr-input" name="filtres_input_nomsAdministration" id="filtres_input_nomsAdministration" type="text" value="test">
+ <!---->
+ </div>
<!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer combustibles fossiles" aria-label="Supprimer combustibles fossiles">combustibles fossiles</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sources d'eau salée" aria-label="Supprimer sources d'eau salée">sources d'eau salée</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer bauxite" aria-label="Supprimer bauxite">bauxite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer antimoine" aria-label="Supprimer antimoine">antimoine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer argent" aria-label="Supprimer argent">argent</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer arsenic" aria-label="Supprimer arsenic">arsenic</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer or" aria-label="Supprimer or">or</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer béryllium" aria-label="Supprimer béryllium">béryllium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer bismuth" aria-label="Supprimer bismuth">bismuth</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer cadmium" aria-label="Supprimer cadmium">cadmium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer cérium" aria-label="Supprimer cérium">cérium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer césium" aria-label="Supprimer césium">césium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer chrome" aria-label="Supprimer chrome">chrome</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer cobalt" aria-label="Supprimer cobalt">cobalt</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gaz carbonique" aria-label="Supprimer gaz carbonique">gaz carbonique</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer cuivre" aria-label="Supprimer cuivre">cuivre</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer diamant" aria-label="Supprimer diamant">diamant</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer étain" aria-label="Supprimer étain">étain</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer fer" aria-label="Supprimer fer">fer</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer fluorine" aria-label="Supprimer fluorine">fluorine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gallium" aria-label="Supprimer gallium">gallium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gîtes géothermiques basse température" aria-label="Supprimer gîtes géothermiques basse température">gîtes géothermiques basse température</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gîtes géothermiques haute température" aria-label="Supprimer gîtes géothermiques haute température">gîtes géothermiques haute température</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gîtes géothermiques haute énergie" aria-label="Supprimer gîtes géothermiques haute énergie">gîtes géothermiques haute énergie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gîtes géothermiques basse énergie" aria-label="Supprimer gîtes géothermiques basse énergie">gîtes géothermiques basse énergie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer activités géothermiques de minime importance" aria-label="Supprimer activités géothermiques de minime importance">activités géothermiques de minime importance</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer germanium" aria-label="Supprimer germanium">germanium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer graphite" aria-label="Supprimer graphite">graphite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer granulats marins" aria-label="Supprimer granulats marins">granulats marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hafnium" aria-label="Supprimer hafnium">hafnium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hélium" aria-label="Supprimer hélium">hélium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer calcaires bitumineux" aria-label="Supprimer calcaires bitumineux">calcaires bitumineux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hydrocarbures liquides ou gazeux" aria-label="Supprimer hydrocarbures liquides ou gazeux">hydrocarbures liquides ou gazeux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer indium" aria-label="Supprimer indium">indium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer alun" aria-label="Supprimer alun">alun</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sels de potassium" aria-label="Supprimer sels de potassium">sels de potassium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer lithium" aria-label="Supprimer lithium">lithium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer manganèse" aria-label="Supprimer manganèse">manganèse</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer mercure" aria-label="Supprimer mercure">mercure</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer molybdène" aria-label="Supprimer molybdène">molybdène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sels de sodium" aria-label="Supprimer sels de sodium">sels de sodium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer nickel" aria-label="Supprimer nickel">nickel</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer niobium" aria-label="Supprimer niobium">niobium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer non précisée(s)" aria-label="Supprimer non précisée(s)">non précisée(s)</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer phosphates" aria-label="Supprimer phosphates">phosphates</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer platine" aria-label="Supprimer platine">platine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer métaux de la mine du platine" aria-label="Supprimer métaux de la mine du platine">métaux de la mine du platine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer plomb" aria-label="Supprimer plomb">plomb</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer radium" aria-label="Supprimer radium">radium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer rhénium" aria-label="Supprimer rhénium">rhénium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer rubidium" aria-label="Supprimer rubidium">rubidium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer autres éléments radioactifs" aria-label="Supprimer autres éléments radioactifs">autres éléments radioactifs</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer scandium" aria-label="Supprimer scandium">scandium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer substances connexes" aria-label="Supprimer substances connexes">substances connexes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sélénium" aria-label="Supprimer sélénium">sélénium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer stockage souterrain" aria-label="Supprimer stockage souterrain">stockage souterrain</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer soufre" aria-label="Supprimer soufre">soufre</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sulfates autres que les sulfates alcalino-terreux" aria-label="Supprimer sulfates autres que les sulfates alcalino-terreux">sulfates autres que les sulfates alcalino-terreux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer tantale" aria-label="Supprimer tantale">tantale</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer tellure" aria-label="Supprimer tellure">tellure</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer thallium" aria-label="Supprimer thallium">thallium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer thorium" aria-label="Supprimer thorium">thorium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titane" aria-label="Supprimer titane">titane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer autres éléments de terres rares" aria-label="Supprimer autres éléments de terres rares">autres éléments de terres rares</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer uranium" aria-label="Supprimer uranium">uranium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer vanadium" aria-label="Supprimer vanadium">vanadium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer tungstène" aria-label="Supprimer tungstène">tungstène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer zinc" aria-label="Supprimer zinc">zinc</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer zirconium" aria-label="Supprimer zirconium">zirconium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer actinium" aria-label="Supprimer actinium">actinium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer amphibolite" aria-label="Supprimer amphibolite">amphibolite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer andalousite / sillimanite / kyanite - (cyanite - disthène)" aria-label="Supprimer andalousite / sillimanite / kyanite - (cyanite - disthène)">andalousite / sillimanite / kyanite - (cyanite - disthène)</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer andésite" aria-label="Supprimer andésite">andésite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer anhydrite" aria-label="Supprimer anhydrite">anhydrite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer ardoises" aria-label="Supprimer ardoises">ardoises</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer argiles communes" aria-label="Supprimer argiles communes">argiles communes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer argiles fibreuses (attapulgites ou palygorskites, sépiolites)" aria-label="Supprimer argiles fibreuses (attapulgites ou palygorskites, sépiolites)">argiles fibreuses (attapulgites ou palygorskites, sépiolites)</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer argiles kaoliniques" aria-label="Supprimer argiles kaoliniques">argiles kaoliniques</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer argiles" aria-label="Supprimer argiles">argiles</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer astate" aria-label="Supprimer astate">astate</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer barytine" aria-label="Supprimer barytine">barytine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer basalte" aria-label="Supprimer basalte">basalte</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer bitume" aria-label="Supprimer bitume">bitume</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer butane" aria-label="Supprimer butane">butane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer calcaires cimentiers" aria-label="Supprimer calcaires cimentiers">calcaires cimentiers</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer calcaires" aria-label="Supprimer calcaires">calcaires</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer calcschiste" aria-label="Supprimer calcschiste">calcschiste</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer cendres volcaniques riches en silice" aria-label="Supprimer cendres volcaniques riches en silice">cendres volcaniques riches en silice</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer anthracite" aria-label="Supprimer anthracite">anthracite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer charbon" aria-label="Supprimer charbon">charbon</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer houille" aria-label="Supprimer houille">houille</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer lignite" aria-label="Supprimer lignite">lignite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer cornéenne" aria-label="Supprimer cornéenne">cornéenne</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer craie" aria-label="Supprimer craie">craie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer dacite" aria-label="Supprimer dacite">dacite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer diabase" aria-label="Supprimer diabase">diabase</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer diatomites" aria-label="Supprimer diatomites">diatomites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer diorites" aria-label="Supprimer diorites">diorites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer dolérite" aria-label="Supprimer dolérite">dolérite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer dolomie" aria-label="Supprimer dolomie">dolomie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer dysprosium" aria-label="Supprimer dysprosium">dysprosium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer erbium" aria-label="Supprimer erbium">erbium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer éthylène" aria-label="Supprimer éthylène">éthylène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer europium" aria-label="Supprimer europium">europium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer faluns" aria-label="Supprimer faluns">faluns</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer feldspaths" aria-label="Supprimer feldspaths">feldspaths</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gabbro" aria-label="Supprimer gabbro">gabbro</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gadolinium" aria-label="Supprimer gadolinium">gadolinium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer galets" aria-label="Supprimer galets">galets</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gaz naturel" aria-label="Supprimer gaz naturel">gaz naturel</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer dépôt glaciaire" aria-label="Supprimer dépôt glaciaire">dépôt glaciaire</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gneiss" aria-label="Supprimer gneiss">gneiss</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer granite et granulite" aria-label="Supprimer granite et granulite">granite et granulite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer granodiorite" aria-label="Supprimer granodiorite">granodiorite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer grès silico-ferrugineux" aria-label="Supprimer grès silico-ferrugineux">grès silico-ferrugineux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer grès" aria-label="Supprimer grès">grès</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer graviers siliceux" aria-label="Supprimer graviers siliceux">graviers siliceux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gypse" aria-label="Supprimer gypse">gypse</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer holmium" aria-label="Supprimer holmium">holmium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer asphalte" aria-label="Supprimer asphalte">asphalte</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hydrocarbures conventionnels liquides ou gazeux" aria-label="Supprimer hydrocarbures conventionnels liquides ou gazeux">hydrocarbures conventionnels liquides ou gazeux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer gaz combustible" aria-label="Supprimer gaz combustible">gaz combustible</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hydrocarbures liquides" aria-label="Supprimer hydrocarbures liquides">hydrocarbures liquides</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hydrocarbures" aria-label="Supprimer hydrocarbures">hydrocarbures</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer iridium" aria-label="Supprimer iridium">iridium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer kaolin" aria-label="Supprimer kaolin">kaolin</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer lanthane" aria-label="Supprimer lanthane">lanthane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer leptynite" aria-label="Supprimer leptynite">leptynite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer lutécium" aria-label="Supprimer lutécium">lutécium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer maërl" aria-label="Supprimer maërl">maërl</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer minerais" aria-label="Supprimer minerais">minerais</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer marbres" aria-label="Supprimer marbres">marbres</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer marnes" aria-label="Supprimer marnes">marnes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer métaux de base" aria-label="Supprimer métaux de base">métaux de base</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer métaux connexes" aria-label="Supprimer métaux connexes">métaux connexes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer métaux précieux" aria-label="Supprimer métaux précieux">métaux précieux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer micas" aria-label="Supprimer micas">micas</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer micaschistes" aria-label="Supprimer micaschistes">micaschistes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer migmatite" aria-label="Supprimer migmatite">migmatite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer mylonites" aria-label="Supprimer mylonites">mylonites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer néodyme" aria-label="Supprimer néodyme">néodyme</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer ocres" aria-label="Supprimer ocres">ocres</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer ophite" aria-label="Supprimer ophite">ophite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer osmium" aria-label="Supprimer osmium">osmium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer palladium" aria-label="Supprimer palladium">palladium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer perlite" aria-label="Supprimer perlite">perlite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer phonolite" aria-label="Supprimer phonolite">phonolite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer pierres précieuses" aria-label="Supprimer pierres précieuses">pierres précieuses</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer polonium" aria-label="Supprimer polonium">polonium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer porphyre" aria-label="Supprimer porphyre">porphyre</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer pouzzolane" aria-label="Supprimer pouzzolane">pouzzolane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer praséodyme" aria-label="Supprimer praséodyme">praséodyme</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer prométhium" aria-label="Supprimer prométhium">prométhium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer protactinium" aria-label="Supprimer protactinium">protactinium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer propane" aria-label="Supprimer propane">propane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer propylène" aria-label="Supprimer propylène">propylène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer pyrite" aria-label="Supprimer pyrite">pyrite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer quartz" aria-label="Supprimer quartz">quartz</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer quartzites" aria-label="Supprimer quartzites">quartzites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer radon" aria-label="Supprimer radon">radon</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer roches ardoisières" aria-label="Supprimer roches ardoisières">roches ardoisières</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer roches détritiques grossières" aria-label="Supprimer roches détritiques grossières">roches détritiques grossières</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer rhodium" aria-label="Supprimer rhodium">rhodium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer rhyolite" aria-label="Supprimer rhyolite">rhyolite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer ruthénium" aria-label="Supprimer ruthénium">ruthénium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables coquilliers" aria-label="Supprimer sables coquilliers">sables coquilliers</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer samarium" aria-label="Supprimer samarium">samarium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables moyens à grossiers" aria-label="Supprimer sables moyens à grossiers">sables moyens à grossiers</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables siliceux" aria-label="Supprimer sables siliceux">sables siliceux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer schistes bitumineux" aria-label="Supprimer schistes bitumineux">schistes bitumineux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer schistes" aria-label="Supprimer schistes">schistes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sel gemme" aria-label="Supprimer sel gemme">sel gemme</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer puits d'eau salée" aria-label="Supprimer puits d'eau salée">puits d'eau salée</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sels" aria-label="Supprimer sels">sels</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sel" aria-label="Supprimer sel">sel</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer serpentinite" aria-label="Supprimer serpentinite">serpentinite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sable extra siliceux" aria-label="Supprimer sable extra siliceux">sable extra siliceux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables et grès industriels" aria-label="Supprimer sables et grès industriels">sables et grès industriels</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables et graviers alluvionnaires" aria-label="Supprimer sables et graviers alluvionnaires">sables et graviers alluvionnaires</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables et graviers marins" aria-label="Supprimer sables et graviers marins">sables et graviers marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables et graviers silico-calcaires marins" aria-label="Supprimer sables et graviers silico-calcaires marins">sables et graviers silico-calcaires marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables et graviers siliceux marins" aria-label="Supprimer sables et graviers siliceux marins">sables et graviers siliceux marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer silice" aria-label="Supprimer silice">silice</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sillimanite" aria-label="Supprimer sillimanite">sillimanite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer silex / chert" aria-label="Supprimer silex / chert">silex / chert</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sables a minéraux lourds" aria-label="Supprimer sables a minéraux lourds">sables a minéraux lourds</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer sable siliceux ou silico-calcaire" aria-label="Supprimer sable siliceux ou silico-calcaire">sable siliceux ou silico-calcaire</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer stérile d'exploitation" aria-label="Supprimer stérile d'exploitation">stérile d'exploitation</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer syénite" aria-label="Supprimer syénite">syénite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer talc" aria-label="Supprimer talc">talc</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer technétium" aria-label="Supprimer technétium">technétium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer terbium" aria-label="Supprimer terbium">terbium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer terre végétale" aria-label="Supprimer terre végétale">terre végétale</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer thulium" aria-label="Supprimer thulium">thulium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer tous métaux associés" aria-label="Supprimer tous métaux associés">tous métaux associés</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer tourbe" aria-label="Supprimer tourbe">tourbe</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer trachyte" aria-label="Supprimer trachyte">trachyte</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer tuffeau" aria-label="Supprimer tuffeau">tuffeau</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer yttrium" aria-label="Supprimer yttrium">yttrium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer ytterbium" aria-label="Supprimer ytterbium">ytterbium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer hydrogène" aria-label="Supprimer hydrogène">hydrogène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer dioxyde de carbone (CO₂)" aria-label="Supprimer dioxyde de carbone (CO₂)">dioxyde de carbone (CO₂)</button><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsUtilisateurs">Noms, prénoms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="..." class="fr-input" name="filtres_input_nomsUtilisateurs" id="filtres_input_nomsUtilisateurs" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_emails">Emails</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="filtres_input_emails" id="filtres_input_emails" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_communes">Communes</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Communes" class="fr-input" name="filtres_input_communes" id="filtres_input_communes" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsEntreprise">Nom / Siren / Siret</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="filtres_input_nomsEntreprise" id="filtres_input_nomsEntreprise" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_administrationIds">Administrations</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_administrationIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_administrationIds" type="text" name="filtres_autocomplete_administrationIds" style="outline: none;" placeholder="Administrations" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_administrationIds-control" aria-activedescendant="filtres_autocomplete_administrationIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_administrationIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_administrationIds-control-0"><span>Bureau de recherches géologiques et minières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-1"><span>Centre d'appui au contrôle de l'environnement marin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-2"><span>Ministère de l'Economie, des Finances et de la Relance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-3"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-4"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-5"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-6"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-7"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-8"><span>Ministère de la Cohésion des Territoires et des Relations avec les Collectivités Territoriales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-9"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-10"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-11"><span>Direction Générale des Territoires et de la Mer de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-12"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Auvergne-Rhône-Alpes - Siège de Lyon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-13"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bourgogne-Franche-Comté - Siège de Besançon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-14"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-15"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Centre-Val-de-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-16"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-17"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Grand Est - Siège de Metz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-18"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Hauts-de-France - Siège de Lille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-19"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Normandie - Siège de Rouen</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-20"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Nouvelle-Aquitaine - Siège de Poitiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-21"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Occitanie - Siège de Toulouse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-22"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-23"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Provence-Alpes-Côte-d'Azur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-24"><span>Direction régionale et interdépartementale de l'environnement et de l'énergie (DRIEE) - Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-25"><span>Gendarmerie Nationale - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-26"><span>Mission régionale autorité environnementale de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-27"><span>Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-28"><span>Pôle Technique Minier de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-29"><span>Préfecture - Ain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-30"><span>Préfecture - Aisne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-31"><span>Préfecture - Allier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-32"><span>Préfecture - Alpes-de-Haute-Provence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-33"><span>Préfecture - Alpes-Maritimes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-34"><span>Préfecture - Ardèche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-35"><span>Préfecture - Ardennes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-36"><span>Préfecture - Ariège</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-37"><span>Préfecture - Aube</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-38"><span>Préfecture - Aude</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-39"><span>Préfecture - Aveyron</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-40"><span>Préfecture - Bas-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-41"><span>Préfecture - Bouches-du-Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-42"><span>Préfecture - Calvados</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-43"><span>Préfecture - Cantal</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-44"><span>Préfecture - Charente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-45"><span>Préfecture - Charente-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-46"><span>Préfecture - Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-47"><span>Préfecture - Corrèze</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-48"><span>Préfecture - Corse-du-Sud</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-49"><span>Préfecture - Côte-d'Or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-50"><span>Préfecture - Côtes-d'Armor</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-51"><span>Préfecture - Creuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-52"><span>Préfecture - Deux-Sèvres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-53"><span>Préfecture - Dordogne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-54"><span>Préfecture - Doubs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-55"><span>Préfecture - Drôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-56"><span>Préfecture - Essonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-57"><span>Préfecture - Eure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-58"><span>Préfecture - Eure-et-Loir</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-59"><span>Préfecture - Finistère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-60"><span>Préfecture - Gard</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-61"><span>Préfecture - Gers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-62"><span>Préfecture - Gironde</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-63"><span>Préfecture - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-64"><span>Préfecture - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-65"><span>Préfecture - Haut-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-66"><span>Préfecture - Haute-Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-67"><span>Préfecture - Haute-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-68"><span>Préfecture - Haute-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-69"><span>Préfecture - Haute-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-70"><span>Préfecture - Haute-Saône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-71"><span>Préfecture - Haute-Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-72"><span>Préfecture - Haute-Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-73"><span>Préfecture - Hautes-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-74"><span>Préfecture - Hautes-Pyrénées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-75"><span>Préfecture - Hauts-de-Seine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-76"><span>Préfecture - Hérault</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-77"><span>Préfecture - Ille-et-Vilaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-78"><span>Préfecture - Indre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-79"><span>Préfecture - Indre-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-80"><span>Préfecture - Isère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-81"><span>Préfecture - Jura</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-82"><span>Préfecture - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-83"><span>Préfecture - Landes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-84"><span>Préfecture - Loir-et-Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-85"><span>Préfecture - Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-86"><span>Préfecture - Loire-Atlantique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-87"><span>Préfecture - Loiret</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-88"><span>Préfecture - Lot</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-89"><span>Préfecture - Lot-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-90"><span>Préfecture - Lozère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-91"><span>Préfecture - Maine-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-92"><span>Préfecture - Manche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-93"><span>Préfecture - Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-94"><span>Préfecture - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-95"><span>Préfecture - Mayenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-96"><span>Préfecture - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-97"><span>Préfecture - Meurthe-et-Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-98"><span>Préfecture - Meuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-99"><span>Préfecture - Morbihan</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-100"><span>Préfecture - Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-101"><span>Préfecture - Nièvre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-102"><span>Préfecture - Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-103"><span>Préfecture - Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-104"><span>Préfecture - Orne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-105"><span>Préfecture - Pas-de-Calais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-106"><span>Préfecture - Puy-de-Dôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-107"><span>Préfecture - Pyrénées-Atlantiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-108"><span>Préfecture - Pyrénées-Orientales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-109"><span>Préfecture - Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-110"><span>Préfecture - Saône-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-111"><span>Préfecture - Sarthe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-112"><span>Préfecture - Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-113"><span>Préfecture - Seine-et-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-114"><span>Préfecture - Seine-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-115"><span>Préfecture - Seine-Saint-Denis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-116"><span>Préfecture - Somme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-117"><span>Préfecture - Tarn</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-118"><span>Préfecture - Tarn-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-119"><span>Préfecture - Territoire de Belfort</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-120"><span>Préfecture - Val-d'Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-121"><span>Préfecture - Val-de-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-122"><span>Préfecture - Var</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-123"><span>Préfecture - Vaucluse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-124"><span>Préfecture - Vendée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-125"><span>Préfecture - Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-126"><span>Préfecture - Vosges</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-127"><span>Préfecture - Yonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-128"><span>Préfecture - Yvelines</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-129"><span>Préfecture de police de Paris</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_departements">Départements</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_departements_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_departements" type="text" name="filtres_autocomplete_departements" style="outline: none;" placeholder="Départements" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_departements-control" aria-activedescendant="filtres_autocomplete_departements-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_departements-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_departements-control-0"><span>Ain (01)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-1"><span>Aisne (02)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-2"><span>Allier (03)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-3"><span>Alpes-de-Haute-Provence (04)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-4"><span>Hautes-Alpes (05)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-5"><span>Alpes-Maritimes (06)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-6"><span>Ardèche (07)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-7"><span>Ardennes (08)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-8"><span>Ariège (09)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-9"><span>Aube (10)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-10"><span>Aude (11)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-11"><span>Aveyron (12)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-12"><span>Bouches-du-Rhône (13)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-13"><span>Calvados (14)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-14"><span>Cantal (15)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-15"><span>Charente (16)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-16"><span>Charente-Maritime (17)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-17"><span>Cher (18)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-18"><span>Corrèze (19)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-19"><span>Côte-d'Or (21)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-20"><span>Côtes-d'Armor (22)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-21"><span>Creuse (23)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-22"><span>Dordogne (24)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-23"><span>Doubs (25)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-24"><span>Drôme (26)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-25"><span>Eure (27)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-26"><span>Eure-et-Loir (28)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-27"><span>Finistère (29)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-28"><span>Corse-du-Sud (2A)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-29"><span>Haute-Corse (2B)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-30"><span>Gard (30)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-31"><span>Haute-Garonne (31)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-32"><span>Gers (32)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-33"><span>Gironde (33)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-34"><span>Hérault (34)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-35"><span>Ille-et-Vilaine (35)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-36"><span>Indre (36)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-37"><span>Indre-et-Loire (37)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-38"><span>Isère (38)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-39"><span>Jura (39)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-40"><span>Landes (40)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-41"><span>Loir-et-Cher (41)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-42"><span>Loire (42)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-43"><span>Haute-Loire (43)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-44"><span>Loire-Atlantique (44)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-45"><span>Loiret (45)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-46"><span>Lot (46)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-47"><span>Lot-et-Garonne (47)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-48"><span>Lozère (48)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-49"><span>Maine-et-Loire (49)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-50"><span>Manche (50)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-51"><span>Marne (51)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-52"><span>Haute-Marne (52)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-53"><span>Mayenne (53)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-54"><span>Meurthe-et-Moselle (54)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-55"><span>Meuse (55)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-56"><span>Morbihan (56)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-57"><span>Moselle (57)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-58"><span>Nièvre (58)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-59"><span>Nord (59)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-60"><span>Oise (60)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-61"><span>Orne (61)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-62"><span>Pas-de-Calais (62)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-63"><span>Puy-de-Dôme (63)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-64"><span>Pyrénées-Atlantiques (64)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-65"><span>Hautes-Pyrénées (65)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-66"><span>Pyrénées-Orientales (66)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-67"><span>Bas-Rhin (67)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-68"><span>Haut-Rhin (68)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-69"><span>Rhône (69)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-70"><span>Haute-Saône (70)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-71"><span>Saône-et-Loire (71)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-72"><span>Sarthe (72)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-73"><span>Savoie (73)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-74"><span>Haute-Savoie (74)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-75"><span>Paris (75)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-76"><span>Seine-Maritime (76)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-77"><span>Seine-et-Marne (77)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-78"><span>Yvelines (78)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-79"><span>Deux-Sèvres (79)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-80"><span>Somme (80)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-81"><span>Tarn (81)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-82"><span>Tarn-et-Garonne (82)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-83"><span>Var (83)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-84"><span>Vaucluse (84)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-85"><span>Vendée (85)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-86"><span>Vienne (86)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-87"><span>Haute-Vienne (87)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-88"><span>Vosges (88)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-89"><span>Yonne (89)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-90"><span>Territoire de Belfort (90)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-91"><span>Essonne (91)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-92"><span>Hauts-de-Seine (92)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-93"><span>Seine-Saint-Denis (93)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-94"><span>Val-de-Marne (94)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-95"><span>Val-d'Oise (95)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-96"><span>Guadeloupe (971)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-97"><span>Martinique (972)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-98"><span>Guyane (973)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-99"><span>La Réunion (974)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-100"><span>Mayotte (976)</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_regions">Régions</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_regions_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_regions" type="text" name="filtres_autocomplete_regions" style="outline: none;" placeholder="Régions" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_regions-control" aria-activedescendant="filtres_autocomplete_regions-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_regions-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_regions-control-0"><span>Auvergne-Rhône-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-1"><span>Bourgogne-Franche-Comté</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-2"><span>Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-3"><span>Centre-Val de Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-4"><span>Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-5"><span>Grand Est</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-6"><span>Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-7"><span>Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-8"><span>Hauts-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-9"><span>Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-10"><span>La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-11"><span>Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-12"><span>Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-13"><span>Normandie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-14"><span>Nouvelle-Aquitaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-15"><span>Occitanie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-16"><span>Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-17"><span>Provence-Alpes-Côte d'Azur</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_facadesMaritimes">Façades Maritimes</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_facadesMaritimes_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_facadesMaritimes" type="text" name="filtres_autocomplete_facadesMaritimes" style="outline: none;" placeholder="Façades Maritimes" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_facadesMaritimes-control" aria-activedescendant="filtres_autocomplete_facadesMaritimes-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_facadesMaritimes-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-0"><span>Manche Est - Mer du Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-1"><span>Méditerranée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-2"><span>Nord Atlantique - Manche Ouest</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-3"><span>Sud Atlantique</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_annees">Années</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_annees_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_annees" type="text" name="filtres_autocomplete_annees" style="outline: none;" placeholder="Années" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_annees-control" aria-activedescendant="filtres_autocomplete_annees-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_annees-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_annees-control-0"><span>1997</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-1"><span>1998</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-2"><span>1999</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-3"><span>2000</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-4"><span>2001</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-5"><span>2002</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-6"><span>2003</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-7"><span>2004</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-8"><span>2005</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-9"><span>2006</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-10"><span>2007</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-11"><span>2008</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-12"><span>2009</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-13"><span>2010</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-14"><span>2011</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-15"><span>2012</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-16"><span>2013</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-17"><span>2014</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-18"><span>2015</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-19"><span>2016</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-20"><span>2017</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-21"><span>2018</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-22"><span>2019</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-23"><span>2020</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-24"><span>2021</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-25"><span>2022</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-26"><span>2023</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-27"><span>2024</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-28"><span>2025</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_administrationTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_administrationTypesIds">Type d'administration</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Autorité
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Dréal
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Ministère
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Opérateur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Préfecture
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Type d'administration" aria-label="Décocher toutes les cases à cocher Type d'administration" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Type d'administration" aria-label="Cocher toutes les cases à cocher Type d'administration" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_roles">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_roles">Rôles</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">Admin
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Bureau d'études
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">Defaut
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Editeur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">Entreprise
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">Lecteur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">Super
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Rôles" aria-label="Décocher toutes les cases à cocher Rôles" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Rôles" aria-label="Cocher toutes les cases à cocher Rôles" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_activiteTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_activiteTypesIds">Types d'activités</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">Rapport d'exploitation (autorisations M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Rapport d'exploitation (permis et concessions M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">Rapport d'exploitation (permis et concessions W)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">Rapport d'intensité d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">Rapport environnemental d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">Rapport financier d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">Rapport social et économique d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">Rapport trimestriel d'exploitation d'or en Guyane
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types d'activités" aria-label="Décocher toutes les cases à cocher Types d'activités" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types d'activités" aria-label="Cocher toutes les cases à cocher Types d'activités" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_activiteStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_activiteStatutsIds">Statuts d'activité</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts d'activité" aria-label="Décocher toutes les cases à cocher Statuts d'activité" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts d'activité" aria-label="Cocher toutes les cases à cocher Statuts d'activité" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesTypesIds">Types de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">Amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">Cession
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">Conversion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">Déchéance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">Demande de titre d'exploitation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">Déplacement de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">Extension de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">Extension de substance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">Fusion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">Mutation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">Mutation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_907" type="checkbox"><label class="fr-label" for="checkbox_907">Octroi
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_547" type="checkbox"><label class="fr-label" for="checkbox_547">Prolongation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_234" type="checkbox"><label class="fr-label" for="checkbox_234">Prolongation 1
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_280" type="checkbox"><label class="fr-label" for="checkbox_280">Prolongation 2
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_537" type="checkbox"><label class="fr-label" for="checkbox_537">Prolongation exceptionnelle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_184" type="checkbox"><label class="fr-label" for="checkbox_184">Prorogation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_76" type="checkbox"><label class="fr-label" for="checkbox_76">Renonciation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_202" type="checkbox"><label class="fr-label" for="checkbox_202">Renonciation totale
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Résiliation anticipée d'amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_873" type="checkbox"><label class="fr-label" for="checkbox_873">Retrait
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de démarche" aria-label="Décocher toutes les cases à cocher Types de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de démarche" aria-label="Cocher toutes les cases à cocher Types de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_travauxTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_travauxTypesIds">Types de travaux</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_113" type="checkbox"><label class="fr-label" for="checkbox_113">Autorisation d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_120" type="checkbox"><label class="fr-label" for="checkbox_120">Déclaration d'arrêt définitif des travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_288" type="checkbox"><label class="fr-label" for="checkbox_288">Déclaration d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de travaux" aria-label="Décocher toutes les cases à cocher Types de travaux" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de travaux" aria-label="Cocher toutes les cases à cocher Types de travaux" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesStatutsIds">Statuts de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_645" type="checkbox"><label class="fr-label" for="checkbox_645">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_903" type="checkbox"><label class="fr-label" for="checkbox_903">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_244" type="checkbox"><label class="fr-label" for="checkbox_244">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_416" type="checkbox"><label class="fr-label" for="checkbox_416">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_983" type="checkbox"><label class="fr-label" for="checkbox_983">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_694" type="checkbox"><label class="fr-label" for="checkbox_694">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_875" type="checkbox"><label class="fr-label" for="checkbox_875">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_339" type="checkbox"><label class="fr-label" for="checkbox_339">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_179" type="checkbox"><label class="fr-label" for="checkbox_179">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_480" type="checkbox"><label class="fr-label" for="checkbox_480">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_617" type="checkbox"><label class="fr-label" for="checkbox_617">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesInclues">Types d'étapes incluses</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesExclues">Types d'étapes exclues</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: -1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsAdministration">Nom</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsAdministration">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom de l'administration" class="fr-input" name="input_271" id="input_271" type="text" value="test">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsUtilisateurs">Noms, prénoms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsUtilisateurs">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="..." class="fr-input" name="input_670" id="input_670" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-emails">Emails</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-emails">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="input_74" id="input_74" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_878" id="input_878" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-communes">Communes</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-communes">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Communes" class="fr-input" name="input_967" id="input_967" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsEntreprise">Nom / Siren / Siret</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsEntreprise">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="input_25" id="input_25" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: -1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="combustibles fossiles" aria-label="combustibles fossiles">combustibles fossiles</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sources d'eau salée" aria-label="sources d'eau salée">sources d'eau salée</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="bauxite" aria-label="bauxite">bauxite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="antimoine" aria-label="antimoine">antimoine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="argent" aria-label="argent">argent</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="arsenic" aria-label="arsenic">arsenic</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="or" aria-label="or">or</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="béryllium" aria-label="béryllium">béryllium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="bismuth" aria-label="bismuth">bismuth</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="cadmium" aria-label="cadmium">cadmium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="cérium" aria-label="cérium">cérium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="césium" aria-label="césium">césium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="chrome" aria-label="chrome">chrome</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="cobalt" aria-label="cobalt">cobalt</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gaz carbonique" aria-label="gaz carbonique">gaz carbonique</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="cuivre" aria-label="cuivre">cuivre</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="diamant" aria-label="diamant">diamant</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="étain" aria-label="étain">étain</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="fer" aria-label="fer">fer</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="fluorine" aria-label="fluorine">fluorine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gallium" aria-label="gallium">gallium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gîtes géothermiques basse température" aria-label="gîtes géothermiques basse température">gîtes géothermiques basse température</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gîtes géothermiques haute température" aria-label="gîtes géothermiques haute température">gîtes géothermiques haute température</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gîtes géothermiques haute énergie" aria-label="gîtes géothermiques haute énergie">gîtes géothermiques haute énergie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gîtes géothermiques basse énergie" aria-label="gîtes géothermiques basse énergie">gîtes géothermiques basse énergie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="activités géothermiques de minime importance" aria-label="activités géothermiques de minime importance">activités géothermiques de minime importance</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="germanium" aria-label="germanium">germanium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="graphite" aria-label="graphite">graphite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="granulats marins" aria-label="granulats marins">granulats marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hafnium" aria-label="hafnium">hafnium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hélium" aria-label="hélium">hélium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="calcaires bitumineux" aria-label="calcaires bitumineux">calcaires bitumineux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hydrocarbures liquides ou gazeux" aria-label="hydrocarbures liquides ou gazeux">hydrocarbures liquides ou gazeux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="indium" aria-label="indium">indium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="alun" aria-label="alun">alun</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sels de potassium" aria-label="sels de potassium">sels de potassium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="lithium" aria-label="lithium">lithium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="manganèse" aria-label="manganèse">manganèse</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="mercure" aria-label="mercure">mercure</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="molybdène" aria-label="molybdène">molybdène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sels de sodium" aria-label="sels de sodium">sels de sodium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="nickel" aria-label="nickel">nickel</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="niobium" aria-label="niobium">niobium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="non précisée(s)" aria-label="non précisée(s)">non précisée(s)</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="phosphates" aria-label="phosphates">phosphates</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="platine" aria-label="platine">platine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="métaux de la mine du platine" aria-label="métaux de la mine du platine">métaux de la mine du platine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="plomb" aria-label="plomb">plomb</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="radium" aria-label="radium">radium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="rhénium" aria-label="rhénium">rhénium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="rubidium" aria-label="rubidium">rubidium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="autres éléments radioactifs" aria-label="autres éléments radioactifs">autres éléments radioactifs</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="scandium" aria-label="scandium">scandium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="substances connexes" aria-label="substances connexes">substances connexes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sélénium" aria-label="sélénium">sélénium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="stockage souterrain" aria-label="stockage souterrain">stockage souterrain</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="soufre" aria-label="soufre">soufre</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sulfates autres que les sulfates alcalino-terreux" aria-label="sulfates autres que les sulfates alcalino-terreux">sulfates autres que les sulfates alcalino-terreux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="tantale" aria-label="tantale">tantale</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="tellure" aria-label="tellure">tellure</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="thallium" aria-label="thallium">thallium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="thorium" aria-label="thorium">thorium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titane" aria-label="titane">titane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="autres éléments de terres rares" aria-label="autres éléments de terres rares">autres éléments de terres rares</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="uranium" aria-label="uranium">uranium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="vanadium" aria-label="vanadium">vanadium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="tungstène" aria-label="tungstène">tungstène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="zinc" aria-label="zinc">zinc</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="zirconium" aria-label="zirconium">zirconium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="actinium" aria-label="actinium">actinium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="amphibolite" aria-label="amphibolite">amphibolite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="andalousite / sillimanite / kyanite - (cyanite - disthène)" aria-label="andalousite / sillimanite / kyanite - (cyanite - disthène)">andalousite / sillimanite / kyanite - (cyanite - disthène)</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="andésite" aria-label="andésite">andésite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="anhydrite" aria-label="anhydrite">anhydrite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="ardoises" aria-label="ardoises">ardoises</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="argiles communes" aria-label="argiles communes">argiles communes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="argiles fibreuses (attapulgites ou palygorskites, sépiolites)" aria-label="argiles fibreuses (attapulgites ou palygorskites, sépiolites)">argiles fibreuses (attapulgites ou palygorskites, sépiolites)</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="argiles kaoliniques" aria-label="argiles kaoliniques">argiles kaoliniques</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="argiles" aria-label="argiles">argiles</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="astate" aria-label="astate">astate</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="barytine" aria-label="barytine">barytine</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="basalte" aria-label="basalte">basalte</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="bitume" aria-label="bitume">bitume</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="butane" aria-label="butane">butane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="calcaires cimentiers" aria-label="calcaires cimentiers">calcaires cimentiers</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="calcaires" aria-label="calcaires">calcaires</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="calcschiste" aria-label="calcschiste">calcschiste</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="cendres volcaniques riches en silice" aria-label="cendres volcaniques riches en silice">cendres volcaniques riches en silice</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="anthracite" aria-label="anthracite">anthracite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="charbon" aria-label="charbon">charbon</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="houille" aria-label="houille">houille</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="lignite" aria-label="lignite">lignite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="cornéenne" aria-label="cornéenne">cornéenne</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="craie" aria-label="craie">craie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="dacite" aria-label="dacite">dacite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="diabase" aria-label="diabase">diabase</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="diatomites" aria-label="diatomites">diatomites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="diorites" aria-label="diorites">diorites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="dolérite" aria-label="dolérite">dolérite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="dolomie" aria-label="dolomie">dolomie</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="dysprosium" aria-label="dysprosium">dysprosium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="erbium" aria-label="erbium">erbium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="éthylène" aria-label="éthylène">éthylène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="europium" aria-label="europium">europium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="faluns" aria-label="faluns">faluns</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="feldspaths" aria-label="feldspaths">feldspaths</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gabbro" aria-label="gabbro">gabbro</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gadolinium" aria-label="gadolinium">gadolinium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="galets" aria-label="galets">galets</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gaz naturel" aria-label="gaz naturel">gaz naturel</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="dépôt glaciaire" aria-label="dépôt glaciaire">dépôt glaciaire</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gneiss" aria-label="gneiss">gneiss</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="granite et granulite" aria-label="granite et granulite">granite et granulite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="granodiorite" aria-label="granodiorite">granodiorite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="grès silico-ferrugineux" aria-label="grès silico-ferrugineux">grès silico-ferrugineux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="grès" aria-label="grès">grès</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="graviers siliceux" aria-label="graviers siliceux">graviers siliceux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gypse" aria-label="gypse">gypse</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="holmium" aria-label="holmium">holmium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="asphalte" aria-label="asphalte">asphalte</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hydrocarbures conventionnels liquides ou gazeux" aria-label="hydrocarbures conventionnels liquides ou gazeux">hydrocarbures conventionnels liquides ou gazeux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="gaz combustible" aria-label="gaz combustible">gaz combustible</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hydrocarbures liquides" aria-label="hydrocarbures liquides">hydrocarbures liquides</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hydrocarbures" aria-label="hydrocarbures">hydrocarbures</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="iridium" aria-label="iridium">iridium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="kaolin" aria-label="kaolin">kaolin</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="lanthane" aria-label="lanthane">lanthane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="leptynite" aria-label="leptynite">leptynite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="lutécium" aria-label="lutécium">lutécium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="maërl" aria-label="maërl">maërl</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="minerais" aria-label="minerais">minerais</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="marbres" aria-label="marbres">marbres</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="marnes" aria-label="marnes">marnes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="métaux de base" aria-label="métaux de base">métaux de base</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="métaux connexes" aria-label="métaux connexes">métaux connexes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="métaux précieux" aria-label="métaux précieux">métaux précieux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="micas" aria-label="micas">micas</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="micaschistes" aria-label="micaschistes">micaschistes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="migmatite" aria-label="migmatite">migmatite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="mylonites" aria-label="mylonites">mylonites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="néodyme" aria-label="néodyme">néodyme</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="ocres" aria-label="ocres">ocres</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="ophite" aria-label="ophite">ophite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="osmium" aria-label="osmium">osmium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="palladium" aria-label="palladium">palladium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="perlite" aria-label="perlite">perlite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="phonolite" aria-label="phonolite">phonolite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="pierres précieuses" aria-label="pierres précieuses">pierres précieuses</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="polonium" aria-label="polonium">polonium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="porphyre" aria-label="porphyre">porphyre</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="pouzzolane" aria-label="pouzzolane">pouzzolane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="praséodyme" aria-label="praséodyme">praséodyme</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="prométhium" aria-label="prométhium">prométhium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="protactinium" aria-label="protactinium">protactinium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="propane" aria-label="propane">propane</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="propylène" aria-label="propylène">propylène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="pyrite" aria-label="pyrite">pyrite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="quartz" aria-label="quartz">quartz</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="quartzites" aria-label="quartzites">quartzites</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="radon" aria-label="radon">radon</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="roches ardoisières" aria-label="roches ardoisières">roches ardoisières</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="roches détritiques grossières" aria-label="roches détritiques grossières">roches détritiques grossières</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="rhodium" aria-label="rhodium">rhodium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="rhyolite" aria-label="rhyolite">rhyolite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="ruthénium" aria-label="ruthénium">ruthénium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables coquilliers" aria-label="sables coquilliers">sables coquilliers</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="samarium" aria-label="samarium">samarium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables moyens à grossiers" aria-label="sables moyens à grossiers">sables moyens à grossiers</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables siliceux" aria-label="sables siliceux">sables siliceux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="schistes bitumineux" aria-label="schistes bitumineux">schistes bitumineux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="schistes" aria-label="schistes">schistes</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sel gemme" aria-label="sel gemme">sel gemme</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="puits d'eau salée" aria-label="puits d'eau salée">puits d'eau salée</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sels" aria-label="sels">sels</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sel" aria-label="sel">sel</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="serpentinite" aria-label="serpentinite">serpentinite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sable extra siliceux" aria-label="sable extra siliceux">sable extra siliceux</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables et grès industriels" aria-label="sables et grès industriels">sables et grès industriels</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables et graviers alluvionnaires" aria-label="sables et graviers alluvionnaires">sables et graviers alluvionnaires</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables et graviers marins" aria-label="sables et graviers marins">sables et graviers marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables et graviers silico-calcaires marins" aria-label="sables et graviers silico-calcaires marins">sables et graviers silico-calcaires marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables et graviers siliceux marins" aria-label="sables et graviers siliceux marins">sables et graviers siliceux marins</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="silice" aria-label="silice">silice</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sillimanite" aria-label="sillimanite">sillimanite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="silex / chert" aria-label="silex / chert">silex / chert</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sables a minéraux lourds" aria-label="sables a minéraux lourds">sables a minéraux lourds</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="sable siliceux ou silico-calcaire" aria-label="sable siliceux ou silico-calcaire">sable siliceux ou silico-calcaire</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="stérile d'exploitation" aria-label="stérile d'exploitation">stérile d'exploitation</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="syénite" aria-label="syénite">syénite</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="talc" aria-label="talc">talc</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="technétium" aria-label="technétium">technétium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="terbium" aria-label="terbium">terbium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="terre végétale" aria-label="terre végétale">terre végétale</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="thulium" aria-label="thulium">thulium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="tous métaux associés" aria-label="tous métaux associés">tous métaux associés</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="tourbe" aria-label="tourbe">tourbe</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="trachyte" aria-label="trachyte">trachyte</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="tuffeau" aria-label="tuffeau">tuffeau</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="yttrium" aria-label="yttrium">yttrium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="ytterbium" aria-label="ytterbium">ytterbium</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="hydrogène" aria-label="hydrogène">hydrogène</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="dioxyde de carbone (CO₂)" aria-label="dioxyde de carbone (CO₂)">dioxyde de carbone (CO₂)</button><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-administrationIds">Administrations</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Administrations_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Administrations" type="text" name="filters_autocomplete_Administrations" style="outline: none;" placeholder="Administrations" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 10;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-departements">Départements</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-departements">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Départements_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Départements" type="text" name="filters_autocomplete_Départements" style="outline: none;" placeholder="Départements" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 11;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-regions">Régions</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-regions">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Régions_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Régions" type="text" name="filters_autocomplete_Régions" style="outline: none;" placeholder="Régions" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 12;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-facadesMaritimes">Façades Maritimes</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-facadesMaritimes">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Façades Maritimes_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Façades Maritimes" type="text" name="filters_autocomplete_Façades Maritimes" style="outline: none;" placeholder="Façades Maritimes" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 13;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-annees">Années</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-annees">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Années_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Années" type="text" name="filters_autocomplete_Années" style="outline: none;" placeholder="Années" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 14;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-administrationTypesIds">Type d'administration</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div><span class="h6 bold">Autorité</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div><span class="h6 bold">Dréal</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Ministère</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span class="h6 bold">Opérateur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span class="h6 bold">Préfecture</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 15;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-roles">Rôles</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-roles">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span class="h6 bold">Admin</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span class="h6 bold">Bureau d'études</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span class="h6 bold">Defaut</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span class="h6 bold">Editeur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span class="h6 bold">Entreprise</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div><span class="h6 bold">Lecteur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div><span class="h6 bold">Super</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 16;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 17;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 18;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 19;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-activiteTypesIds">Types d'activités</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-activiteTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (autorisations M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions W)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
- <!---->
- </label></div><span class="h6 bold">Rapport d'intensité d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
- <!---->
- </label></div><span class="h6 bold">Rapport environnemental d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
- <!---->
- </label></div><span class="h6 bold">Rapport financier d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
- <!---->
- </label></div><span class="h6 bold">Rapport social et économique d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
- <!---->
- </label></div><span class="h6 bold">Rapport trimestriel d'exploitation d'or en Guyane</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 20;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-activiteStatutsIds">Statuts d'activité</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-activiteStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 21;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesTypesIds">Types de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
- <!---->
- </label></div><span class="h6 bold">Amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
- <!---->
- </label></div><span class="h6 bold">Cession</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
- <!---->
- </label></div><span class="h6 bold">Conversion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
- <!---->
- </label></div><span class="h6 bold">Déchéance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">
- <!---->
- </label></div><span class="h6 bold">Demande de titre d'exploitation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_907" type="checkbox"><label class="fr-label" for="checkbox_907">
- <!---->
- </label></div><span class="h6 bold">Déplacement de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_547" type="checkbox"><label class="fr-label" for="checkbox_547">
- <!---->
- </label></div><span class="h6 bold">Extension de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_234" type="checkbox"><label class="fr-label" for="checkbox_234">
- <!---->
- </label></div><span class="h6 bold">Extension de substance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_280" type="checkbox"><label class="fr-label" for="checkbox_280">
- <!---->
- </label></div><span class="h6 bold">Fusion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_537" type="checkbox"><label class="fr-label" for="checkbox_537">
- <!---->
- </label></div><span class="h6 bold">Mutation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_184" type="checkbox"><label class="fr-label" for="checkbox_184">
- <!---->
- </label></div><span class="h6 bold">Mutation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_76" type="checkbox"><label class="fr-label" for="checkbox_76">
- <!---->
- </label></div><span class="h6 bold">Octroi</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_202" type="checkbox"><label class="fr-label" for="checkbox_202">
- <!---->
- </label></div><span class="h6 bold">Prolongation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div><span class="h6 bold">Prolongation 1</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_873" type="checkbox"><label class="fr-label" for="checkbox_873">
- <!---->
- </label></div><span class="h6 bold">Prolongation 2</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_113" type="checkbox"><label class="fr-label" for="checkbox_113">
- <!---->
- </label></div><span class="h6 bold">Prolongation exceptionnelle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_120" type="checkbox"><label class="fr-label" for="checkbox_120">
- <!---->
- </label></div><span class="h6 bold">Prorogation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_288" type="checkbox"><label class="fr-label" for="checkbox_288">
- <!---->
- </label></div><span class="h6 bold">Renonciation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_645" type="checkbox"><label class="fr-label" for="checkbox_645">
- <!---->
- </label></div><span class="h6 bold">Renonciation totale</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_903" type="checkbox"><label class="fr-label" for="checkbox_903">
- <!---->
- </label></div><span class="h6 bold">Résiliation anticipée d'amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_244" type="checkbox"><label class="fr-label" for="checkbox_244">
- <!---->
- </label></div><span class="h6 bold">Retrait</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 22;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-travauxTypesIds">Types de travaux</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-travauxTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_416" type="checkbox"><label class="fr-label" for="checkbox_416">
- <!---->
- </label></div><span class="h6 bold">Autorisation d'ouverture de travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'arrêt définitif des travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_983" type="checkbox"><label class="fr-label" for="checkbox_983">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'ouverture de travaux</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 23;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesStatutsIds">Statuts de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_694" type="checkbox"><label class="fr-label" for="checkbox_694">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_875" type="checkbox"><label class="fr-label" for="checkbox_875">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_339" type="checkbox"><label class="fr-label" for="checkbox_339">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_179" type="checkbox"><label class="fr-label" for="checkbox_179">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_480" type="checkbox"><label class="fr-label" for="checkbox_480">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_617" type="checkbox"><label class="fr-label" for="checkbox_617">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_877" type="checkbox"><label class="fr-label" for="checkbox_877">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_77" type="checkbox"><label class="fr-label" for="checkbox_77">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_181" type="checkbox"><label class="fr-label" for="checkbox_181">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_932" type="checkbox"><label class="fr-label" for="checkbox_932">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_344" type="checkbox"><label class="fr-label" for="checkbox_344">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_258" type="checkbox"><label class="fr-label" for="checkbox_258">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 24;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesInclues">Types d'étapes incluses</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesInclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 25;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesExclues">Types d'étapes exclues</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesExclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
</div>
</div>
-</nav>
\ No newline at end of file
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+</form>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
index bf900077c..2c3f55e8b 100644
--- a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
+++ b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
@@ -297,823 +297,1491 @@
</g>
</defs>
</svg>
-<nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+<form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+ <!---->
+ </h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsAdministration">Nom</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom de l'administration" class="fr-input" name="filtres_input_nomsAdministration" id="filtres_input_nomsAdministration" type="text" value="">
+ <!---->
+ </div>
<!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsUtilisateurs">Noms, prénoms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="..." class="fr-input" name="filtres_input_nomsUtilisateurs" id="filtres_input_nomsUtilisateurs" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_emails">Emails</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="filtres_input_emails" id="filtres_input_emails" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_communes">Communes</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Communes" class="fr-input" name="filtres_input_communes" id="filtres_input_communes" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsEntreprise">Nom / Siren / Siret</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="filtres_input_nomsEntreprise" id="filtres_input_nomsEntreprise" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-200"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-201"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_administrationIds">Administrations</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_administrationIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_administrationIds" type="text" name="filtres_autocomplete_administrationIds" style="outline: none;" placeholder="Administrations" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_administrationIds-control" aria-activedescendant="filtres_autocomplete_administrationIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_administrationIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_administrationIds-control-0"><span>Bureau de recherches géologiques et minières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-1"><span>Centre d'appui au contrôle de l'environnement marin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-2"><span>Ministère de l'Economie, des Finances et de la Relance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-3"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-4"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-5"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-6"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-7"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-8"><span>Ministère de la Cohésion des Territoires et des Relations avec les Collectivités Territoriales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-9"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-10"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-11"><span>Direction Générale des Territoires et de la Mer de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-12"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Auvergne-Rhône-Alpes - Siège de Lyon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-13"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bourgogne-Franche-Comté - Siège de Besançon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-14"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-15"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Centre-Val-de-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-16"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-17"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Grand Est - Siège de Metz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-18"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Hauts-de-France - Siège de Lille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-19"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Normandie - Siège de Rouen</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-20"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Nouvelle-Aquitaine - Siège de Poitiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-21"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Occitanie - Siège de Toulouse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-22"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-23"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Provence-Alpes-Côte-d'Azur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-24"><span>Direction régionale et interdépartementale de l'environnement et de l'énergie (DRIEE) - Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-25"><span>Gendarmerie Nationale - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-26"><span>Mission régionale autorité environnementale de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-27"><span>Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-28"><span>Pôle Technique Minier de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-29"><span>Préfecture - Ain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-30"><span>Préfecture - Aisne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-31"><span>Préfecture - Allier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-32"><span>Préfecture - Alpes-de-Haute-Provence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-33"><span>Préfecture - Alpes-Maritimes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-34"><span>Préfecture - Ardèche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-35"><span>Préfecture - Ardennes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-36"><span>Préfecture - Ariège</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-37"><span>Préfecture - Aube</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-38"><span>Préfecture - Aude</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-39"><span>Préfecture - Aveyron</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-40"><span>Préfecture - Bas-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-41"><span>Préfecture - Bouches-du-Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-42"><span>Préfecture - Calvados</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-43"><span>Préfecture - Cantal</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-44"><span>Préfecture - Charente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-45"><span>Préfecture - Charente-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-46"><span>Préfecture - Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-47"><span>Préfecture - Corrèze</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-48"><span>Préfecture - Corse-du-Sud</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-49"><span>Préfecture - Côte-d'Or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-50"><span>Préfecture - Côtes-d'Armor</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-51"><span>Préfecture - Creuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-52"><span>Préfecture - Deux-Sèvres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-53"><span>Préfecture - Dordogne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-54"><span>Préfecture - Doubs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-55"><span>Préfecture - Drôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-56"><span>Préfecture - Essonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-57"><span>Préfecture - Eure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-58"><span>Préfecture - Eure-et-Loir</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-59"><span>Préfecture - Finistère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-60"><span>Préfecture - Gard</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-61"><span>Préfecture - Gers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-62"><span>Préfecture - Gironde</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-63"><span>Préfecture - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-64"><span>Préfecture - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-65"><span>Préfecture - Haut-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-66"><span>Préfecture - Haute-Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-67"><span>Préfecture - Haute-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-68"><span>Préfecture - Haute-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-69"><span>Préfecture - Haute-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-70"><span>Préfecture - Haute-Saône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-71"><span>Préfecture - Haute-Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-72"><span>Préfecture - Haute-Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-73"><span>Préfecture - Hautes-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-74"><span>Préfecture - Hautes-Pyrénées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-75"><span>Préfecture - Hauts-de-Seine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-76"><span>Préfecture - Hérault</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-77"><span>Préfecture - Ille-et-Vilaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-78"><span>Préfecture - Indre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-79"><span>Préfecture - Indre-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-80"><span>Préfecture - Isère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-81"><span>Préfecture - Jura</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-82"><span>Préfecture - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-83"><span>Préfecture - Landes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-84"><span>Préfecture - Loir-et-Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-85"><span>Préfecture - Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-86"><span>Préfecture - Loire-Atlantique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-87"><span>Préfecture - Loiret</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-88"><span>Préfecture - Lot</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-89"><span>Préfecture - Lot-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-90"><span>Préfecture - Lozère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-91"><span>Préfecture - Maine-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-92"><span>Préfecture - Manche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-93"><span>Préfecture - Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-94"><span>Préfecture - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-95"><span>Préfecture - Mayenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-96"><span>Préfecture - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-97"><span>Préfecture - Meurthe-et-Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-98"><span>Préfecture - Meuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-99"><span>Préfecture - Morbihan</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-100"><span>Préfecture - Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-101"><span>Préfecture - Nièvre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-102"><span>Préfecture - Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-103"><span>Préfecture - Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-104"><span>Préfecture - Orne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-105"><span>Préfecture - Pas-de-Calais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-106"><span>Préfecture - Puy-de-Dôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-107"><span>Préfecture - Pyrénées-Atlantiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-108"><span>Préfecture - Pyrénées-Orientales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-109"><span>Préfecture - Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-110"><span>Préfecture - Saône-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-111"><span>Préfecture - Sarthe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-112"><span>Préfecture - Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-113"><span>Préfecture - Seine-et-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-114"><span>Préfecture - Seine-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-115"><span>Préfecture - Seine-Saint-Denis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-116"><span>Préfecture - Somme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-117"><span>Préfecture - Tarn</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-118"><span>Préfecture - Tarn-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-119"><span>Préfecture - Territoire de Belfort</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-120"><span>Préfecture - Val-d'Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-121"><span>Préfecture - Val-de-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-122"><span>Préfecture - Var</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-123"><span>Préfecture - Vaucluse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-124"><span>Préfecture - Vendée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-125"><span>Préfecture - Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-126"><span>Préfecture - Vosges</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-127"><span>Préfecture - Yonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-128"><span>Préfecture - Yvelines</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-129"><span>Préfecture de police de Paris</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_departements">Départements</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_departements_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_departements" type="text" name="filtres_autocomplete_departements" style="outline: none;" placeholder="Départements" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_departements-control" aria-activedescendant="filtres_autocomplete_departements-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_departements-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_departements-control-0"><span>Ain (01)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-1"><span>Aisne (02)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-2"><span>Allier (03)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-3"><span>Alpes-de-Haute-Provence (04)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-4"><span>Hautes-Alpes (05)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-5"><span>Alpes-Maritimes (06)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-6"><span>Ardèche (07)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-7"><span>Ardennes (08)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-8"><span>Ariège (09)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-9"><span>Aube (10)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-10"><span>Aude (11)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-11"><span>Aveyron (12)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-12"><span>Bouches-du-Rhône (13)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-13"><span>Calvados (14)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-14"><span>Cantal (15)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-15"><span>Charente (16)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-16"><span>Charente-Maritime (17)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-17"><span>Cher (18)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-18"><span>Corrèze (19)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-19"><span>Côte-d'Or (21)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-20"><span>Côtes-d'Armor (22)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-21"><span>Creuse (23)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-22"><span>Dordogne (24)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-23"><span>Doubs (25)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-24"><span>Drôme (26)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-25"><span>Eure (27)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-26"><span>Eure-et-Loir (28)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-27"><span>Finistère (29)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-28"><span>Corse-du-Sud (2A)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-29"><span>Haute-Corse (2B)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-30"><span>Gard (30)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-31"><span>Haute-Garonne (31)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-32"><span>Gers (32)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-33"><span>Gironde (33)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-34"><span>Hérault (34)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-35"><span>Ille-et-Vilaine (35)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-36"><span>Indre (36)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-37"><span>Indre-et-Loire (37)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-38"><span>Isère (38)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-39"><span>Jura (39)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-40"><span>Landes (40)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-41"><span>Loir-et-Cher (41)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-42"><span>Loire (42)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-43"><span>Haute-Loire (43)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-44"><span>Loire-Atlantique (44)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-45"><span>Loiret (45)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-46"><span>Lot (46)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-47"><span>Lot-et-Garonne (47)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-48"><span>Lozère (48)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-49"><span>Maine-et-Loire (49)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-50"><span>Manche (50)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-51"><span>Marne (51)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-52"><span>Haute-Marne (52)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-53"><span>Mayenne (53)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-54"><span>Meurthe-et-Moselle (54)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-55"><span>Meuse (55)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-56"><span>Morbihan (56)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-57"><span>Moselle (57)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-58"><span>Nièvre (58)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-59"><span>Nord (59)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-60"><span>Oise (60)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-61"><span>Orne (61)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-62"><span>Pas-de-Calais (62)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-63"><span>Puy-de-Dôme (63)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-64"><span>Pyrénées-Atlantiques (64)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-65"><span>Hautes-Pyrénées (65)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-66"><span>Pyrénées-Orientales (66)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-67"><span>Bas-Rhin (67)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-68"><span>Haut-Rhin (68)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-69"><span>Rhône (69)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-70"><span>Haute-Saône (70)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-71"><span>Saône-et-Loire (71)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-72"><span>Sarthe (72)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-73"><span>Savoie (73)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-74"><span>Haute-Savoie (74)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-75"><span>Paris (75)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-76"><span>Seine-Maritime (76)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-77"><span>Seine-et-Marne (77)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-78"><span>Yvelines (78)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-79"><span>Deux-Sèvres (79)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-80"><span>Somme (80)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-81"><span>Tarn (81)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-82"><span>Tarn-et-Garonne (82)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-83"><span>Var (83)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-84"><span>Vaucluse (84)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-85"><span>Vendée (85)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-86"><span>Vienne (86)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-87"><span>Haute-Vienne (87)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-88"><span>Vosges (88)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-89"><span>Yonne (89)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-90"><span>Territoire de Belfort (90)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-91"><span>Essonne (91)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-92"><span>Hauts-de-Seine (92)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-93"><span>Seine-Saint-Denis (93)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-94"><span>Val-de-Marne (94)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-95"><span>Val-d'Oise (95)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-96"><span>Guadeloupe (971)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-97"><span>Martinique (972)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-98"><span>Guyane (973)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-99"><span>La Réunion (974)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_departements-control-100"><span>Mayotte (976)</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_regions">Régions</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_regions_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_regions" type="text" name="filtres_autocomplete_regions" style="outline: none;" placeholder="Régions" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_regions-control" aria-activedescendant="filtres_autocomplete_regions-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_regions-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_regions-control-0"><span>Auvergne-Rhône-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-1"><span>Bourgogne-Franche-Comté</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-2"><span>Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-3"><span>Centre-Val de Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-4"><span>Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-5"><span>Grand Est</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-6"><span>Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-7"><span>Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-8"><span>Hauts-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-9"><span>Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-10"><span>La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-11"><span>Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-12"><span>Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-13"><span>Normandie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-14"><span>Nouvelle-Aquitaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-15"><span>Occitanie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-16"><span>Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_regions-control-17"><span>Provence-Alpes-Côte d'Azur</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_facadesMaritimes">Façades Maritimes</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_facadesMaritimes_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_facadesMaritimes" type="text" name="filtres_autocomplete_facadesMaritimes" style="outline: none;" placeholder="Façades Maritimes" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_facadesMaritimes-control" aria-activedescendant="filtres_autocomplete_facadesMaritimes-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_facadesMaritimes-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-0"><span>Manche Est - Mer du Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-1"><span>Méditerranée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-2"><span>Nord Atlantique - Manche Ouest</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_facadesMaritimes-control-3"><span>Sud Atlantique</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_annees">Années</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_annees_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_annees" type="text" name="filtres_autocomplete_annees" style="outline: none;" placeholder="Années" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_annees-control" aria-activedescendant="filtres_autocomplete_annees-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_annees-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_annees-control-0"><span>1997</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-1"><span>1998</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-2"><span>1999</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-3"><span>2000</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-4"><span>2001</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-5"><span>2002</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-6"><span>2003</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-7"><span>2004</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-8"><span>2005</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-9"><span>2006</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-10"><span>2007</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-11"><span>2008</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-12"><span>2009</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-13"><span>2010</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-14"><span>2011</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-15"><span>2012</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-16"><span>2013</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-17"><span>2014</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-18"><span>2015</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-19"><span>2016</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-20"><span>2017</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-21"><span>2018</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-22"><span>2019</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-23"><span>2020</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-24"><span>2021</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-25"><span>2022</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-26"><span>2023</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-27"><span>2024</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-28"><span>2025</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_administrationTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_administrationTypesIds">Type d'administration</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Autorité
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Dréal
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Ministère
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Opérateur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Préfecture
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Type d'administration" aria-label="Décocher toutes les cases à cocher Type d'administration" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Type d'administration" aria-label="Cocher toutes les cases à cocher Type d'administration" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_roles">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_roles">Rôles</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">Admin
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Bureau d'études
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">Defaut
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Editeur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">Entreprise
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">Lecteur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">Super
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Rôles" aria-label="Décocher toutes les cases à cocher Rôles" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Rôles" aria-label="Cocher toutes les cases à cocher Rôles" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_activiteTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_activiteTypesIds">Types d'activités</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">Rapport d'exploitation (autorisations M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Rapport d'exploitation (permis et concessions M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">Rapport d'exploitation (permis et concessions W)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">Rapport d'intensité d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">Rapport environnemental d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">Rapport financier d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">Rapport social et économique d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">Rapport trimestriel d'exploitation d'or en Guyane
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types d'activités" aria-label="Décocher toutes les cases à cocher Types d'activités" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types d'activités" aria-label="Cocher toutes les cases à cocher Types d'activités" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_activiteStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_activiteStatutsIds">Statuts d'activité</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts d'activité" aria-label="Décocher toutes les cases à cocher Statuts d'activité" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts d'activité" aria-label="Cocher toutes les cases à cocher Statuts d'activité" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesTypesIds">Types de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">Amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">Cession
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">Conversion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">Déchéance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">Demande de titre d'exploitation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">Déplacement de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">Extension de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">Extension de substance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">Fusion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">Mutation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">Mutation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_907" type="checkbox"><label class="fr-label" for="checkbox_907">Octroi
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_547" type="checkbox"><label class="fr-label" for="checkbox_547">Prolongation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_234" type="checkbox"><label class="fr-label" for="checkbox_234">Prolongation 1
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_280" type="checkbox"><label class="fr-label" for="checkbox_280">Prolongation 2
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_537" type="checkbox"><label class="fr-label" for="checkbox_537">Prolongation exceptionnelle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_184" type="checkbox"><label class="fr-label" for="checkbox_184">Prorogation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_76" type="checkbox"><label class="fr-label" for="checkbox_76">Renonciation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_202" type="checkbox"><label class="fr-label" for="checkbox_202">Renonciation totale
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Résiliation anticipée d'amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_873" type="checkbox"><label class="fr-label" for="checkbox_873">Retrait
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de démarche" aria-label="Décocher toutes les cases à cocher Types de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de démarche" aria-label="Cocher toutes les cases à cocher Types de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_travauxTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_travauxTypesIds">Types de travaux</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_113" type="checkbox"><label class="fr-label" for="checkbox_113">Autorisation d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_120" type="checkbox"><label class="fr-label" for="checkbox_120">Déclaration d'arrêt définitif des travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_288" type="checkbox"><label class="fr-label" for="checkbox_288">Déclaration d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de travaux" aria-label="Décocher toutes les cases à cocher Types de travaux" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de travaux" aria-label="Cocher toutes les cases à cocher Types de travaux" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesStatutsIds">Statuts de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_645" type="checkbox"><label class="fr-label" for="checkbox_645">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_903" type="checkbox"><label class="fr-label" for="checkbox_903">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_244" type="checkbox"><label class="fr-label" for="checkbox_244">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_416" type="checkbox"><label class="fr-label" for="checkbox_416">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_983" type="checkbox"><label class="fr-label" for="checkbox_983">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_694" type="checkbox"><label class="fr-label" for="checkbox_694">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_875" type="checkbox"><label class="fr-label" for="checkbox_875">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_339" type="checkbox"><label class="fr-label" for="checkbox_339">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_179" type="checkbox"><label class="fr-label" for="checkbox_179">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_480" type="checkbox"><label class="fr-label" for="checkbox_480">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_617" type="checkbox"><label class="fr-label" for="checkbox_617">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesInclues">Types d'étapes incluses</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesExclues">Types d'étapes exclues</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsAdministration">Nom</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsAdministration">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom de l'administration" class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsUtilisateurs">Noms, prénoms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsUtilisateurs">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="..." class="fr-input" name="input_670" id="input_670" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-emails">Emails</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-emails">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="input_74" id="input_74" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_878" id="input_878" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-communes">Communes</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-communes">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Communes" class="fr-input" name="input_967" id="input_967" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsEntreprise">Nom / Siren / Siret</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsEntreprise">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="input_25" id="input_25" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 6;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-administrationIds">Administrations</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Administrations_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Administrations" type="text" name="filters_autocomplete_Administrations" style="outline: none;" placeholder="Administrations" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 10;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-departements">Départements</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-departements">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Départements_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Départements" type="text" name="filters_autocomplete_Départements" style="outline: none;" placeholder="Départements" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 11;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-regions">Régions</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-regions">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Régions_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Régions" type="text" name="filters_autocomplete_Régions" style="outline: none;" placeholder="Régions" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 12;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-facadesMaritimes">Façades Maritimes</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-facadesMaritimes">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Façades Maritimes_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Façades Maritimes" type="text" name="filters_autocomplete_Façades Maritimes" style="outline: none;" placeholder="Façades Maritimes" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 13;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-annees">Années</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-annees">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Années_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Années" type="text" name="filters_autocomplete_Années" style="outline: none;" placeholder="Années" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 14;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-administrationTypesIds">Type d'administration</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div><span class="h6 bold">Autorité</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div><span class="h6 bold">Dréal</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Ministère</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span class="h6 bold">Opérateur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span class="h6 bold">Préfecture</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 15;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-roles">Rôles</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-roles">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span class="h6 bold">Admin</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span class="h6 bold">Bureau d'études</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span class="h6 bold">Defaut</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span class="h6 bold">Editeur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span class="h6 bold">Entreprise</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div><span class="h6 bold">Lecteur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div><span class="h6 bold">Super</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 16;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 17;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 18;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 19;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-activiteTypesIds">Types d'activités</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-activiteTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (autorisations M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions W)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
- <!---->
- </label></div><span class="h6 bold">Rapport d'intensité d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
- <!---->
- </label></div><span class="h6 bold">Rapport environnemental d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
- <!---->
- </label></div><span class="h6 bold">Rapport financier d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
- <!---->
- </label></div><span class="h6 bold">Rapport social et économique d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
- <!---->
- </label></div><span class="h6 bold">Rapport trimestriel d'exploitation d'or en Guyane</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 20;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-activiteStatutsIds">Statuts d'activité</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-activiteStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 21;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesTypesIds">Types de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
- <!---->
- </label></div><span class="h6 bold">Amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
- <!---->
- </label></div><span class="h6 bold">Cession</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
- <!---->
- </label></div><span class="h6 bold">Conversion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
- <!---->
- </label></div><span class="h6 bold">Déchéance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">
- <!---->
- </label></div><span class="h6 bold">Demande de titre d'exploitation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_907" type="checkbox"><label class="fr-label" for="checkbox_907">
- <!---->
- </label></div><span class="h6 bold">Déplacement de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_547" type="checkbox"><label class="fr-label" for="checkbox_547">
- <!---->
- </label></div><span class="h6 bold">Extension de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_234" type="checkbox"><label class="fr-label" for="checkbox_234">
- <!---->
- </label></div><span class="h6 bold">Extension de substance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_280" type="checkbox"><label class="fr-label" for="checkbox_280">
- <!---->
- </label></div><span class="h6 bold">Fusion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_537" type="checkbox"><label class="fr-label" for="checkbox_537">
- <!---->
- </label></div><span class="h6 bold">Mutation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_184" type="checkbox"><label class="fr-label" for="checkbox_184">
- <!---->
- </label></div><span class="h6 bold">Mutation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_76" type="checkbox"><label class="fr-label" for="checkbox_76">
- <!---->
- </label></div><span class="h6 bold">Octroi</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_202" type="checkbox"><label class="fr-label" for="checkbox_202">
- <!---->
- </label></div><span class="h6 bold">Prolongation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div><span class="h6 bold">Prolongation 1</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_873" type="checkbox"><label class="fr-label" for="checkbox_873">
- <!---->
- </label></div><span class="h6 bold">Prolongation 2</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_113" type="checkbox"><label class="fr-label" for="checkbox_113">
- <!---->
- </label></div><span class="h6 bold">Prolongation exceptionnelle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_120" type="checkbox"><label class="fr-label" for="checkbox_120">
- <!---->
- </label></div><span class="h6 bold">Prorogation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_288" type="checkbox"><label class="fr-label" for="checkbox_288">
- <!---->
- </label></div><span class="h6 bold">Renonciation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_645" type="checkbox"><label class="fr-label" for="checkbox_645">
- <!---->
- </label></div><span class="h6 bold">Renonciation totale</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_903" type="checkbox"><label class="fr-label" for="checkbox_903">
- <!---->
- </label></div><span class="h6 bold">Résiliation anticipée d'amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_244" type="checkbox"><label class="fr-label" for="checkbox_244">
- <!---->
- </label></div><span class="h6 bold">Retrait</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 22;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-travauxTypesIds">Types de travaux</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-travauxTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_416" type="checkbox"><label class="fr-label" for="checkbox_416">
- <!---->
- </label></div><span class="h6 bold">Autorisation d'ouverture de travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'arrêt définitif des travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_983" type="checkbox"><label class="fr-label" for="checkbox_983">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'ouverture de travaux</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 23;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesStatutsIds">Statuts de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_694" type="checkbox"><label class="fr-label" for="checkbox_694">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_875" type="checkbox"><label class="fr-label" for="checkbox_875">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_339" type="checkbox"><label class="fr-label" for="checkbox_339">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_179" type="checkbox"><label class="fr-label" for="checkbox_179">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_480" type="checkbox"><label class="fr-label" for="checkbox_480">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_617" type="checkbox"><label class="fr-label" for="checkbox_617">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_877" type="checkbox"><label class="fr-label" for="checkbox_877">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_77" type="checkbox"><label class="fr-label" for="checkbox_77">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_181" type="checkbox"><label class="fr-label" for="checkbox_181">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_932" type="checkbox"><label class="fr-label" for="checkbox_932">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_344" type="checkbox"><label class="fr-label" for="checkbox_344">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_258" type="checkbox"><label class="fr-label" for="checkbox_258">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 24;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesInclues">Types d'étapes incluses</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesInclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 25;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesExclues">Types d'étapes exclues</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesExclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
</div>
</div>
-</nav>
\ No newline at end of file
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+</form>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_CustomWithValues.html b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_CustomWithValues.html
index 4318676f3..213474dcd 100644
--- a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_CustomWithValues.html
+++ b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_CustomWithValues.html
@@ -1,38 +1,233 @@
-<nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+<form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+ <!---->
+ </h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsAdministration">Nom</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom de l'administration" class="fr-input" name="filtres_input_nomsAdministration" id="filtres_input_nomsAdministration" type="text" value="test">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer argent" aria-label="Supprimer argent">argent</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer or" aria-label="Supprimer or">or</button><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
<!---->
</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: -1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsAdministration">Nom</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsAdministration">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom de l'administration" class="fr-input" name="input_271" id="input_271" type="text" value="test">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: -1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="argent" aria-label="argent">argent</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="or" aria-label="or">or</button><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
</div>
</div>
-</nav>
\ No newline at end of file
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+</form>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_WithoutValue.html b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_WithoutValue.html
index f12d4a87a..12a731986 100644
--- a/packages/ui/src/components/_ui/filters/filters.stories_snapshots_WithoutValue.html
+++ b/packages/ui/src/components/_ui/filters/filters.stories_snapshots_WithoutValue.html
@@ -1,25 +1,20 @@
-<nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+<form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres
+ <!---->
+ </h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsAdministration">Nom</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom de l'administration" class="fr-input" name="filtres_input_nomsAdministration" id="filtres_input_nomsAdministration" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
<!---->
</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsAdministration">Nom</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsAdministration">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom de l'administration" class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
</div>
</div>
-</nav>
\ No newline at end of file
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+</form>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/filters/filters.tsx b/packages/ui/src/components/_ui/filters/filters.tsx
index 55f3636bf..ce28076e7 100644
--- a/packages/ui/src/components/_ui/filters/filters.tsx
+++ b/packages/ui/src/components/_ui/filters/filters.tsx
@@ -19,6 +19,7 @@ import { CaminoRouteLocation, CaminoRouteNames, CaminoVueRoute } from '@/router/
import { CaminoRouter } from '@/typings/vue-router'
import { DsfrButton } from '../dsfr-button'
import { createDebounce } from '@/utils/debounce'
+import { fr } from '@codegouvfr/react-dsfr'
type FormatedLabel = { id: CaminoFiltre; name: string; value: string | string[] | FilterEtapeValue; valueName?: string | string[] }
@@ -96,6 +97,10 @@ export const getInitialFiltres = (route: CaminoRouteLocation, filters: readonly
return allValues
}
+const getId = (filtreId: CaminoFiltre): string => {
+ const filtre = caminoFiltres[filtreId]
+ return `filtres_${filtre.type}_${filtre.id}`
+}
export const Filters = defineComponent((props: Props) => {
const urlQuery = computed<CaminoVueRoute<CaminoRouteNames>>(() => {
const filtres = { ...nonValidatedValues.value }
@@ -207,41 +212,51 @@ export const Filters = defineComponent((props: Props) => {
})
}
+ const sortedFilters = computed(() => {
+ return props.filters
+ .map((filter, index) => ({ filter, order: isNotNullNorUndefinedNorEmpty(initialFiltres[filter]) ? -1 : index }))
+ .sort((a, b) => a.order - b.order)
+ .map(({ filter }) => filter)
+ })
return () => (
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w">
- <button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">
- Filtres
- </button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">
- Filtres {props.subtitle}
- </div>
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">
+ Filtres {props.subtitle}
+ </h1>
- <ul class="fr-sidemenu__list" style={{ display: 'flex', flexDirection: 'column' }}>
- {props.filters.map((filter, index) => (
- <li class="fr-sidemenu__item" key={filter} style={{ order: isNotNullNorUndefinedNorEmpty(initialFiltres[filter]) ? -1 : index }}>
- <button class="fr-sidemenu__btn" aria-expanded={index < 6 || isNotNullNorUndefinedNorEmpty(nonValidatedValues.value[filter])} aria-controls={`fr-sidemenu-item-${filter}`}>
+ <div style={{ display: 'flex', flexDirection: 'column' }}>
+ {sortedFilters.value.map(filter => (
+ <>
+ {caminoFiltres[filter].type === 'checkboxes' ? (
+ <fieldset class={fr.cx('fr-fieldset')} aria-labelledby={getId(filter)}>
+ <legend class={[fr.cx('fr-fieldset__legend--regular', 'fr-fieldset__legend', 'fr-text--bold', 'fr-pb-0')]} id={getId(filter)}>
{caminoFiltres[filter].name}
- </button>
- <div class={['fr-collapse', 'filter-collapsable']} id={`fr-sidemenu-item-${filter}`}>
- <DisplayFiltre filtre={filter} nonValidatedValues={nonValidatedValues} apiClient={props.apiClient} entreprises={props.entreprises} />
+ </legend>
+ <DisplayFiltre id={getId(filter)} filtre={filter} nonValidatedValues={nonValidatedValues} apiClient={props.apiClient} entreprises={props.entreprises} />
+ </fieldset>
+ ) : (
+ <div>
+ <div class={[fr.cx('fr-mb-1w', 'fr-text--bold', 'fr-text--md')]}>
+ <label for={getId(filter)}>{caminoFiltres[filter].name}</label>
</div>
- </li>
- ))}
- </ul>
- <div style={{ display: 'flex', justifyContent: 'end' }} class="fr-mt-2w">
- <DsfrButton buttonType="secondary" icon={undefined} title="Réinitialiser les filtres" onClick={labelsReset} />
- </div>
- </div>
+ <DisplayFiltre id={getId(filter)} filtre={filter} nonValidatedValues={nonValidatedValues} apiClient={props.apiClient} entreprises={props.entreprises} />
+ </div>
+ )}
+ </>
+ ))}
+ </div>
+
+ <div style={{ display: 'flex', justifyContent: 'end' }} class="fr-mt-2w">
+ <DsfrButton buttonType="secondary" icon={undefined} title="Réinitialiser les filtres" onClick={labelsReset} />
</div>
- </nav>
+ </form>
)
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
Filters.props = ['filters', 'subtitle', 'validate', 'class', 'route', 'updateUrlQuery', 'apiClient', 'entreprises']
type MyProp = {
+ id: string
filtre: CaminoFiltre
nonValidatedValues: Ref<{ [key in CaminoFiltre]: (typeof caminoFiltres)[key]['validator']['_output'] }>
apiClient: Pick<ApiClient, 'titresRechercherByNom' | 'getTitresByIds'>
@@ -254,9 +269,10 @@ const DisplayFiltre: FunctionalComponent<MyProp> = props => {
}
return (
- <div class="fr-py-2w">
+ <div class={[fr.cx('fr-pb-2w', 'fr-fieldset__element', 'fr-mb-0', 'fr-pt-0')]}>
{isInputCaminoFiltre(props.filtre) ? (
<FiltersInput
+ id={props.id}
filter={props.filtre}
initialValue={props.nonValidatedValues.value[props.filtre]}
onFilterInput={value => {
@@ -266,6 +282,7 @@ const DisplayFiltre: FunctionalComponent<MyProp> = props => {
) : null}
{isAutocompleteCaminoFiltre(props.filtre) ? (
<InputAutocomplete
+ id={props.id}
entreprises={props.entreprises}
filter={props.filtre}
apiClient={props.apiClient}
diff --git a/packages/ui/src/components/_ui/functional-popup.tsx b/packages/ui/src/components/_ui/functional-popup.tsx
index 533a49fde..4b6731ea1 100644
--- a/packages/ui/src/components/_ui/functional-popup.tsx
+++ b/packages/ui/src/components/_ui/functional-popup.tsx
@@ -3,6 +3,8 @@ import { Teleport, computed, defineComponent, onBeforeUnmount, onMounted, ref }
import { LoadingElement } from './functional-loader'
import type { JSX } from 'vue/jsx-runtime'
import { CaminoError } from 'camino-common/src/zod-tools'
+import { createFocusTrap, FocusTrap } from 'focus-trap'
+import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
interface Props<T> {
id?: string
@@ -20,7 +22,8 @@ export const FunctionalPopup = defineComponent(<T,>(props: Props<T>) => {
const canValidate = computed<boolean>(() => {
return props.canValidate
})
-
+ const dialogRef = ref<HTMLDialogElement | null>(null)
+ const trap = ref<FocusTrap | null>(null)
const id = props.id ?? 'monId'
const text = props.validate.text ?? 'Enregistrer'
@@ -66,10 +69,21 @@ export const FunctionalPopup = defineComponent(<T,>(props: Props<T>) => {
onMounted(async () => {
document.addEventListener('keyup', keyUp)
+ if (isNotNullNorUndefined(dialogRef.value)) {
+ if (!devMode) {
+ trap.value = createFocusTrap(dialogRef.value)
+ trap.value.activate()
+ }
+ } else {
+ console.error("Impossible de mettre en place focus-trap, le composant de dialogue n'est pas présent")
+ }
})
onBeforeUnmount(() => {
document.removeEventListener('keyup', keyUp)
+ if (isNotNullNorUndefined(trap.value)) {
+ trap.value.deactivate()
+ }
})
const stopPropagation = (e: Event) => {
@@ -82,7 +96,7 @@ export const FunctionalPopup = defineComponent(<T,>(props: Props<T>) => {
// TODO 2023-11-28 ici on interdit le teleport dans le cas de vitest pour que les snapshots soient présentes. On a pas trouvé mieux à cette date
<Teleport to="body" disabled={devMode}>
<div>
- <dialog id={id} class="fr-modal fr-modal--opened" open={true} aria-modal={true} role="dialog" aria-labelledby={`${id}-title`} onClick={props.close} style={{ zIndex: 1000001 }}>
+ <dialog ref={dialogRef} id={id} class="fr-modal fr-modal--opened" open={true} aria-modal={true} role="dialog" aria-labelledby={`${id}-title`} onClick={props.close} style={{ zIndex: 1000001 }}>
<div class="fr-container fr-container--fluid fr-container-md" onClick={stopPropagation}>
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
diff --git a/packages/ui/src/components/_ui/label-with-value.tsx b/packages/ui/src/components/_ui/label-with-value.tsx
index 8e4b0ef02..100d0e182 100644
--- a/packages/ui/src/components/_ui/label-with-value.tsx
+++ b/packages/ui/src/components/_ui/label-with-value.tsx
@@ -1,3 +1,4 @@
+import { fr } from '@codegouvfr/react-dsfr'
import { capitalize } from 'camino-common/src/strings'
import { HTMLAttributes, FunctionalComponent } from 'vue'
import type { JSX } from 'vue/jsx-runtime'
@@ -14,11 +15,11 @@ type Props = (TextProp | ItemProp) & {
}
export const LabelWithValue: FunctionalComponent<Props> = props => {
return (
- <div class="fr-grid-row">
- <span class="fr-col-3 fr-h6" style={{ margin: 0 }}>
+ <div class={[fr.cx('fr-grid-row')]}>
+ <span class={[fr.cx('fr-col-12'), fr.cx('fr-col-sm-3'), fr.cx('fr-h6')]} style={{ margin: 0 }}>
{capitalize(props.title)}
</span>
- <span class="fr-col">{'text' in props ? <>{capitalize(props.text)}</> : <>{props.item}</>}</span>
+ <span class={[fr.cx('fr-col-12'), fr.cx('fr-col-sm')]}>{'text' in props ? capitalize(props.text) : props.item}</span>
</div>
)
}
diff --git a/packages/ui/src/components/_ui/tabs.tsx b/packages/ui/src/components/_ui/tabs.tsx
index 4672dee90..7e89936c1 100644
--- a/packages/ui/src/components/_ui/tabs.tsx
+++ b/packages/ui/src/components/_ui/tabs.tsx
@@ -20,6 +20,7 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
const idSuffix = `${(random() * 1000).toFixed()}`
const getHtmlTabId = (tabId: TabId) => `tabpanel-${tabId}-${idSuffix}-panel`
+ const getButtonTabId = (tabId: TabId) => `tabpanel-${tabId}-${idSuffix}`
const panelHeight = ref<number>(0)
@@ -39,6 +40,16 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
const tabsIndex = props.tabs.reduce<Record<TabId, number>>((acc, tab, index) => ({ ...acc, [tab.id]: index }), {} as Record<TabId, number>)
+ const changeTabOnArrowKey = (event: KeyboardEvent) => {
+ if (event.code === 'ArrowRight') {
+ const nextIndex = tabsIndex[currentTabId.value] + 1
+ onTabClick(props.tabs[nextIndex % props.tabs.length].id)()
+ }
+ if (event.code === 'ArrowLeft') {
+ const nextIndex = tabsIndex[currentTabId.value] - 1
+ onTabClick(props.tabs[nextIndex >= 0 ? nextIndex : props.tabs.length - 1].id)()
+ }
+ }
const observeCurrentTab = () => {
const currentTabRef = document.getElementById(getHtmlTabId(currentTabId.value))
if (isNotNullNorUndefined(currentTabRef)) {
@@ -48,8 +59,10 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
const onTabClick = (tabId: TabId) => () => {
observer.disconnect()
currentTabId.value = tabId
+ const buttonTabRef = document.getElementById(getButtonTabId(currentTabId.value))
props.tabClicked(tabId)
observeCurrentTab()
+ buttonTabRef?.focus()
}
onMounted(() => {
@@ -67,11 +80,12 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
{props.tabs.map(tab => (
<li role="presentation">
<button
- id={`tabpanel-${tab.id}-${idSuffix}`}
+ id={getButtonTabId(tab.id)}
class={['fr-tabs__tab', tab.icon, tab.icon !== null ? 'fr-tabs__tab--icon-left' : '']}
tabindex={currentTabId.value === tab.id ? '0' : '-1'}
role="tab"
onClick={onTabClick(tab.id)}
+ onKeydown={changeTabOnArrowKey}
aria-label={tab.title}
aria-selected={currentTabId.value === tab.id ? 'true' : 'false'}
aria-controls={`tabpanel-${tab.id}-${idSuffix}-panel`}
diff --git a/packages/ui/src/components/_ui/typeahead-multiple.tsx b/packages/ui/src/components/_ui/typeahead-multiple.tsx
index 65a2dddcc..6e5d4e2ec 100644
--- a/packages/ui/src/components/_ui/typeahead-multiple.tsx
+++ b/packages/ui/src/components/_ui/typeahead-multiple.tsx
@@ -4,6 +4,7 @@ import { isEventWithTarget, random, 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'
+import { fr } from '@codegouvfr/react-dsfr'
type TypeAheadRecord = Record<string | symbol | number, any>
type Props<T extends TypeAheadRecord, K extends keyof T> = {
@@ -88,7 +89,7 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
}
const onArrowDown = () => {
- if (isListVisible.value && currentSelectionIndex.value < props.props.items.length - 1) {
+ if (isListVisible.value && currentSelectionIndex.value < notSelectedItems.value.length - 1) {
currentSelectionIndex.value++
}
scrollSelectionIntoView()
@@ -117,7 +118,7 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
input.value = ''
currentSelectionIndex.value = 0
- document.getElementById(id)?.blur()
+ document.getElementById(id)?.focus()
selectedItems.value.push(item)
@@ -134,11 +135,22 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
myTypeaheadInput?.value?.focus?.()
}
+ const focusInput = (event: MouseEvent) => {
+ myTypeaheadInput?.value?.focus?.()
+ event.stopPropagation()
+ }
+
return () => (
<div id={wrapperId.value} class={[styles.typeahead]}>
- <div style={{ display: 'flex', maxHeight: 'unset', flexWrap: 'wrap', gap: '8px', outlineOffset: '2px', outlineWidth: '2px', outlineColor: '#0a76f6' }} class={['fr-input', styles['fake-input']]}>
+ <div
+ style={{ display: 'flex', maxHeight: 'unset', flexWrap: 'wrap', gap: '8px', outlineOffset: '2px', outlineWidth: '2px', outlineColor: '#0a76f6' }}
+ class={[fr.cx('fr-input'), styles['fake-input']]}
+ onClick={focusInput}
+ >
{selectedItems.value.map(item => {
- return <DsfrTag key={item[props.props.itemKey]} ariaLabel={props.props.itemChipLabel(item)} tagSize="sm" onClicked={unselectItem(item)} />
+ return (
+ <DsfrTag key={item[props.props.itemKey]} label={props.props.itemChipLabel(item)} ariaLabel={`Supprimer ${props.props.itemChipLabel(item)}`} tagSize="sm" onClicked={unselectItem(item)} />
+ )
})}
<input
@@ -153,6 +165,11 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
onInput={onInput}
onFocus={onFocus}
onBlur={onBlur}
+ role="combobox"
+ aria-controls={`${id}-control`}
+ aria-activedescendant={isListVisible.value ? `${id}-control-${currentSelectionIndex.value}` : `${id}-control`}
+ aria-expanded={isListVisible.value}
+ aria-autocomplete="list"
onKeydown={payload => {
// TODO 2023-06-19 il doit bien y avoir une enum quelque part dans la lib du dom avec la liste des keys non ?
// Oui --> https://github.com/Moh-Snoussi/keyboard-event-key-type
@@ -182,23 +199,23 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
}}
/>
</div>
- {isListVisible.value ? (
- <div class={styles['typeahead-list']}>
- {notSelectedItems.value.map((item, index) => {
- return (
- <div
- key={index}
- class={`${styles['typeahead-list-item']} ${currentSelectionIndex.value === index ? styles['typeahead-list-item-active'] : ''}`}
- onMousedown={payload => payload.preventDefault()}
- onClick={() => selectItem(item)}
- onMouseenter={() => (currentSelectionIndex.value = index)}
- >
- {props.props.displayItemInList ? props.props.displayItemInList(item) : <span>{props.props.itemChipLabel(item)}</span>}
- </div>
- )
- })}
- </div>
- ) : null}
+ <ul class={`${styles['typeahead-list']} ${isListVisible.value ? styles['typeahead-list--visible'] : ''}`} tabindex="-1" id={`${id}-control`} role="listbox">
+ {notSelectedItems.value.map((item, index) => {
+ return (
+ <li
+ key={index}
+ class={`${styles['typeahead-list-item']} ${currentSelectionIndex.value === index ? styles['typeahead-list-item-active'] : ''}`}
+ onMousedown={payload => payload.preventDefault()}
+ onClick={() => selectItem(item)}
+ onMouseenter={() => (currentSelectionIndex.value = index)}
+ aria-selected={isListVisible.value && currentSelectionIndex.value === index}
+ id={`${id}-control-${index}`}
+ >
+ {props.props.displayItemInList ? props.props.displayItemInList(item) : <span>{props.props.itemChipLabel(item)}</span>}
+ </li>
+ )
+ })}
+ </ul>
</div>
)
})
diff --git a/packages/ui/src/components/_ui/typeahead-single.tsx b/packages/ui/src/components/_ui/typeahead-single.tsx
index 69e971494..1b3621b6d 100644
--- a/packages/ui/src/components/_ui/typeahead-single.tsx
+++ b/packages/ui/src/components/_ui/typeahead-single.tsx
@@ -93,7 +93,7 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
}
const onArrowDown = () => {
- if (isListVisible.value && currentSelectionIndex.value < props.props.items.length - 1) {
+ if (isListVisible.value && currentSelectionIndex.value < props.props.items.length - 1 - (selectedItem.value !== null ? 1 : 0)) {
currentSelectionIndex.value++
}
scrollSelectionIntoView()
@@ -124,7 +124,7 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
input.value = props.props.itemChipLabel(item)
currentSelectionIndex.value = 0
- document.getElementById(id)?.blur()
+ document.getElementById(id)?.focus()
selectedItem.value = item
@@ -150,6 +150,7 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
ref={myTypeaheadInput}
value={input.value}
type="text"
+ title={props.props.placeholder}
name={id}
disabled={props.disabled}
class={'fr-input'}
@@ -158,6 +159,11 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
onInput={onInput}
onFocus={onFocus}
onBlur={onBlur}
+ role="combobox"
+ aria-controls={`${id}-control`}
+ aria-activedescendant={isListVisible.value ? `${id}-control-${currentSelectionIndex.value}` : `${id}-control`}
+ aria-expanded={isListVisible.value}
+ aria-autocomplete="list"
onKeydown={payload => {
// TODO 2023-06-19 il doit bien y avoir une enum quelque part dans la lib du dom avec la liste des keys non ?
// Oui --> https://github.com/Moh-Snoussi/keyboard-event-key-type
@@ -187,23 +193,23 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
}}
/>
</div>
- {isListVisible.value ? (
- <div class={styles['typeahead-list']}>
- {notSelectedItems.value.map((item, index) => {
- return (
- <div
- key={index}
- class={`${styles['typeahead-list-item']} ${currentSelectionIndex.value === index ? styles['typeahead-list-item-active'] : ''}`}
- onMousedown={payload => payload.preventDefault()}
- onClick={() => selectItem(item)}
- onMouseenter={() => (currentSelectionIndex.value = index)}
- >
- {props.props.displayItemInList ? props.props.displayItemInList(item) : <span>{props.props.itemChipLabel(item)}</span>}
- </div>
- )
- })}
- </div>
- ) : null}
+ <ul class={`${styles['typeahead-list']} ${isListVisible.value ? styles['typeahead-list--visible'] : ''}`} tabindex="-1" id={`${id}-control`} role="listbox">
+ {notSelectedItems.value.map((item, index) => {
+ return (
+ <li
+ key={index}
+ class={`${styles['typeahead-list-item']} ${currentSelectionIndex.value === index ? styles['typeahead-list-item-active'] : ''}`}
+ onMousedown={payload => payload.preventDefault()}
+ onClick={() => selectItem(item)}
+ onMouseenter={() => (currentSelectionIndex.value = index)}
+ aria-selected={isListVisible.value && currentSelectionIndex.value === index}
+ id={`${id}-control-${index}`}
+ >
+ {props.props.displayItemInList ? props.props.displayItemInList(item) : <span>{props.props.itemChipLabel(item)}</span>}
+ </li>
+ )
+ })}
+ </ul>
</div>
)
})
diff --git a/packages/ui/src/components/_ui/typeahead-smart-multiple.tsx b/packages/ui/src/components/_ui/typeahead-smart-multiple.tsx
index 151f4cef3..c498e72e3 100644
--- a/packages/ui/src/components/_ui/typeahead-smart-multiple.tsx
+++ b/packages/ui/src/components/_ui/typeahead-smart-multiple.tsx
@@ -22,6 +22,7 @@ export type Filter<T extends string> = {
name: string
} & (LocalFilter | RemoteFilter<T>)
type Props<T extends string> = {
+ id: string
filter: Filter<T>
onSelectItems: (e: Element<T>[]) => void
}
@@ -105,7 +106,7 @@ export const TypeAheadSmartMultiple = defineComponent(<ID extends string>(props:
<TypeAheadMultiple
overrideItems={overrideItems.value}
props={{
- id: 'filters_autocomplete_' + props.filter.name,
+ id: props.id,
itemKey: 'id',
placeholder: props.filter.name,
items: items.value,
@@ -119,4 +120,4 @@ export const TypeAheadSmartMultiple = defineComponent(<ID extends string>(props:
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-TypeAheadSmartMultiple.props = ['filter', 'onSelectItems']
+TypeAheadSmartMultiple.props = ['id', 'filter', 'onSelectItems']
diff --git a/packages/ui/src/components/_ui/typeahead.module.css b/packages/ui/src/components/_ui/typeahead.module.css
index f38664415..ac061d509 100644
--- a/packages/ui/src/components/_ui/typeahead.module.css
+++ b/packages/ui/src/components/_ui/typeahead.module.css
@@ -2,6 +2,9 @@
position: relative;
width: 100%;
}
+.fake-input {
+ cursor: text;
+}
.fake-input:focus-within {
outline-style: solid;
@@ -9,13 +12,26 @@
.typeahead .typeahead-list {
position: absolute;
- width: 100%;
border: none;
- max-height: 400px;
- overflow-y: auto;
border-bottom: 1px solid var(--grey-900-175);
z-index: 100001;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ width: 1px;
+ height: 1px;
+ visibility: hidden;
+ overflow: hidden;
+}
+
+.typeahead .typeahead-list--visible {
+ visibility: visible;
+ width: 100%;
+ height: auto;
+ max-height: 400px;
+ overflow-y: auto;
}
+
.typeahead .typeahead-list .typeahead-list-item {
cursor: pointer;
background-color: var(--grey-1000-50);
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_Multiple.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_Multiple.html
index 84d8c4ebb..2e742542b 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_Multiple.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_Multiple.html
@@ -1,4 +1,20 @@
<div id="plop_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="plop-control" aria-activedescendant="plop-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="plop-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="plop-control-0"><span>titreItem1</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-1"><span>titreItem2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-2"><span>titreItem3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-3"><span>titreItem4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-4"><span>titreItem5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-5"><span>titreItem6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-6"><span>titreItem7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-7"><span>titreItem8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-8"><span>titreItem9</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-9"><span>titreItem10</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-10"><span>titreItem11</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-11"><span>titreItem12</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-12"><span>titreItem13</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-13"><span>titreItem14</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-14"><span>titreItem15</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleAlwaysOpen.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleAlwaysOpen.html
index 09b97b294..94ab6e0ef 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleAlwaysOpen.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleAlwaysOpen.html
@@ -1,20 +1,20 @@
<div id="plop_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" value=""></div>
- <div class="_typeahead-list_8eddf1">
- <div class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1"><span>titreItem1</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem2</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem3</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem4</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem5</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem6</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem7</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem8</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem9</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem10</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem11</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem12</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem13</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem14</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem15</span></div>
- </div>
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="plop-control" aria-activedescendant="plop-control-0" aria-expanded="true" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="plop-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="plop-control-0"><span>titreItem1</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-1"><span>titreItem2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-2"><span>titreItem3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-3"><span>titreItem4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-4"><span>titreItem5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-5"><span>titreItem6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-6"><span>titreItem7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-7"><span>titreItem8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-8"><span>titreItem9</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-9"><span>titreItem10</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-10"><span>titreItem11</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-11"><span>titreItem12</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-12"><span>titreItem13</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-13"><span>titreItem14</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-14"><span>titreItem15</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithALotOfItemsSelected.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithALotOfItemsSelected.html
index fcccd420b..416045883 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithALotOfItemsSelected.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithALotOfItemsSelected.html
@@ -1,4 +1,9 @@
<div id="plop_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem1" aria-label="titreItem1">titreItem1</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem2" aria-label="titreItem2">titreItem2</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem3" aria-label="titreItem3">titreItem3</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem4" aria-label="titreItem4">titreItem4</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem5" aria-label="titreItem5">titreItem5</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem6" aria-label="titreItem6">titreItem6</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem7" aria-label="titreItem7">titreItem7</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem8" aria-label="titreItem8">titreItem8</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem9" aria-label="titreItem9">titreItem9</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem10" aria-label="titreItem10">titreItem10</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem11" aria-label="titreItem11">titreItem11</button><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem1" aria-label="Supprimer titreItem1">titreItem1</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem2" aria-label="Supprimer titreItem2">titreItem2</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem3" aria-label="Supprimer titreItem3">titreItem3</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem4" aria-label="Supprimer titreItem4">titreItem4</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem5" aria-label="Supprimer titreItem5">titreItem5</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem6" aria-label="Supprimer titreItem6">titreItem6</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem7" aria-label="Supprimer titreItem7">titreItem7</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem8" aria-label="Supprimer titreItem8">titreItem8</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem9" aria-label="Supprimer titreItem9">titreItem9</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem10" aria-label="Supprimer titreItem10">titreItem10</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem11" aria-label="Supprimer titreItem11">titreItem11</button><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="plop-control" aria-activedescendant="plop-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="plop-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="plop-control-0"><span>titreItem12</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-1"><span>titreItem13</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-2"><span>titreItem14</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-3"><span>titreItem15</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItems.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItems.html
index 6d48eee30..5d197d8ce 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItems.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItems.html
@@ -1,4 +1,18 @@
<div id="plop_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem1" aria-label="titreItem1">titreItem1</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem2" aria-label="titreItem2">titreItem2</button><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem1" aria-label="Supprimer titreItem1">titreItem1</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem2" aria-label="Supprimer titreItem2">titreItem2</button><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="plop-control" aria-activedescendant="plop-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="plop-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="plop-control-0"><span>titreItem3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-1"><span>titreItem4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-2"><span>titreItem5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-3"><span>titreItem6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-4"><span>titreItem7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-5"><span>titreItem8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-6"><span>titreItem9</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-7"><span>titreItem10</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-8"><span>titreItem11</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-9"><span>titreItem12</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-10"><span>titreItem13</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-11"><span>titreItem14</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-12"><span>titreItem15</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItemsAlwaysOpen.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItemsAlwaysOpen.html
index b67bb5eb9..499806c01 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItemsAlwaysOpen.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_MultipleWithInitialItemsAlwaysOpen.html
@@ -1,18 +1,18 @@
<div id="plop_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem1" aria-label="titreItem1">titreItem1</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="titreItem2" aria-label="titreItem2">titreItem2</button><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" value=""></div>
- <div class="_typeahead-list_8eddf1">
- <div class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1"><span>titreItem3</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem4</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem5</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem6</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem7</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem8</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem9</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem10</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem11</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem12</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem13</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem14</span></div>
- <div class="_typeahead-list-item_8eddf1 "><span>titreItem15</span></div>
- </div>
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem1" aria-label="Supprimer titreItem1">titreItem1</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer titreItem2" aria-label="Supprimer titreItem2">titreItem2</button><input id="plop" type="text" name="plop" style="outline: none;" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="plop-control" aria-activedescendant="plop-control-0" aria-expanded="true" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="plop-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="plop-control-0"><span>titreItem3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-1"><span>titreItem4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-2"><span>titreItem5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-3"><span>titreItem6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-4"><span>titreItem7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-5"><span>titreItem8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-6"><span>titreItem9</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-7"><span>titreItem10</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-8"><span>titreItem11</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-9"><span>titreItem12</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-10"><span>titreItem13</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-11"><span>titreItem14</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="plop-control-12"><span>titreItem15</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_Single.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_Single.html
index c2fa5fbf2..20f07c071 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_Single.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_Single.html
@@ -1,4 +1,8 @@
<div id="ello_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="ello" type="text" name="ello" class="fr-input" placeholder="placeholder" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="ello" type="text" title="placeholder" name="ello" class="fr-input" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="ello-control" aria-activedescendant="ello-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="ello-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="ello-control-0"><span>titreItem1</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="ello-control-1"><span>titreItem2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="ello-control-2"><span>titreItem3</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleDisabled.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleDisabled.html
index 368aa3c1b..d98dc4cf3 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleDisabled.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleDisabled.html
@@ -1,4 +1,7 @@
<div id="ello_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="ello" type="text" name="ello" disabled="" class="fr-input" placeholder="placeholder" autocomplete="off" value="titreItem1"></div>
- <!---->
+ <div class="flex"><input id="ello" type="text" title="placeholder" name="ello" disabled="" class="fr-input" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="ello-control" aria-activedescendant="ello-control" aria-expanded="false" aria-autocomplete="list" value="titreItem1"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="ello-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="ello-control-0"><span>titreItem2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="ello-control-1"><span>titreItem3</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleWithInitialItem.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleWithInitialItem.html
index 0a9d0d0d2..870c6ef80 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleWithInitialItem.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SingleWithInitialItem.html
@@ -1,4 +1,7 @@
<div id="ello_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="ello" type="text" name="ello" class="fr-input" placeholder="placeholder" autocomplete="off" value="titreItem1"></div>
- <!---->
+ <div class="flex"><input id="ello" type="text" title="placeholder" name="ello" class="fr-input" placeholder="placeholder" autocomplete="off" role="combobox" aria-controls="ello-control" aria-activedescendant="ello-control" aria-expanded="false" aria-autocomplete="list" value="titreItem1"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="ello-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="ello-control-0"><span>titreItem2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="ello-control-1"><span>titreItem3</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html
index 9704a18f1..08b6cd442 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html
@@ -1,4 +1,7 @@
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>Autre nom</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-1"><span>Nom</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingleWithInitialValue.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingleWithInitialValue.html
index 3316a1518..15a915d9f 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingleWithInitialValue.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingleWithInitialValue.html
@@ -1,4 +1,6 @@
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value="Document car"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="Document car"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>documentDoe</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_VideLaSelectionAuChangementDeContexte.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_VideLaSelectionAuChangementDeContexte.html
index 26f9da23e..d4925f04e 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_VideLaSelectionAuChangementDeContexte.html
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_VideLaSelectionAuChangementDeContexte.html
@@ -1,4 +1,8 @@
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="Tape le nom d'un développeur" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="Tape le nom d'un développeur" name="typeahead_271" class="fr-input" placeholder="Tape le nom d'un développeur" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>Anis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-1"><span>Michael</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-2"><span>Vincent</span></li>
+ </ul>
</div>
\ No newline at end of file
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 1c8d7ec6c..2eafa44f9 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_FullDeposable.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_FullDeposable.html
@@ -16,21 +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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" 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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0" 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) *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0" 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 f21023ae9..f3b109428 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_FullEmpty.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_FullEmpty.html
@@ -16,28 +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) *<span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g) *<span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l) *<span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l) *<span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
<!---->
</div>
</div>
@@ -45,7 +57,7 @@
<div class="fr-fieldset__element">
<div>
<fieldset class="fr-fieldset" id="pompes" aria-labelledby="pompes-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes *<span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes <span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="pompes-0" name="pompes"><label class="fr-label" for="pompes-0">Oui
<!---->
@@ -61,21 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Pelles actives
+ <!---->
+ <!----><span class="fr-hint-text">Nombre moyen de pelles actives au cours du trimestre utilisées sur le chantier (aménagement, exploitation, réhabilitation).</span>
+ </label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0" 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 *<span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Effectifs
+ <!---->
+ <!----><span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Dépenses relatives à la protection de l’environnement (euros) *<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&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">
+ <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)
+ <!---->
+ <!----><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&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">
<!---->
</div>
</div>
@@ -190,9 +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">
- <!----><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="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>
</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 8c60daf47..1e7e33e2c 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html
@@ -19,28 +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) *<span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span>
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g) *<span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g)
+ <!---->
+ <!----><span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l) *<span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l) *<span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l)
+ <!---->
+ <!----><span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
<!---->
</div>
</div>
@@ -48,7 +60,7 @@
<div class="fr-fieldset__element">
<div>
<fieldset class="fr-fieldset" id="pompes" aria-labelledby="pompes-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes *<span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes <span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group"><input type="radio" id="pompes-0" name="pompes"><label class="fr-label" for="pompes-0">Oui
<!---->
@@ -64,21 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Pelles actives
+ <!---->
+ <!----><span class="fr-hint-text">Nombre moyen de pelles actives au cours du trimestre utilisées sur le chantier (aménagement, exploitation, réhabilitation).</span>
+ </label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0" 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 *<span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Effectifs
+ <!---->
+ <!----><span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span>
+ </label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
<!---->
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Dépenses relatives à la protection de l’environnement (euros) *<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&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">
+ <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)
+ <!---->
+ <!----><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&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">
<!---->
</div>
</div>
@@ -193,9 +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">
- <!----><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="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>
</div>
</fieldset>
diff --git a/packages/ui/src/components/activite-edition.tsx b/packages/ui/src/components/activite-edition.tsx
index a53ec8d35..de6cc2f37 100644
--- a/packages/ui/src/components/activite-edition.tsx
+++ b/packages/ui/src/components/activite-edition.tsx
@@ -9,7 +9,7 @@ import { ActivitesTypes } from 'camino-common/src/static/activitesTypes'
import { ActiviteDeposePopup } from './activite/depose-popup'
import { SectionWithValue } from 'camino-common/src/sections'
import { ApiClient, apiClient } from '../api/api-client'
-import { SectionsEdit } from './_common/new-sections-edit'
+import { NewSectionsEdit } from './_common/new-sections-edit'
import { DsfrButton, DsfrLink } from './_ui/dsfr-button'
import { capitalize } from 'camino-common/src/strings'
import { Alert } from './_ui/alert'
@@ -176,7 +176,7 @@ export const PureActiviteEdition = defineComponent<Props>(props => {
{ActivitesTypes[activite.type_id].description !== undefined ? <div class="h6" v-html={ActivitesTypes[activite.type_id].description} /> : null}
- <SectionsEdit sectionsWithValue={activite.sections_with_value} completeUpdate={sectionsUpdate} etapeDate={null} />
+ <NewSectionsEdit sectionsWithValue={activite.sections_with_value} completeUpdate={sectionsUpdate} etapeDate={null} />
<ActiviteDocumentsEdit apiClient={props.apiClient} activiteDocuments={activite.activite_documents} activiteTypeId={activite.type_id} completeUpdate={activiteDocumentsCompleteUpdate} />
diff --git a/packages/ui/src/components/activite.stories_snapshots_ACompleter.html b/packages/ui/src/components/activite.stories_snapshots_ACompleter.html
index 51af7b761..c3932f1e7 100644
--- a/packages/ui/src/components/activite.stories_snapshots_ACompleter.html
+++ b/packages/ui/src/components/activite.stories_snapshots_ACompleter.html
@@ -16,7 +16,7 @@
</div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -25,7 +25,7 @@
<p><a href="https://www.legifrance.gouv.fr/codes/id/LEGIARTI000021822128" target="_blank" title="Page de l'article - site externe">article 47</a> du décret 2006-798 du 6 juillet 2006.</p>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Nom de section</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Nom de section</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Un radio button</div>
<div><span>Oui<!----></span>
diff --git a/packages/ui/src/components/activite.stories_snapshots_Deposable.html b/packages/ui/src/components/activite.stories_snapshots_Deposable.html
index 02db2fa1c..4a4451c8f 100644
--- a/packages/ui/src/components/activite.stories_snapshots_Deposable.html
+++ b/packages/ui/src/components/activite.stories_snapshots_Deposable.html
@@ -16,7 +16,7 @@
</div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -25,7 +25,7 @@
<p>Le rapport annuel d'exploitation est requis en vertu de l'<a href="https://www.legifrance.gouv.fr/codes/id/LEGIARTI000023505020/2021-04-14/" target="_blank" title="Page de l'article - site externe">article L. 172-1</a> du code minier et <a href="https://www.legifrance.gouv.fr/loda/article_lc/LEGIARTI000033196097" target="_blank" title="Page de l'article - site externe">article 35</a> du décret 2006/649 du 2 juin 2006.</p>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Nom de section</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Nom de section</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Un radio button</div>
<div><span>Oui<!----></span>
diff --git a/packages/ui/src/components/activite.stories_snapshots_Supprimable.html b/packages/ui/src/components/activite.stories_snapshots_Supprimable.html
index 24ac367d1..5b3e26c94 100644
--- a/packages/ui/src/components/activite.stories_snapshots_Supprimable.html
+++ b/packages/ui/src/components/activite.stories_snapshots_Supprimable.html
@@ -16,7 +16,7 @@
</button><a href="/mocked-href" title="modifier l'activité" class="fr-btn fr-btn--primary fr-icon-edit-line" aria-label="modifier l'activité">modifier l'activité</a><button class="fr-btn fr-btn--primary fr-btn--md" disabled="" title="déposer l'activité" aria-label="déposer l'activité" type="button">Déposer</button></div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -25,7 +25,7 @@
<p>Le rapport annuel d'exploitation est requis en vertu de l'<a href="https://www.legifrance.gouv.fr/codes/id/LEGIARTI000023505020/2021-04-14/" target="_blank" title="Page de l'article - site externe">article L. 172-1</a> du code minier et <a href="https://www.legifrance.gouv.fr/loda/article_lc/LEGIARTI000033196097" target="_blank" title="Page de l'article - site externe">article 35</a> du décret 2006/649 du 2 juin 2006.</p>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Nom de section</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Nom de section</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Un radio button</div>
<div><span>Oui<!----></span>
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 30b82e408..85c90ed4b 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
@@ -12,10 +12,12 @@
<form>
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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">Description
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Description (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_271" id="input_271" type="text" value="">
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 2abfb7e1e..18e6fc399 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
@@ -12,10 +12,12 @@
<form>
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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">Description
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Description (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_271" id="input_271" type="text" value="">
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 436a2caca..e213d3cc7 100644
--- a/packages/ui/src/components/activite/add-activite-document-popup.tsx
+++ b/packages/ui/src/components/activite/add-activite-document-popup.tsx
@@ -30,6 +30,7 @@ export const AddActiviteDocumentPopup = defineComponent<Props>(props => {
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
<InputFile
+ required={true}
accept={['pdf']}
uploadFile={file => {
activiteDocumentFile.value = file
@@ -37,7 +38,7 @@ export const AddActiviteDocumentPopup = defineComponent<Props>(props => {
/>
</div>
<div class="fr-fieldset__element">
- <DsfrInput legend={{ main: 'Description' }} initialValue={documentDescription.value} type={{ type: 'text' }} valueChanged={descriptionChange} />
+ <DsfrInput required={false} legend={{ main: 'Description' }} initialValue={documentDescription.value} type={{ type: 'text' }} valueChanged={descriptionChange} />
</div>
</fieldset>
</form>
diff --git a/packages/ui/src/components/activite/preview.stories_snapshots_ACompleter.html b/packages/ui/src/components/activite/preview.stories_snapshots_ACompleter.html
index 437229bd0..15530e971 100644
--- a/packages/ui/src/components/activite/preview.stories_snapshots_ACompleter.html
+++ b/packages/ui/src/components/activite/preview.stories_snapshots_ACompleter.html
@@ -16,7 +16,7 @@
</div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -60,7 +60,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Statut des travaux</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Statut des travaux</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Avril</div>
<div><span>–<!----></span>
@@ -81,7 +81,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Informations complémentaires</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Informations complémentaires</h3>
<div class="fr-pt-2w">
<!---->
<div><span>–<!----></span><span class="fr-hint-text"><span>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></span></div>
diff --git a/packages/ui/src/components/activite/preview.stories_snapshots_Defaut.html b/packages/ui/src/components/activite/preview.stories_snapshots_Defaut.html
index b558166f6..c19fb5430 100644
--- a/packages/ui/src/components/activite/preview.stories_snapshots_Defaut.html
+++ b/packages/ui/src/components/activite/preview.stories_snapshots_Defaut.html
@@ -17,7 +17,7 @@
</div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -61,7 +61,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Statut des travaux</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Statut des travaux</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Avril</div>
<div><span>–<!----></span>
@@ -82,7 +82,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Informations complémentaires</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Informations complémentaires</h3>
<div class="fr-pt-2w">
<!---->
<div><span>–<!----></span><span class="fr-hint-text"><span>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></span></div>
diff --git a/packages/ui/src/components/activite/preview.stories_snapshots_Deposable.html b/packages/ui/src/components/activite/preview.stories_snapshots_Deposable.html
index 011df64cb..458f939e0 100644
--- a/packages/ui/src/components/activite/preview.stories_snapshots_Deposable.html
+++ b/packages/ui/src/components/activite/preview.stories_snapshots_Deposable.html
@@ -16,7 +16,7 @@
</div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -60,7 +60,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Statut des travaux</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Statut des travaux</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Avril</div>
<div><span>–<!----></span>
@@ -81,7 +81,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Informations complémentaires</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Informations complémentaires</h3>
<div class="fr-pt-2w">
<!---->
<div><span>–<!----></span><span class="fr-hint-text"><span>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></span></div>
diff --git a/packages/ui/src/components/activite/preview.stories_snapshots_Supprimable.html b/packages/ui/src/components/activite/preview.stories_snapshots_Supprimable.html
index e1db6f060..dfb23f3b3 100644
--- a/packages/ui/src/components/activite/preview.stories_snapshots_Supprimable.html
+++ b/packages/ui/src/components/activite/preview.stories_snapshots_Supprimable.html
@@ -16,7 +16,7 @@
</button><a href="/mocked-href" title="modifier l'activité" class="fr-btn fr-btn--primary fr-icon-edit-line" aria-label="modifier l'activité">modifier l'activité</a><button class="fr-btn fr-btn--primary fr-btn--md" disabled="" title="déposer l'activité" aria-label="déposer l'activité" type="button">Déposer</button></div>
</div>
<div>
- <h3>Nom du titre</h3>
+ <h2>Nom du titre</h2>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
<div class="fr-pt-1w"><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 01-01-2022</div>
<div class="fr-pt-1w">
@@ -60,7 +60,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Statut des travaux</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Statut des travaux</h3>
<div class="fr-pt-2w">
<div class="fr-h6 fr-m-0">Avril</div>
<div><span>–<!----></span>
@@ -81,7 +81,7 @@
</div>
</div>
<div>
- <h5 class="fr-m-0 fr-pt-4w">Informations complémentaires</h5>
+ <h3 class="fr-m-0 fr-pt-4w">Informations complémentaires</h3>
<div class="fr-pt-2w">
<!---->
<div><span>–<!----></span><span class="fr-hint-text"><span>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></span></div>
diff --git a/packages/ui/src/components/activite/preview.tsx b/packages/ui/src/components/activite/preview.tsx
index ac5f46b44..6d50192db 100644
--- a/packages/ui/src/components/activite/preview.tsx
+++ b/packages/ui/src/components/activite/preview.tsx
@@ -109,7 +109,7 @@ export const Preview = defineComponent<Props>(props => {
</div>
</div>
<div>
- <h3>{props.activite.titre.nom}</h3>
+ <h2>{props.activite.titre.nom}</h2>
<ActiviteStatut activiteStatutId={props.activite.activite_statut_id} />
{isNotNullNorUndefined(props.activite.date_saisie) ? <ModifiedDate class="fr-pt-1w" modified_date={props.activite.date_saisie} /> : null}
diff --git a/packages/ui/src/components/activites.stories_snapshots_Full.html b/packages/ui/src/components/activites.stories_snapshots_Full.html
index 3ec088232..04b1a78b7 100644
--- a/packages/ui/src/components/activites.stories_snapshots_Full.html
+++ b/packages/ui/src/components/activites.stories_snapshots_Full.html
@@ -1,366 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 180 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-annees">Années</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-annees">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Années_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Années" type="text" name="filters_autocomplete_Années" style="outline: none;" placeholder="Années" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 6;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-activiteTypesIds">Types d'activités</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-activiteTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (autorisations M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions M)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span class="h6 bold">Rapport d'exploitation (permis et concessions W)</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div><span class="h6 bold">Rapport d'intensité d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div><span class="h6 bold">Rapport environnemental d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div><span class="h6 bold">Rapport financier d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div><span class="h6 bold">Rapport social et économique d'exploration</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div><span class="h6 bold">Rapport trimestriel d'exploitation d'or en Guyane</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-activiteStatutsIds">Statuts d'activité</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-activiteStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_731" id="input_731" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Activités</h1>
@@ -525,5 +165,686 @@
</nav>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 180 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-200"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-201"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_annees">Années</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_annees_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_annees" type="text" name="filtres_autocomplete_annees" style="outline: none;" placeholder="Années" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_annees-control" aria-activedescendant="filtres_autocomplete_annees-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_annees-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_annees-control-0"><span>1997</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-1"><span>1998</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-2"><span>1999</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-3"><span>2000</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-4"><span>2001</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-5"><span>2002</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-6"><span>2003</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-7"><span>2004</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-8"><span>2005</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-9"><span>2006</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-10"><span>2007</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-11"><span>2008</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-12"><span>2009</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-13"><span>2010</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-14"><span>2011</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-15"><span>2012</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-16"><span>2013</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-17"><span>2014</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-18"><span>2015</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-19"><span>2016</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-20"><span>2017</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-21"><span>2018</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-22"><span>2019</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-23"><span>2020</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-24"><span>2021</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-25"><span>2022</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-26"><span>2023</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-27"><span>2024</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_annees-control-28"><span>2025</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-0"><span>Entreprise1</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-1"><span>Nom de l'entreprise 0</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-2"><span>Nom de l'entreprise 1</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-3"><span>Nom de l'entreprise 2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-4"><span>Nom de l'entreprise 3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-5"><span>Nom de l'entreprise 4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-6"><span>Nom de l'entreprise 5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-7"><span>Nom de l'entreprise 6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-8"><span>Nom de l'entreprise 7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-9"><span>Nom de l'entreprise 8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-10"><span>Nom de l'entreprise 9</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_activiteTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_activiteTypesIds">Types d'activités</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">Rapport d'exploitation (autorisations M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">Rapport d'exploitation (permis et concessions M)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">Rapport d'exploitation (permis et concessions W)
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">Rapport d'intensité d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">Rapport environnemental d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">Rapport financier d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">Rapport social et économique d'exploration
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Rapport trimestriel d'exploitation d'or en Guyane
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types d'activités" aria-label="Décocher toutes les cases à cocher Types d'activités" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types d'activités" aria-label="Cocher toutes les cases à cocher Types d'activités" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_activiteStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_activiteStatutsIds">Statuts d'activité</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="absent" aria-label="absent">absent</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="cloturé" aria-label="cloturé">cloturé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts d'activité" aria-label="Décocher toutes les cases à cocher Statuts d'activité" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts d'activité" aria-label="Cocher toutes les cases à cocher Statuts d'activité" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/administration.stories_snapshots_Default.html b/packages/ui/src/components/administration.stories_snapshots_Default.html
index 0a85225a2..e2afde1d2 100644
--- a/packages/ui/src/components/administration.stories_snapshots_Default.html
+++ b/packages/ui/src/components/administration.stories_snapshots_Default.html
@@ -3,18 +3,18 @@
<h1 class="fr-m-0">Direction Générale des Territoires et de la Mer de Guyane</h1><span class="fr-h4 fr-m-0 fr-ml-2w">(DGTM - Guyane)</span>
</div>
<div class="fr-pt-8w fr-pb-4w" style="display: flex; gap: 2rem; flex-direction: column;">
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Type</span><span class="fr-col">Dréal</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Service</span><span class="fr-col"></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Adresse</span><span class="fr-col"><p>Route du Vieux-Port
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Type</span><span class="fr-col-12 fr-col-sm">Dréal</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Service</span><span class="fr-col-12 fr-col-sm"></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Adresse</span><span class="fr-col-12 fr-col-sm"><p>Route du Vieux-Port
97300 Cayenne<span><br>Adresse postale
Route du Vieux-Port
CS 76003
97306 Cayenne</span><br>97300 Cayenne</p></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone</span><span class="fr-col">+594 5 94 39 80 00</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col"><span>–</span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Site</span><span class="fr-col"><a class="fr-link" title="https://www.guyane.gouv.fr" href="https://www.guyane.gouv.fr" target="_blank" rel="noopener noreferrer">https://www.guyane.gouv.fr</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone</span><span class="fr-col-12 fr-col-sm">+594 5 94 39 80 00</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col-12 fr-col-sm"><span>–</span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Site</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="https://www.guyane.gouv.fr" href="https://www.guyane.gouv.fr" target="_blank" rel="noopener noreferrer">https://www.guyane.gouv.fr</a></span></div>
<!---->
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Région</span><span class="fr-col">Guyane</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Région</span><span class="fr-col-12 fr-col-sm">Guyane</span></div>
<p class="fr-text--lg">Un utilisateur d'une <b>administration locale</b> peut créer et modifier le contenu des titres du territoire concerné.</p>
</div>
<div>
@@ -79,7 +79,7 @@ CS 76003
<tbody>
<tr>
<td>
- <div class="fr-select-group"><label class="fr-label" for="select_271">Activité
+ <div class="fr-select-group"><label class="fr-label" for="select_271">Activité (optionnel)
<!---->
</label><select class="fr-select" id="select_271" aria-label="Activité" name="select_271">
<option value="gra">Rapport d'exploitation (permis et concessions M) (GRA)</option>
@@ -94,7 +94,7 @@ CS 76003
</select></div>
</td>
<td>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="email">
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 7dee0635f..9711c7084 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,7 +26,7 @@
<tbody>
<tr>
<td>
- <div class="fr-select-group"><label class="fr-label" for="select_271">Activité
+ <div class="fr-select-group"><label class="fr-label" for="select_271">Activité (optionnel)
<!---->
</label><select class="fr-select" id="select_271" aria-label="Activité" name="select_271">
<option value="gra">Rapport d'exploitation (permis et concessions M) (GRA)</option>
@@ -41,7 +41,7 @@
</select></div>
</td>
<td>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="email">
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 7d889da19..657fb5899 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,7 +24,7 @@
<tbody>
<tr>
<td>
- <div class="fr-select-group"><label class="fr-label" for="select_271">Activité
+ <div class="fr-select-group"><label class="fr-label" for="select_271">Activité (optionnel)
<!---->
</label><select class="fr-select" id="select_271" aria-label="Activité" name="select_271">
<option value="gra">Rapport d'exploitation (permis et concessions M) (GRA)</option>
@@ -39,7 +39,7 @@
</select></div>
</td>
<td>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="email">
diff --git a/packages/ui/src/components/administration/activites-types-emails.tsx b/packages/ui/src/components/administration/activites-types-emails.tsx
index 54e163110..0732fc56f 100644
--- a/packages/ui/src/components/administration/activites-types-emails.tsx
+++ b/packages/ui/src/components/administration/activites-types-emails.tsx
@@ -99,12 +99,12 @@ export const ActivitesTypesEmails = defineComponent<Props>(props => {
columns: {
type: {
type: 'jsx',
- jsxElement: <DsfrSelect legend={{ main: 'Activité' }} items={activitesTypes} valueChanged={updateActiviteTypeId} initialValue={activiteType.value.activiteTypeId} />,
+ jsxElement: <DsfrSelect required={false} legend={{ main: 'Activité' }} items={activitesTypes} valueChanged={updateActiviteTypeId} initialValue={activiteType.value.activiteTypeId} />,
value: 'type',
},
email: {
type: 'jsx',
- jsxElement: <DsfrInput type={{ type: 'email' }} legend={{ main: 'Email' }} valueChanged={updateActiviteTypeEmail} initialValue={activiteType.value.email} />,
+ jsxElement: <DsfrInput required={false} type={{ type: 'email' }} legend={{ main: 'Email' }} valueChanged={updateActiviteTypeEmail} initialValue={activiteType.value.email} />,
value: 'email',
},
action: {
diff --git a/packages/ui/src/components/administrations.stories_snapshots_Default.html b/packages/ui/src/components/administrations.stories_snapshots_Default.html
index 303fb325c..1696c9313 100644
--- a/packages/ui/src/components/administrations.stories_snapshots_Default.html
+++ b/packages/ui/src/components/administrations.stories_snapshots_Default.html
@@ -1,69 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (130 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsAdministration">Nom</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsAdministration">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom de l'administration" class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-administrationTypesIds">Type d'administration</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div><span class="h6 bold">Autorité</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div><span class="h6 bold">Dréal</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div><span class="h6 bold">Ministère</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div><span class="h6 bold">Opérateur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div><span class="h6 bold">Préfecture</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Administrations</h1>
@@ -1009,5 +946,76 @@
<!---->
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (130 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsAdministration">Nom</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom de l'administration" class="fr-input" name="filtres_input_nomsAdministration" id="filtres_input_nomsAdministration" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_administrationTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_administrationTypesIds">Type d'administration</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Autorité
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Dréal
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Ministère
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Opérateur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Préfecture
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Type d'administration" aria-label="Décocher toutes les cases à cocher Type d'administration" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Type d'administration" aria-label="Cocher toutes les cases à cocher Type d'administration" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/content/about.stories_snapshots_Default.html b/packages/ui/src/components/content/about.stories_snapshots_Default.html
index 2b1b1bb21..22819c2ad 100644
--- a/packages/ui/src/components/content/about.stories_snapshots_Default.html
+++ b/packages/ui/src/components/content/about.stories_snapshots_Default.html
@@ -28,7 +28,7 @@
</div>
</div>
<div class="fr-card__header fr-pt-4w" style="display: flex; align-items: center; justify-content: center;">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/building.svg" alt="Les entreprises" style="width: auto; height: 100%;"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/building.svg" alt="" style="width: auto; height: 100%;"></div>
</div>
</div>
</div>
@@ -41,7 +41,7 @@
</div>
</div>
<div class="fr-card__header fr-pt-4w" style="display: flex; align-items: center; justify-content: center;">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/earth.svg" alt="Les ONG, les citoyens et leurs élus" style="width: auto; height: 100%;"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/earth.svg" alt="" style="width: auto; height: 100%;"></div>
</div>
</div>
</div>
@@ -54,7 +54,7 @@
</div>
</div>
<div class="fr-card__header fr-pt-4w" style="display: flex; align-items: center; justify-content: center;">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/team.svg" alt="Les agents publics" style="width: auto; height: 100%;"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/team.svg" alt="" style="width: auto; height: 100%;"></div>
</div>
</div>
</div>
@@ -74,7 +74,7 @@
</div>
</div>
<div class="fr-card__header fr-pt-4w" style="display: flex; align-items: center; justify-content: center;">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/road-map.svg" alt="Une carte intéractive" style="width: auto; height: 100%;"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/road-map.svg" alt="" style="width: auto; height: 100%;"></div>
</div>
</div>
</div>
@@ -87,7 +87,7 @@
</div>
</div>
<div class="fr-card__header fr-pt-4w" style="display: flex; align-items: center; justify-content: center;">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/dashboard.svg" alt="Des tableaux de bord" style="width: auto; height: 100%;"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/dashboard.svg" alt="" style="width: auto; height: 100%;"></div>
</div>
</div>
</div>
@@ -100,7 +100,7 @@
</div>
</div>
<div class="fr-card__header fr-pt-4w" style="display: flex; align-items: center; justify-content: center;">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/code-s-slash.svg" alt="Une API ouverte" style="width: auto; height: 100%;"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/code-s-slash.svg" alt="" style="width: auto; height: 100%;"></div>
</div>
</div>
</div>
@@ -116,7 +116,7 @@
</div>
</div>
<div class="fr-card__header">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-non-energetique.jpg" alt="Mine de sel"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-non-energetique.jpg" alt=""></div>
</div>
</div>
</div>
@@ -129,7 +129,7 @@
</div>
</div>
<div class="fr-card__header">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-energetique.jpg" alt="Forage"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-energetique.jpg" alt=""></div>
</div>
</div>
</div>
@@ -142,7 +142,7 @@
</div>
</div>
<div class="fr-card__header">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-stockages.jpg" alt="Station de contrôle"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-stockages.jpg" alt=""></div>
</div>
</div>
</div>
@@ -155,7 +155,7 @@
</div>
</div>
<div class="fr-card__header">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-geothermie.jpg" alt="Centrale géothermique"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-geothermie.jpg" alt=""></div>
</div>
</div>
</div>
@@ -168,7 +168,7 @@
</div>
</div>
<div class="fr-card__header">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-travaux.jpg" alt="Travaux miniers"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-travaux.jpg" alt=""></div>
</div>
</div>
</div>
@@ -181,7 +181,7 @@
</div>
</div>
<div class="fr-card__header">
- <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-apresmine.jpg" alt="Après mines"></div>
+ <div class="fr-card__img"><img class="fr-responsive-img" src="/components/content/gallery-apresmine.jpg" alt=""></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/content/about.tsx b/packages/ui/src/components/content/about.tsx
index 4d98cef91..f35e09031 100644
--- a/packages/ui/src/components/content/about.tsx
+++ b/packages/ui/src/components/content/about.tsx
@@ -173,7 +173,7 @@ const AboutCard: FunctionalComponent<{ title: string; description: string; imgSr
</div>
<div class={{ 'fr-card__header': true, 'fr-pt-4w': props.isSvg }} style={props.isSvg ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}}>
<div class="fr-card__img">
- <img class="fr-responsive-img" src={props.imgSrc} alt={props.imgAlt ?? props.title} style={props.isSvg ? { width: 'auto', height: '100%' } : {}} />
+ <img class="fr-responsive-img" src={props.imgSrc} alt="" style={props.isSvg ? { width: 'auto', height: '100%' } : {}} />
</div>
</div>
</div>
diff --git a/packages/ui/src/components/dashboard/dgtm-stats-full.tsx b/packages/ui/src/components/dashboard/dgtm-stats-full.tsx
index e11491c4f..99d66d67f 100644
--- a/packages/ui/src/components/dashboard/dgtm-stats-full.tsx
+++ b/packages/ui/src/components/dashboard/dgtm-stats-full.tsx
@@ -19,7 +19,17 @@ interface Props {
export const DGTMStatsFull = defineComponent<Props>(props => {
const data = ref<AsyncData<StatistiquesDGTM>>({ status: 'LOADING' })
- const charts = [sdomChartConfiguration, depotChartConfiguration, delaiChartConfiguration, delaiPerConcessionChartConfiguration, producteursOrChartConfiguration, avisAXMChartConfiguration]
+ const charts = [
+ {
+ description: 'nombre de titres déposés ou octroyés en zones du SDOM par année',
+ configuration: sdomChartConfiguration,
+ },
+ { description: 'Nombre de titres et AEX par année', configuration: depotChartConfiguration },
+ { description: "Délais d'instruction, de CDM et de décision du préfet pour les AEX par année", configuration: delaiChartConfiguration },
+ { description: "Délais moyens d'instruction des PER et concessions par année", configuration: delaiPerConcessionChartConfiguration },
+ { description: "Nombre d'entreprises produisant de l'or par année", configuration: producteursOrChartConfiguration },
+ { description: "Nombre d'avis AEX par année", configuration: avisAXMChartConfiguration },
+ ]
onMounted(async () => {
try {
@@ -43,7 +53,7 @@ export const DGTMStatsFull = defineComponent<Props>(props => {
<div class="fr-py-3w">
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr">
{charts.map(chart => (
- <ChartWithExport data={data.value} getConfiguration={data => chart(data)} />
+ <ChartWithExport data={data.value} getConfiguration={data => chart.configuration(data)} a11yDescription="autoyearlytable" description={chart.description} />
))}
</div>
</div>
diff --git a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Ok.html b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Ok.html
index 2ace6a23b..c3387ccb6 100644
--- a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Ok.html
+++ b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Ok.html
@@ -34,7 +34,7 @@
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
</td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 3</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
<td><span><ul><li class="fr-text--xs">enregistrement de la demande</li></ul></span></td>
</tr>
</tbody>
@@ -70,7 +70,7 @@
</td>
<td><span class="mb--xs"><ul></ul></span></td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 1</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
</tr>
<tr>
<td><a class="fr-link" to="{name:titre,params:{id:third-id-slug}}" type="primary"><span class="bold">third-name</span></a></td>
@@ -80,7 +80,7 @@
</td>
<td><span class="mb--xs"><ul></ul></span></td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 1</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
</tr>
<tr>
<td><a class="fr-link" to="{name:titre,params:{id:fourth-slug}}" type="primary"><span class="bold">Quatrième Nom de titre</span></a></td>
@@ -90,7 +90,7 @@
</td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">PTMG : 2010-001</li><li class="fr-text--xs">PTMG : 2010-000</li></ul></span></td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 8</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
</tr>
</tbody>
</table>
diff --git a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_OkWithoutBlockedTitres.html b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_OkWithoutBlockedTitres.html
index 9d0027d2b..70162b54b 100644
--- a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_OkWithoutBlockedTitres.html
+++ b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_OkWithoutBlockedTitres.html
@@ -36,7 +36,7 @@
</td>
<td><span class="mb--xs"><ul></ul></span></td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 1</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
</tr>
<tr>
<td><a class="fr-link" to="{name:titre,params:{id:third-id-slug}}" type="primary"><span class="bold">third-name</span></a></td>
@@ -46,7 +46,7 @@
</td>
<td><span class="mb--xs"><ul></ul></span></td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 1</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
</tr>
<tr>
<td><a class="fr-link" to="{name:titre,params:{id:fourth-slug}}" type="primary"><span class="bold">Quatrième Nom de titre</span></a></td>
@@ -56,7 +56,7 @@
</td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">PTMG : 2010-001</li><li class="fr-text--xs">PTMG : 2010-000</li></ul></span></td>
<td><span class="mb--xs"><ul><li class="fr-text--xs">Titulaire 8</li></ul></span></td>
- <td><span class="">recevabilité de la demande (2022-01-01)</span></td>
+ <td><span class="">Recevabilité de la demande (2022-01-01)</span></td>
</tr>
</tbody>
</table>
diff --git a/packages/ui/src/components/dashboard/pure-administration-dashboard.tsx b/packages/ui/src/components/dashboard/pure-administration-dashboard.tsx
index aad67268f..c81419c9f 100644
--- a/packages/ui/src/components/dashboard/pure-administration-dashboard.tsx
+++ b/packages/ui/src/components/dashboard/pure-administration-dashboard.tsx
@@ -15,6 +15,7 @@ import { PageContentHeader } from '../_common/page-header-content'
import { CaminoRouterLink } from '../../router/camino-router-link'
import { DsfrSeparator } from '../_ui/dsfr-separator'
import { Entreprise, EntrepriseId } from 'camino-common/src/entreprise'
+import { capitalize } from 'camino-common/src/strings'
interface Props {
apiClient: Pick<DashboardApiClient, 'getAdministrationTitres' | 'getDgtmStats'>
@@ -69,7 +70,7 @@ export const PureAdministrationDashboard = defineComponent<Props>(props => {
titulaires: titulairesCell(titre, entreprisesIndex),
derniereEtape: {
type: 'text',
- value: titre.derniereEtape ? `${EtapesTypes[titre.derniereEtape.etapeTypeId].nom} (${titre.derniereEtape.date})` : '',
+ value: titre.derniereEtape ? `${capitalize(EtapesTypes[titre.derniereEtape.etapeTypeId].nom)} (${titre.derniereEtape.date})` : '',
},
prochainesEtapes: prochainesEtapesCell(titre),
}
diff --git a/packages/ui/src/components/dashboard/pure-dgtm-stats.tsx b/packages/ui/src/components/dashboard/pure-dgtm-stats.tsx
index bdab75fc6..ee5ce198c 100644
--- a/packages/ui/src/components/dashboard/pure-dgtm-stats.tsx
+++ b/packages/ui/src/components/dashboard/pure-dgtm-stats.tsx
@@ -27,9 +27,19 @@ export const PureDGTMStats = defineComponent<Props>(props => {
return () => (
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr">
- <ChartWithExport data={data.value} getConfiguration={data => sdomChartConfiguration(data)} />
- <ChartWithExport data={data.value} getConfiguration={data => depotChartConfiguration(data)} />
- <ChartWithExport data={data.value} getConfiguration={data => delaiChartConfiguration(data)} />
+ <ChartWithExport
+ data={data.value}
+ getConfiguration={data => sdomChartConfiguration(data)}
+ a11yDescription="autoyearlytable"
+ description="Nombre de titres déposés ou octroyés en zones du SDOM par année"
+ />
+ <ChartWithExport data={data.value} getConfiguration={data => depotChartConfiguration(data)} a11yDescription="autoyearlytable" description="Nombre de titres et AEX par année" />
+ <ChartWithExport
+ data={data.value}
+ getConfiguration={data => delaiChartConfiguration(data)}
+ a11yDescription="autoyearlytable"
+ description="Délais d'instruction, de CDM et de décision du préfet pour les AEX par année"
+ />
</div>
)
})
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx
index be324ba65..2dcfd03d8 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx
@@ -53,15 +53,17 @@ export const PureEntrepriseDashboard = defineComponent<Props>(props => {
const entrepriseTitres = (entreprises: TitreEntreprise[]): TableRow[] => titresLignesBuild(entreprises, false, entreprisesIndex)
- const columns = titresColonnes.filter(({ id }) => {
- if (id === 'activites' || id === 'departements' || id === 'regions') {
- return false
- }
- if (id === 'titulaires' && props.entrepriseIds.length === 1) {
- return false
- }
- return true
- })
+ const columns = titresColonnes
+ .map(value => ({ ...value, noSort: true }))
+ .filter(({ id }) => {
+ if (id === 'activites' || id === 'departements' || id === 'regions') {
+ return false
+ }
+ if (id === 'titulaires' && props.entrepriseIds.length === 1) {
+ return false
+ }
+ return true
+ })
onMounted(async () => {
try {
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDefavorable.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDefavorable.html
index bd7c2270e..de26a7f02 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDefavorable.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDefavorable.html
@@ -2,7 +2,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;">Avis du CGE et de l'IGEDD</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Avis du CGE et de l'IGEDD</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDesServices.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDesServices.html
index 3da2c4f6f..ac56f2ae4 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDesServices.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AvisDesServices.html
@@ -2,7 +2,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;">Avis des services et commissions consultatives</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Avis des services et commissions consultatives</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape Avis des services et commissions consultatives" aria-label="Brouillon de l'étape Avis des services et commissions consultatives">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
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 55176ddc9..8744017dc 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -58,8 +58,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -68,7 +138,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 3cb0befd4..d96d57093 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -82,8 +82,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -92,7 +162,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 e86d4befc..34633ad00 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -82,8 +82,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -92,7 +162,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 55eb45c73..a18a8bd4a 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -82,8 +82,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -92,7 +162,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 38b03c743..4def191e3 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -58,8 +58,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -68,7 +138,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 bf5f2e037..542938ff4 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -50,8 +50,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -60,7 +130,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 118ead302..45c3e3daf 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
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -29,8 +29,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -39,7 +109,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplement.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplement.html
index 8e22dd459..13f690c50 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplement.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplement.html
@@ -2,7 +2,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;">Demande de compléments</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande de compléments</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Répondre à la demande de compléments du 2023-10-24" aria-label="Répondre à la demande de compléments du 2023-10-24" type="button">Répondre à la demande de compléments</button>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplementEntreprise.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplementEntreprise.html
index 285be650e..338345d45 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplementEntreprise.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeComplementEntreprise.html
@@ -2,7 +2,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;">Demande de compléments</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande de compléments</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;"><button class="fr-btn fr-btn--primary fr-btn--md" title="Répondre à la demande de compléments du 2023-10-24" aria-label="Répondre à la demande de compléments du 2023-10-24" type="button">Répondre à la demande de compléments</button>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeConsentement.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeConsentement.html
index 06eebe026..2e78d6358 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeConsentement.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeDeConsentement.html
@@ -2,7 +2,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;">Demande de consentement</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande de consentement</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeMultipleEntreprisesDocuments.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeMultipleEntreprisesDocuments.html
index 4decad768..b6b285207 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeMultipleEntreprisesDocuments.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeMultipleEntreprisesDocuments.html
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNoMap.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNoMap.html
index 288572bb4..5139db947 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNoMap.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNoMap.html
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonDeposable.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonDeposable.html
index 3df7b5226..8a8a45a7a 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonDeposable.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonDeposable.html
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonSupprimable.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonSupprimable.html
index ea9e5b279..6b7d923ed 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonSupprimable.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeNonSupprimable.html
@@ -2,7 +2,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape demande" aria-label="Brouillon de l'étape demande">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_Depot.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_Depot.html
index 4b2202415..0ea7d93ea 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_Depot.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_Depot.html
@@ -2,7 +2,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;">Enregistrement de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Enregistrement de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_EtapeAvecNoteAvertissement.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_EtapeAvecNoteAvertissement.html
index e214cb37d..bb16d7fb0 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_EtapeAvecNoteAvertissement.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_EtapeAvecNoteAvertissement.html
@@ -2,7 +2,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;">Avis des services et commissions consultatives</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Avis des services et commissions consultatives</h4>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-ml-1w fr-badge--new fr-badge--no-icon fr-ml-1w" title="Brouillon de l'étape Avis des services et commissions consultatives" aria-label="Brouillon de l'étape Avis des services et commissions consultatives">Brouillon</p>
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/demarche/demarche-etape.tsx b/packages/ui/src/components/demarche/demarche-etape.tsx
index 36acb7bb1..04d90d067 100644
--- a/packages/ui/src/components/demarche/demarche-etape.tsx
+++ b/packages/ui/src/components/demarche/demarche-etape.tsx
@@ -298,9 +298,9 @@ export const DemarcheEtape = defineComponent<Props>(props => {
<div class={`${styles.sticky} fr-pt-1w`}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex' }}>
- <div class="fr-text--lg fr-mb-0" style={{ color: 'var(--text-title-blue-france)', fontWeight: '500' }}>
+ <h4 class="fr-text--lg fr-mb-0" style={{ color: 'var(--text-title-blue-france)', fontWeight: '500' }}>
{capitalize(EtapesTypes[props.etape.etape_type_id].nom)}
- </div>
+ </h4>
{isBrouillon.value ? <Badge class="fr-ml-1w" systemLevel="new" ariaLabel={`Brouillon de l'étape ${EtapesTypes[props.etape.etape_type_id].nom}`} label="Brouillon" /> : null}
</div>
@@ -396,7 +396,7 @@ export const DemarcheEtape = defineComponent<Props>(props => {
) : (
<p>
{element.id === 'jorf' && element.value !== null && element.value !== '' ? (
- <a target="_blank" rel="noopener noreferrer" href={`https://www.legifrance.gouv.fr/jorf/id/${valeurFind(element)}`} title={`Légifrance - Lien externe`}>
+ <a target="_blank" rel="noopener noreferrer" href={`https://www.legifrance.gouv.fr/jorf/id/${valeurFind(element)}`} title={`Numéro JORF Légifrance - Lien externe`}>
{valeurFind(element)}
</a>
) : (
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 93bb8e8b5..332564dbb 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
@@ -2,26 +2,132 @@
<div class="fr-p-2w fr-tile--shadow" style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
<div class="flex" style="align-items: center;">
<div id="select-etape-type-0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type-0" type="text" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="Demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type-0" type="text" title="Type d'étape" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" role="combobox" aria-controls="select-etape-type-0-control" aria-activedescendant="select-etape-type-0-control" aria-expanded="false" aria-autocomplete="list" value="Demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-0-control-0"><span>Abrogation de la décision</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-1"><span>Arrêté d'ouverture des travaux miniers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-2"><span>Arrêté de prescriptions complémentaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-3"><span>Arrêté de second donner acte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-4"><span>Arrêté préfectoral de premier donner acte (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-5"><span>Arrêté préfectoral de sursis à statuer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-6"><span>Attestation de constitution de garanties financières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-7"><span>Avenant à l'autorisation de recherche minière</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-8"><span>Avis de demande concurrente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-9"><span>Avis de l'autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-10"><span>Avis de la commission départementale des mines (CDM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-11"><span>Avis de la commission des autorisations de recherches minières (CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-12"><span>Avis de mise en concurrence au JORF</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-13"><span>Avis de réception</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-14"><span>Avis des collectivités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-15"><span>Avis des services et commissions consultatives</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-16"><span>Avis du CGE et de l'IGEDD</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-17"><span>Avis du Conseil d'Etat</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-18"><span>Avis du demandeur sur les prescriptions proposées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-19"><span>Avis du préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-20"><span>Classement sans suite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-21"><span>Complétude de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-22"><span>Concertation interministérielle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-23"><span>Consultation des administrations centrales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-24"><span>Décision de l'autorité administrative</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-25"><span>Décision de l'Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-26"><span>Décision de la mission autorité environnementale (examen au cas par cas du projet)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-27"><span>Décision du juge administratif</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-28"><span>Décision implicite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-29"><span>Déclaration d'arrêt définitif de travaux (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-30"><span>Déclaration d'irrecevabilité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-31"><span>Déclaration d'ouverture de travaux miniers (DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-32"><span>Demande d'autorisation d'ouverture de travaux miniers (AOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-33"><span>Demande d'informations</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-34"><span>Demande d'informations (avis du DREAL, DEAL ou DGTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-35"><span>Demande d'informations (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-36"><span>Demande de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-37"><span>Demande de compléments (AOTM ou DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-38"><span>Demande de compléments (complétude de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-39"><span>Demande de compléments (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-40"><span>Demande de compléments (décision de la mission autorité environnementale (examen au cas par cas du projet)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-41"><span>Demande de compléments (récépissé de déclaration loi sur l'eau)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-42"><span>Demande de compléments (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-43"><span>Demande de compléments (saisine de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-44"><span>Demande de consentement</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-45"><span>Demande de modification de l'AES</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-46"><span>Dépot de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-47"><span>Désistement du demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-48"><span>Donné acte de la déclaration (DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-49"><span>Enquête publique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-50"><span>Enregistrement de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-51"><span>Expertise DGTM service prévention des risques et industries extractives (DATE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-52"><span>Expertise DREAL ou DGTM service biodiversité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-53"><span>Expertise DREAL ou DGTM service eau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-54"><span>Information du préfet et des collectivités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-55"><span>Informations historiques incomplètes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-56"><span>Memoire de fin de travaux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-57"><span>Mesures de publicité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-58"><span>Modification de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-59"><span>Notification au demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-60"><span>Notification au demandeur (ajournement de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-61"><span>Notification au demandeur (avis défavorable)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-62"><span>Notification au demandeur (avis favorable de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-63"><span>Notification au demandeur (classement sans suite)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-64"><span>Notification au demandeur (initiation de la démarche de retrait)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-65"><span>Notification au demandeur (signature de l'autorisation de recherche minière)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-66"><span>Notification au demandeur (signature de l'avenant à l'autorisation de recherche minière)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-67"><span>Notification au préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-68"><span>Notification des collectivités locales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-69"><span>Paiement des frais de dossier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-70"><span>Paiement des frais de dossier complémentaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-71"><span>Participation du public</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-72"><span>Porter-à-connaissance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-73"><span>Prise en charge par l'Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-74"><span>Publication dans un journal local ou national</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-75"><span>Publication de décision au JORF</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-76"><span>Publication de décision au recueil des actes administratifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-77"><span>Publication de l'avis de décision implicite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-78"><span>Rapport du Conseil d'État</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-79"><span>Rapport du conseil général de l'économie (CGE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-80"><span>Rapport et avis de la DREAL</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-81"><span>Récépissé de déclaration loi sur l'eau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-82"><span>Réception d'information</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-83"><span>Réception d'information (avis du DREAL, DEAL ou DGTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-84"><span>Réception d'information (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-85"><span>Reception de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-86"><span>Recevabilité de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-87"><span>Récolement</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-88"><span>Réponse à la demande de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-89"><span>Réponse à la demande de compléments (complétude de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-90"><span>Réponse à la demande de compléments (décision de la mission autorité environnementale (examen au cas par cas du projet))</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-91"><span>Réponse à la demande de compléments (récépissé de déclaration loi sur l'eau)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-92"><span>Réponse à la demande de compléments (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-93"><span>Réponse à la demande de compléments (saisine de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-94"><span>Réponse du demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-95"><span>Résultat final de la mise en concurrence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-96"><span>Saisine de l'autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-97"><span>Saisine de l'autorité signataire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-98"><span>Saisine de la commission départementale des mines (CDM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-99"><span>Saisine de la commission des autorisations de recherches minières (CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-100"><span>Saisine du Conseil d'Etat</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-101"><span>Saisine du conseil général de l'économie (CGE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-102"><span>Saisine du préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-103"><span>Signature de l'autorisation de recherche minière</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-104"><span>Transmission du projet de prescriptions au demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-105"><span>Validation du paiement des frais de dossier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-106"><span>Validation du paiement des frais de dossier complémentaires</span></li>
+ </ul>
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-1w" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
<!---->
</button>
</div>
- <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut
+ <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut (optionnel)
<!---->
</label><select class="fr-select" id="select_271" aria-label="Statut" name="select_271" 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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_670" id="input_670" 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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_74" id="input_74" type="date" value="2022-03-03">
<!---->
@@ -30,26 +136,132 @@
<div class="fr-p-2w fr-tile--shadow" style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
<div class="flex" style="align-items: center;">
<div id="select-etape-type-1_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type-1" type="text" name="select-etape-type-1" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="Enregistrement de la demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type-1" type="text" title="Type d'étape" name="select-etape-type-1" class="fr-input" placeholder="Type d'étape" autocomplete="off" role="combobox" aria-controls="select-etape-type-1-control" aria-activedescendant="select-etape-type-1-control" aria-expanded="false" aria-autocomplete="list" value="Enregistrement de la demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-1-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-1-control-0"><span>Abrogation de la décision</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-1"><span>Arrêté d'ouverture des travaux miniers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-2"><span>Arrêté de prescriptions complémentaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-3"><span>Arrêté de second donner acte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-4"><span>Arrêté préfectoral de premier donner acte (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-5"><span>Arrêté préfectoral de sursis à statuer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-6"><span>Attestation de constitution de garanties financières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-7"><span>Avenant à l'autorisation de recherche minière</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-8"><span>Avis de demande concurrente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-9"><span>Avis de l'autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-10"><span>Avis de la commission départementale des mines (CDM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-11"><span>Avis de la commission des autorisations de recherches minières (CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-12"><span>Avis de mise en concurrence au JORF</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-13"><span>Avis de réception</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-14"><span>Avis des collectivités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-15"><span>Avis des services et commissions consultatives</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-16"><span>Avis du CGE et de l'IGEDD</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-17"><span>Avis du Conseil d'Etat</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-18"><span>Avis du demandeur sur les prescriptions proposées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-19"><span>Avis du préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-20"><span>Classement sans suite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-21"><span>Complétude de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-22"><span>Concertation interministérielle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-23"><span>Consultation des administrations centrales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-24"><span>Décision de l'autorité administrative</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-25"><span>Décision de l'Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-26"><span>Décision de la mission autorité environnementale (examen au cas par cas du projet)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-27"><span>Décision du juge administratif</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-28"><span>Décision implicite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-29"><span>Déclaration d'arrêt définitif de travaux (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-30"><span>Déclaration d'irrecevabilité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-31"><span>Déclaration d'ouverture de travaux miniers (DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-32"><span>Demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-33"><span>Demande d'autorisation d'ouverture de travaux miniers (AOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-34"><span>Demande d'informations</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-35"><span>Demande d'informations (avis du DREAL, DEAL ou DGTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-36"><span>Demande d'informations (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-37"><span>Demande de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-38"><span>Demande de compléments (AOTM ou DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-39"><span>Demande de compléments (complétude de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-40"><span>Demande de compléments (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-41"><span>Demande de compléments (décision de la mission autorité environnementale (examen au cas par cas du projet)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-42"><span>Demande de compléments (récépissé de déclaration loi sur l'eau)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-43"><span>Demande de compléments (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-44"><span>Demande de compléments (saisine de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-45"><span>Demande de consentement</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-46"><span>Demande de modification de l'AES</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-47"><span>Dépot de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-48"><span>Désistement du demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-49"><span>Donné acte de la déclaration (DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-50"><span>Enquête publique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-51"><span>Expertise DGTM service prévention des risques et industries extractives (DATE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-52"><span>Expertise DREAL ou DGTM service biodiversité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-53"><span>Expertise DREAL ou DGTM service eau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-54"><span>Information du préfet et des collectivités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-55"><span>Informations historiques incomplètes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-56"><span>Memoire de fin de travaux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-57"><span>Mesures de publicité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-58"><span>Modification de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-59"><span>Notification au demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-60"><span>Notification au demandeur (ajournement de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-61"><span>Notification au demandeur (avis défavorable)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-62"><span>Notification au demandeur (avis favorable de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-63"><span>Notification au demandeur (classement sans suite)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-64"><span>Notification au demandeur (initiation de la démarche de retrait)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-65"><span>Notification au demandeur (signature de l'autorisation de recherche minière)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-66"><span>Notification au demandeur (signature de l'avenant à l'autorisation de recherche minière)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-67"><span>Notification au préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-68"><span>Notification des collectivités locales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-69"><span>Paiement des frais de dossier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-70"><span>Paiement des frais de dossier complémentaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-71"><span>Participation du public</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-72"><span>Porter-à-connaissance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-73"><span>Prise en charge par l'Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-74"><span>Publication dans un journal local ou national</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-75"><span>Publication de décision au JORF</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-76"><span>Publication de décision au recueil des actes administratifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-77"><span>Publication de l'avis de décision implicite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-78"><span>Rapport du Conseil d'État</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-79"><span>Rapport du conseil général de l'économie (CGE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-80"><span>Rapport et avis de la DREAL</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-81"><span>Récépissé de déclaration loi sur l'eau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-82"><span>Réception d'information</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-83"><span>Réception d'information (avis du DREAL, DEAL ou DGTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-84"><span>Réception d'information (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-85"><span>Reception de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-86"><span>Recevabilité de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-87"><span>Récolement</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-88"><span>Réponse à la demande de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-89"><span>Réponse à la demande de compléments (complétude de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-90"><span>Réponse à la demande de compléments (décision de la mission autorité environnementale (examen au cas par cas du projet))</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-91"><span>Réponse à la demande de compléments (récépissé de déclaration loi sur l'eau)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-92"><span>Réponse à la demande de compléments (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-93"><span>Réponse à la demande de compléments (saisine de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-94"><span>Réponse du demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-95"><span>Résultat final de la mise en concurrence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-96"><span>Saisine de l'autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-97"><span>Saisine de l'autorité signataire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-98"><span>Saisine de la commission départementale des mines (CDM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-99"><span>Saisine de la commission des autorisations de recherches minières (CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-100"><span>Saisine du Conseil d'Etat</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-101"><span>Saisine du conseil général de l'économie (CGE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-102"><span>Saisine du préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-103"><span>Signature de l'autorisation de recherche minière</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-104"><span>Transmission du projet de prescriptions au demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-105"><span>Validation du paiement des frais de dossier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-1-control-106"><span>Validation du paiement des frais de dossier complémentaires</span></li>
+ </ul>
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-1w" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
<!---->
</button>
</div>
- <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_878">Statut
+ <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_878">Statut (optionnel)
<!---->
</label><select class="fr-select" id="select_878" aria-label="Statut" name="select_878" 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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_967" id="input_967" 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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_25" id="input_25" type="date" value="2025-03-03">
<!---->
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 7bf447fa0..79254659e 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
@@ -2,26 +2,132 @@
<div class="fr-p-2w fr-tile--shadow" style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;">
<div class="flex" style="align-items: center;">
<div id="select-etape-type-0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type-0" type="text" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" value="Demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type-0" type="text" title="Type d'étape" name="select-etape-type-0" class="fr-input" placeholder="Type d'étape" autocomplete="off" role="combobox" aria-controls="select-etape-type-0-control" aria-activedescendant="select-etape-type-0-control" aria-expanded="false" aria-autocomplete="list" value="Demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-0-control-0"><span>Abrogation de la décision</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-1"><span>Arrêté d'ouverture des travaux miniers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-2"><span>Arrêté de prescriptions complémentaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-3"><span>Arrêté de second donner acte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-4"><span>Arrêté préfectoral de premier donner acte (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-5"><span>Arrêté préfectoral de sursis à statuer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-6"><span>Attestation de constitution de garanties financières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-7"><span>Avenant à l'autorisation de recherche minière</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-8"><span>Avis de demande concurrente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-9"><span>Avis de l'autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-10"><span>Avis de la commission départementale des mines (CDM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-11"><span>Avis de la commission des autorisations de recherches minières (CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-12"><span>Avis de mise en concurrence au JORF</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-13"><span>Avis de réception</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-14"><span>Avis des collectivités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-15"><span>Avis des services et commissions consultatives</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-16"><span>Avis du CGE et de l'IGEDD</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-17"><span>Avis du Conseil d'Etat</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-18"><span>Avis du demandeur sur les prescriptions proposées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-19"><span>Avis du préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-20"><span>Classement sans suite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-21"><span>Complétude de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-22"><span>Concertation interministérielle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-23"><span>Consultation des administrations centrales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-24"><span>Décision de l'autorité administrative</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-25"><span>Décision de l'Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-26"><span>Décision de la mission autorité environnementale (examen au cas par cas du projet)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-27"><span>Décision du juge administratif</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-28"><span>Décision implicite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-29"><span>Déclaration d'arrêt définitif de travaux (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-30"><span>Déclaration d'irrecevabilité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-31"><span>Déclaration d'ouverture de travaux miniers (DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-32"><span>Demande d'autorisation d'ouverture de travaux miniers (AOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-33"><span>Demande d'informations</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-34"><span>Demande d'informations (avis du DREAL, DEAL ou DGTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-35"><span>Demande d'informations (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-36"><span>Demande de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-37"><span>Demande de compléments (AOTM ou DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-38"><span>Demande de compléments (complétude de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-39"><span>Demande de compléments (DADT)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-40"><span>Demande de compléments (décision de la mission autorité environnementale (examen au cas par cas du projet)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-41"><span>Demande de compléments (récépissé de déclaration loi sur l'eau)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-42"><span>Demande de compléments (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-43"><span>Demande de compléments (saisine de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-44"><span>Demande de consentement</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-45"><span>Demande de modification de l'AES</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-46"><span>Dépot de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-47"><span>Désistement du demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-48"><span>Donné acte de la déclaration (DOTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-49"><span>Enquête publique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-50"><span>Enregistrement de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-51"><span>Expertise DGTM service prévention des risques et industries extractives (DATE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-52"><span>Expertise DREAL ou DGTM service biodiversité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-53"><span>Expertise DREAL ou DGTM service eau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-54"><span>Information du préfet et des collectivités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-55"><span>Informations historiques incomplètes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-56"><span>Memoire de fin de travaux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-57"><span>Mesures de publicité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-58"><span>Modification de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-59"><span>Notification au demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-60"><span>Notification au demandeur (ajournement de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-61"><span>Notification au demandeur (avis défavorable)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-62"><span>Notification au demandeur (avis favorable de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-63"><span>Notification au demandeur (classement sans suite)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-64"><span>Notification au demandeur (initiation de la démarche de retrait)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-65"><span>Notification au demandeur (signature de l'autorisation de recherche minière)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-66"><span>Notification au demandeur (signature de l'avenant à l'autorisation de recherche minière)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-67"><span>Notification au préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-68"><span>Notification des collectivités locales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-69"><span>Paiement des frais de dossier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-70"><span>Paiement des frais de dossier complémentaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-71"><span>Participation du public</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-72"><span>Porter-à-connaissance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-73"><span>Prise en charge par l'Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-74"><span>Publication dans un journal local ou national</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-75"><span>Publication de décision au JORF</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-76"><span>Publication de décision au recueil des actes administratifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-77"><span>Publication de l'avis de décision implicite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-78"><span>Rapport du Conseil d'État</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-79"><span>Rapport du conseil général de l'économie (CGE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-80"><span>Rapport et avis de la DREAL</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-81"><span>Récépissé de déclaration loi sur l'eau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-82"><span>Réception d'information</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-83"><span>Réception d'information (avis du DREAL, DEAL ou DGTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-84"><span>Réception d'information (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-85"><span>Reception de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-86"><span>Recevabilité de la demande</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-87"><span>Récolement</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-88"><span>Réponse à la demande de compléments</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-89"><span>Réponse à la demande de compléments (complétude de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-90"><span>Réponse à la demande de compléments (décision de la mission autorité environnementale (examen au cas par cas du projet))</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-91"><span>Réponse à la demande de compléments (récépissé de déclaration loi sur l'eau)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-92"><span>Réponse à la demande de compléments (recevabilité de la demande)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-93"><span>Réponse à la demande de compléments (saisine de la CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-94"><span>Réponse du demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-95"><span>Résultat final de la mise en concurrence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-96"><span>Saisine de l'autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-97"><span>Saisine de l'autorité signataire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-98"><span>Saisine de la commission départementale des mines (CDM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-99"><span>Saisine de la commission des autorisations de recherches minières (CARM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-100"><span>Saisine du Conseil d'Etat</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-101"><span>Saisine du conseil général de l'économie (CGE)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-102"><span>Saisine du préfet</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-103"><span>Signature de l'autorisation de recherche minière</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-104"><span>Transmission du projet de prescriptions au demandeur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-105"><span>Validation du paiement des frais de dossier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-0-control-106"><span>Validation du paiement des frais de dossier complémentaires</span></li>
+ </ul>
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-1w" title="Supprime la valeur" aria-label="Supprime la valeur" type="button">
<!---->
</button>
</div>
- <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut
+ <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut (optionnel)
<!---->
</label><select class="fr-select" id="select_271" aria-label="Statut" name="select_271" 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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="date">
<!---->
</div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Avant le
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_74" id="input_74" type="date">
<!---->
diff --git a/packages/ui/src/components/demarches/filtres-etapes.tsx b/packages/ui/src/components/demarches/filtres-etapes.tsx
index 9a1a9b775..118362da3 100644
--- a/packages/ui/src/components/demarches/filtres-etapes.tsx
+++ b/packages/ui/src/components/demarches/filtres-etapes.tsx
@@ -85,13 +85,14 @@ export const FiltresEtapes = defineComponent<Props>(props => {
<>
<DsfrSelect
class="fr-mb-0"
+ required={false}
initialValue={value.statutId ?? null}
legend={{ main: 'Statut' }}
items={map(getEtapesStatuts(value.typeId), ({ id, nom }) => ({ id, label: nom }))}
valueChanged={statutValueSelected(n)}
/>
- <DsfrInput initialValue={value.dateDebut} legend={{ main: 'Après le' }} type={{ type: 'date' }} valueChanged={dateDebutChanged(n)} />
- <DsfrInput initialValue={value.dateFin} legend={{ main: 'Avant le' }} type={{ type: 'date' }} valueChanged={dateFinChanged(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)} />
</>
) : null}
</div>
diff --git a/packages/ui/src/components/demarches/page.stories_snapshots_Demarches.html b/packages/ui/src/components/demarches/page.stories_snapshots_Demarches.html
index 35889850e..186ca44df 100644
--- a/packages/ui/src/components/demarches/page.stories_snapshots_Demarches.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Demarches.html
@@ -1,492 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 1200 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 6;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_173" id="input_173" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesTypesIds">Types de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span class="h6 bold">Amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span class="h6 bold">Cession</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div><span class="h6 bold">Conversion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div><span class="h6 bold">Déchéance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div><span class="h6 bold">Demande de titre d'exploitation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div><span class="h6 bold">Déplacement de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div><span class="h6 bold">Extension de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div><span class="h6 bold">Extension de substance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div><span class="h6 bold">Fusion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div><span class="h6 bold">Mutation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div><span class="h6 bold">Mutation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div><span class="h6 bold">Octroi</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Prolongation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div><span class="h6 bold">Prolongation 1</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div><span class="h6 bold">Prolongation 2</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div><span class="h6 bold">Prolongation exceptionnelle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">
- <!---->
- </label></div><span class="h6 bold">Prorogation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">
- <!---->
- </label></div><span class="h6 bold">Renonciation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">
- <!---->
- </label></div><span class="h6 bold">Renonciation totale</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
- <!---->
- </label></div><span class="h6 bold">Résiliation anticipée d'amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
- <!---->
- </label></div><span class="h6 bold">Retrait</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesStatutsIds">Statuts de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesInclues">Types d'étapes incluses</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesInclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 10;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesExclues">Types d'étapes exclues</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesExclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Démarches</h1>
@@ -533,13 +47,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -552,13 +66,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -571,13 +85,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -590,13 +104,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -609,13 +123,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -628,13 +142,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -647,13 +161,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -666,13 +180,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -685,13 +199,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -704,13 +218,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -742,5 +256,813 @@
</nav>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 1200 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-200"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-201"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesTypesIds">Types de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">Amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">Cession
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">Conversion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">Déchéance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">Demande de titre d'exploitation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">Déplacement de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">Extension de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Extension de substance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">Fusion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">Mutation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">Mutation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">Octroi
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">Prolongation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Prolongation 1
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">Prolongation 2
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">Prolongation exceptionnelle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">Prorogation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">Renonciation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">Renonciation totale
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">Résiliation anticipée d'amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">Retrait
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de démarche" aria-label="Décocher toutes les cases à cocher Types de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de démarche" aria-label="Cocher toutes les cases à cocher Types de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesStatutsIds">Statuts de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesInclues">Types d'étapes incluses</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesExclues">Types d'étapes exclues</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
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 fc0549ad6..e49707576 100644
--- a/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
@@ -1,492 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: -1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 6;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_173" id="input_173" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesTypesIds">Types de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span class="h6 bold">Amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span class="h6 bold">Cession</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div><span class="h6 bold">Conversion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div><span class="h6 bold">Déchéance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div><span class="h6 bold">Demande de titre d'exploitation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div><span class="h6 bold">Déplacement de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div><span class="h6 bold">Extension de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div><span class="h6 bold">Extension de substance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div><span class="h6 bold">Fusion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div><span class="h6 bold">Mutation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div><span class="h6 bold">Mutation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div><span class="h6 bold">Octroi</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Prolongation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div><span class="h6 bold">Prolongation 1</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div><span class="h6 bold">Prolongation 2</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div><span class="h6 bold">Prolongation exceptionnelle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">
- <!---->
- </label></div><span class="h6 bold">Prorogation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">
- <!---->
- </label></div><span class="h6 bold">Renonciation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">
- <!---->
- </label></div><span class="h6 bold">Renonciation totale</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
- <!---->
- </label></div><span class="h6 bold">Résiliation anticipée d'amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
- <!---->
- </label></div><span class="h6 bold">Retrait</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesStatutsIds">Statuts de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesInclues">Types d'étapes incluses</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesInclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 10;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesExclues">Types d'étapes exclues</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesExclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Travaux</h1>
@@ -631,5 +145,813 @@
</div>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-200"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-201"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesTypesIds">Types de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">Amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">Cession
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">Conversion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">Déchéance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">Demande de titre d'exploitation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">Déplacement de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">Extension de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Extension de substance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">Fusion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">Mutation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">Mutation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">Octroi
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">Prolongation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Prolongation 1
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">Prolongation 2
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">Prolongation exceptionnelle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">Prorogation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">Renonciation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">Renonciation totale
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">Résiliation anticipée d'amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">Retrait
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de démarche" aria-label="Décocher toutes les cases à cocher Types de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de démarche" aria-label="Cocher toutes les cases à cocher Types de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesStatutsIds">Statuts de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesInclues">Types d'étapes incluses</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesExclues">Types d'étapes exclues</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/demarches/page.stories_snapshots_Travaux.html b/packages/ui/src/components/demarches/page.stories_snapshots_Travaux.html
index 30f1d3ec5..9bb3a63d6 100644
--- a/packages/ui/src/components/demarches/page.stories_snapshots_Travaux.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Travaux.html
@@ -1,402 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 1200 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 6;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_173" id="input_173" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-travauxTypesIds">Types de travaux</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-travauxTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span class="h6 bold">Autorisation d'ouverture de travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'arrêt définitif des travaux</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div><span class="h6 bold">Déclaration d'ouverture de travaux</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesStatutsIds">Statuts de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesInclues">Types d'étapes incluses</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesInclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 10;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesExclues">Types d'étapes exclues</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesExclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Travaux</h1>
@@ -443,13 +47,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -462,13 +66,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -481,13 +85,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -500,13 +104,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -519,13 +123,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -538,13 +142,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -557,13 +161,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -576,13 +180,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -595,13 +199,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
</td>
<td>
- <p class="h6 bold mb-0">Permis exclusif de recherches</p>
+ <p class="mb-0">Permis exclusif de recherches</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
</td>
<td>
- <p class="h6 bold mb-0">Déclaration d'arrêt définitif des travaux</p>
+ <p class="mb-0">Déclaration d'arrêt définitif des travaux</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
@@ -614,13 +218,13 @@
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</td>
<td>
- <p class="h6 bold mb-0">Concession</p>
+ <p class="mb-0">Concession</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
</td>
<td>
- <p class="h6 bold mb-0">Amodiation</p>
+ <p class="mb-0">Amodiation</p>
</td>
<td>
<p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
@@ -652,5 +256,687 @@
</nav>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 1200 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-200"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-201"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_travauxTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_travauxTypesIds">Types de travaux</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">Autorisation d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">Déclaration d'arrêt définitif des travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">Déclaration d'ouverture de travaux
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de travaux" aria-label="Décocher toutes les cases à cocher Types de travaux" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de travaux" aria-label="Cocher toutes les cases à cocher Types de travaux" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesStatutsIds">Statuts de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesInclues">Types d'étapes incluses</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesExclues">Types d'étapes exclues</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
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 4a3290c0b..b5d4cbd44 100644
--- a/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
@@ -1,492 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: -1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-domainesIds">Domaines</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-domainesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
- <div class="h6 bold fr-pl-1w">Carrières</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
- <div class="h6 bold fr-pl-1w">Combustibles fossiles</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
- <div class="h6 bold fr-pl-1w">Éléments radioactifs</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
- <div class="h6 bold fr-pl-1w">Géothermie</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
- <div class="h6 bold fr-pl-1w">Granulats marins</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
- <div class="h6 bold fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
- <div class="h6 bold fr-pl-1w">Minéraux et métaux</div>
- </div>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div>
- <div style="display: flex; align-items: baseline;">
- <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
- <div class="h6 bold fr-pl-1w">Stockages souterrains</div>
- </div>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-typesIds">Types de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-typesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span class="h6 bold">Autorisation d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span class="h6 bold">Autorisation de prospections préalables</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span class="h6 bold">Autorisation de recherches</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span class="h6 bold">Concession</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span class="h6 bold">Indéterminé</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span class="h6 bold">Permis d'exploitation</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span class="h6 bold">Permis exclusif de carrières</span></span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759">
- <!---->
- </label></div><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span class="h6 bold">Permis exclusif de recherches</span></span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-statutsIds">Statuts de titre</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-statutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 5;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-substancesIds">Substances</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-substancesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Substances_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Substances" type="text" name="filters_autocomplete_Substances" style="outline: none;" placeholder="Substances" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 6;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-references">Références</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-references">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="input_173" id="input_173" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 7;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesTypesIds">Types de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesTypesIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">
- <!---->
- </label></div><span class="h6 bold">Amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">
- <!---->
- </label></div><span class="h6 bold">Cession</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">
- <!---->
- </label></div><span class="h6 bold">Conversion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">
- <!---->
- </label></div><span class="h6 bold">Déchéance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">
- <!---->
- </label></div><span class="h6 bold">Demande de titre d'exploitation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">
- <!---->
- </label></div><span class="h6 bold">Déplacement de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">
- <!---->
- </label></div><span class="h6 bold">Extension de périmètre</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">
- <!---->
- </label></div><span class="h6 bold">Extension de substance</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">
- <!---->
- </label></div><span class="h6 bold">Fusion</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">
- <!---->
- </label></div><span class="h6 bold">Mutation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">
- <!---->
- </label></div><span class="h6 bold">Mutation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">
- <!---->
- </label></div><span class="h6 bold">Octroi</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Prolongation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">
- <!---->
- </label></div><span class="h6 bold">Prolongation 1</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">
- <!---->
- </label></div><span class="h6 bold">Prolongation 2</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">
- <!---->
- </label></div><span class="h6 bold">Prolongation exceptionnelle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">
- <!---->
- </label></div><span class="h6 bold">Prorogation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">
- <!---->
- </label></div><span class="h6 bold">Renonciation partielle</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">
- <!---->
- </label></div><span class="h6 bold">Renonciation totale</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">
- <!---->
- </label></div><span class="h6 bold">Résiliation anticipée d'amodiation</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
- <!---->
- </label></div><span class="h6 bold">Retrait</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 8;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-demarchesStatutsIds">Statuts de démarche</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-demarchesStatutsIds">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_152" type="checkbox"><label class="fr-label" for="checkbox_152">
- <!---->
- </label></div>
- <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 9;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesInclues">Types d'étapes incluses</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesInclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 10;"><button class="fr-sidemenu__btn" aria-expanded="false" aria-controls="fr-sidemenu-item-etapesExclues">Types d'étapes exclues</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-etapesExclues">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <!---->
- <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Travaux</h1>
@@ -633,5 +147,813 @@
</div>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_domainesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_domainesIds">Domaines</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine carrières" aria-label="Domaine carrières" style="min-width: 1.5rem; color: black;">C</p>
+ <div class="fr-pl-1w">Carrières</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine combustibles fossiles" aria-label="Domaine combustibles fossiles" style="min-width: 1.5rem; color: black;">F</p>
+ <div class="fr-pl-1w">Combustibles fossiles</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine éléments radioactifs" aria-label="Domaine éléments radioactifs" style="min-width: 1.5rem; color: black;">R</p>
+ <div class="fr-pl-1w">Éléments radioactifs</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 1.5rem; color: black;">G</p>
+ <div class="fr-pl-1w">Géothermie</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine granulats marins" aria-label="Domaine granulats marins" style="min-width: 1.5rem; color: black;">W</p>
+ <div class="fr-pl-1w">Granulats marins</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 1.5rem; color: black;">H</p>
+ <div class="fr-pl-1w">Hydrocarbures liquides ou gazeux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 1.5rem; color: black;">M</p>
+ <div class="fr-pl-1w">Minéraux et métaux</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
+ <div style="display: flex; align-items: baseline;">
+ <p class="fr-tag fr-tag--sm mono" title="Domaine stockages souterrains" aria-label="Domaine stockages souterrains" style="min-width: 1.5rem; color: black;">S</p>
+ <div class="fr-pl-1w">Stockages souterrains</div>
+ </div>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Domaines" aria-label="Décocher toutes les cases à cocher Domaines" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Domaines" aria-label="Cocher toutes les cases à cocher Domaines" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_typesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_typesIds">Types de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ax"></rect></svg><span>Autorisation d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ap"></rect></svg><span>Autorisation de prospections préalables</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_487" type="checkbox"><label class="fr-label" for="checkbox_487"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-ar"></rect></svg><span>Autorisation de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_796" type="checkbox"><label class="fr-label" for="checkbox_796"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-cx"></rect></svg><span>Concession</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-in"></rect></svg><span>Indéterminé</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-px"></rect></svg><span>Permis d'exploitation</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_585" type="checkbox"><label class="fr-label" for="checkbox_585"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pc"></rect></svg><span>Permis exclusif de carrières</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_759" type="checkbox"><label class="fr-label" for="checkbox_759"><span><svg width="24" height="24" class="mr-s mb--xs"><rect width="24" height="24" class="svg-fill-pattern-pr"></rect></svg><span>Permis exclusif de recherches</span></span>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de titre" aria-label="Décocher toutes les cases à cocher Types de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de titre" aria-label="Cocher toutes les cases à cocher Types de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_statutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_statutsIds">Statuts de titre</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_58" type="checkbox"><label class="fr-label" for="checkbox_58">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="demande classée" aria-label="demande classée">demande classée</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_661" type="checkbox"><label class="fr-label" for="checkbox_661">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="demande initiale" aria-label="demande initiale">demande initiale</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_624" type="checkbox"><label class="fr-label" for="checkbox_624">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_267" type="checkbox"><label class="fr-label" for="checkbox_267">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - modification en instance" aria-label="valide - modification en instance">valide - modification en instance</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_119" type="checkbox"><label class="fr-label" for="checkbox_119">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide - survie provisoire" aria-label="valide - survie provisoire">valide - survie provisoire</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_827" type="checkbox"><label class="fr-label" for="checkbox_827">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="valide" aria-label="valide">valide</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de titre" aria-label="Décocher toutes les cases à cocher Statuts de titre" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de titre" aria-label="Cocher toutes les cases à cocher Statuts de titre" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_substancesIds">Substances</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_substancesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_substancesIds" type="text" name="filtres_autocomplete_substancesIds" style="outline: none;" placeholder="Substances" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_substancesIds-control" aria-activedescendant="filtres_autocomplete_substancesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_substancesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_substancesIds-control-0"><span>actinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-1"><span>activités géothermiques de minime importance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-2"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-3"><span>amphibolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-4"><span>andalousite / sillimanite / kyanite - (cyanite - disthène)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-5"><span>andésite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-6"><span>anhydrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-7"><span>anthracite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-8"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-9"><span>ardoises</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-10"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-11"><span>argiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-12"><span>argiles communes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-13"><span>argiles fibreuses (attapulgites ou palygorskites, sépiolites)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-14"><span>argiles kaoliniques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-15"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-16"><span>asphalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-17"><span>astate</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-18"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-19"><span>autres éléments radioactifs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-20"><span>barytine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-21"><span>basalte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-22"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-23"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-24"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-25"><span>bitume</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-26"><span>butane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-27"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-28"><span>calcaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-29"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-30"><span>calcaires cimentiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-31"><span>calcschiste</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-32"><span>cendres volcaniques riches en silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-33"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-34"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-35"><span>charbon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-36"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-37"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-38"><span>combustibles fossiles</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-39"><span>cornéenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-40"><span>craie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-41"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-42"><span>dacite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-43"><span>dépôt glaciaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-44"><span>diabase</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-45"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-46"><span>diatomites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-47"><span>diorites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-48"><span>dioxyde de carbone (CO₂)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-49"><span>dolérite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-50"><span>dolomie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-51"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-52"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-53"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-54"><span>éthylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-55"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-56"><span>faluns</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-57"><span>feldspaths</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-58"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-59"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-60"><span>gabbro</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-61"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-62"><span>galets</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-63"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-64"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-65"><span>gaz combustible</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-66"><span>gaz naturel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-67"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-68"><span>gîtes géothermiques basse énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-69"><span>gîtes géothermiques basse température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-70"><span>gîtes géothermiques haute énergie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-71"><span>gîtes géothermiques haute température</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-72"><span>gneiss</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-73"><span>granite et granulite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-74"><span>granodiorite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-75"><span>granulats marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-76"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-77"><span>graviers siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-78"><span>grès</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-79"><span>grès silico-ferrugineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-80"><span>gypse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-81"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-82"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-83"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-84"><span>houille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-85"><span>hydrocarbures</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-86"><span>hydrocarbures conventionnels liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-87"><span>hydrocarbures liquides</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-88"><span>hydrocarbures liquides ou gazeux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-89"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-90"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-91"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-92"><span>kaolin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-93"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-94"><span>leptynite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-95"><span>lignite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-96"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-97"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-98"><span>maërl</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-99"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-100"><span>marbres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-101"><span>marnes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-102"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-103"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-104"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-105"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-106"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-107"><span>micas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-108"><span>micaschistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-109"><span>migmatite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-110"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-111"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-112"><span>mylonites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-113"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-114"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-115"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-116"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-117"><span>ocres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-118"><span>ophite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-119"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-120"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-121"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-122"><span>perlite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-123"><span>phonolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-124"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-125"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-126"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-127"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-128"><span>polonium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-129"><span>porphyre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-130"><span>pouzzolane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-131"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-132"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-133"><span>propane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-134"><span>propylène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-135"><span>protactinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-136"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-137"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-138"><span>quartz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-139"><span>quartzites</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-140"><span>radium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-141"><span>radon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-142"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-143"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-144"><span>rhyolite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-145"><span>roches ardoisières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-146"><span>roches détritiques grossières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-147"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-148"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-149"><span>sable extra siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-150"><span>sable siliceux ou silico-calcaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-151"><span>sables a minéraux lourds</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-152"><span>sables coquilliers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-153"><span>sables et graviers alluvionnaires</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-154"><span>sables et graviers marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-155"><span>sables et graviers siliceux marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-156"><span>sables et graviers silico-calcaires marins</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-157"><span>sables et grès industriels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-158"><span>sables moyens à grossiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-159"><span>sables siliceux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-160"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-161"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-162"><span>schistes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-163"><span>schistes bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-164"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-165"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-166"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-167"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-168"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-169"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-170"><span>serpentinite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-171"><span>silex / chert</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-172"><span>silice</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-173"><span>sillimanite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-174"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-175"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-176"><span>stérile d'exploitation</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-177"><span>stockage souterrain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-178"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-179"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-180"><span>syénite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-181"><span>talc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-182"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-183"><span>technétium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-184"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-185"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-186"><span>terre végétale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-187"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-188"><span>thorium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-189"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-190"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-191"><span>tourbe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-192"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-193"><span>trachyte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-194"><span>tuffeau</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-195"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-196"><span>uranium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-197"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-198"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-199"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-200"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_substancesIds-control-201"><span>zirconium</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_references">Références</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Référence DGEC, DEAL, DEB, BRGM, Ifremer, …" class="fr-input" name="filtres_input_references" id="filtres_input_references" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesTypesIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesTypesIds">Types de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_173" type="checkbox"><label class="fr-label" for="checkbox_173">Amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_211" type="checkbox"><label class="fr-label" for="checkbox_211">Cession
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_619" type="checkbox"><label class="fr-label" for="checkbox_619">Conversion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_686" type="checkbox"><label class="fr-label" for="checkbox_686">Déchéance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_954" type="checkbox"><label class="fr-label" for="checkbox_954">Demande de titre d'exploitation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_132" type="checkbox"><label class="fr-label" for="checkbox_132">Déplacement de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_773" type="checkbox"><label class="fr-label" for="checkbox_773">Extension de périmètre
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_785" type="checkbox"><label class="fr-label" for="checkbox_785">Extension de substance
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_253" type="checkbox"><label class="fr-label" for="checkbox_253">Fusion
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_19" type="checkbox"><label class="fr-label" for="checkbox_19">Mutation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_35" type="checkbox"><label class="fr-label" for="checkbox_35">Mutation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_883" type="checkbox"><label class="fr-label" for="checkbox_883">Octroi
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_731" type="checkbox"><label class="fr-label" for="checkbox_731">Prolongation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">Prolongation 1
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_473" type="checkbox"><label class="fr-label" for="checkbox_473">Prolongation 2
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_251" type="checkbox"><label class="fr-label" for="checkbox_251">Prolongation exceptionnelle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_292" type="checkbox"><label class="fr-label" for="checkbox_292">Prorogation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_276" type="checkbox"><label class="fr-label" for="checkbox_276">Renonciation partielle
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_252" type="checkbox"><label class="fr-label" for="checkbox_252">Renonciation totale
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_110" type="checkbox"><label class="fr-label" for="checkbox_110">Résiliation anticipée d'amodiation
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_448" type="checkbox"><label class="fr-label" for="checkbox_448">Retrait
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Types de démarche" aria-label="Décocher toutes les cases à cocher Types de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Types de démarche" aria-label="Cocher toutes les cases à cocher Types de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_demarchesStatutsIds">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_demarchesStatutsIds">Statuts de démarche</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_490" type="checkbox"><label class="fr-label" for="checkbox_490">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté" aria-label="accepté">accepté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_648" type="checkbox"><label class="fr-label" for="checkbox_648">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="accepté et publié" aria-label="accepté et publié">accepté et publié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_726" type="checkbox"><label class="fr-label" for="checkbox_726">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="classé sans suite" aria-label="classé sans suite">classé sans suite</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_380" type="checkbox"><label class="fr-label" for="checkbox_380">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="déposé" aria-label="déposé">déposé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_894" type="checkbox"><label class="fr-label" for="checkbox_894">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="désisté" aria-label="désisté">désisté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_822" type="checkbox"><label class="fr-label" for="checkbox_822">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en construction" aria-label="en construction">en construction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_193" type="checkbox"><label class="fr-label" for="checkbox_193">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="en instruction" aria-label="en instruction">en instruction</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_557" type="checkbox"><label class="fr-label" for="checkbox_557">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="fin de la police des mines" aria-label="fin de la police des mines">fin de la police des mines</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_260" type="checkbox"><label class="fr-label" for="checkbox_260">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="indéterminé" aria-label="indéterminé">indéterminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_287" type="checkbox"><label class="fr-label" for="checkbox_287">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--orange-terre-battue" title="initié" aria-label="initié">initié</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_488" type="checkbox"><label class="fr-label" for="checkbox_488">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté" aria-label="rejeté">rejeté</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_800" type="checkbox"><label class="fr-label" for="checkbox_800">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--purple-glycine" title="rejeté après abrogation" aria-label="rejeté après abrogation">rejeté après abrogation</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_723" type="checkbox"><label class="fr-label" for="checkbox_723">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--green-bourgeon" title="terminé" aria-label="terminé">terminé</p>
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Statuts de démarche" aria-label="Décocher toutes les cases à cocher Statuts de démarche" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Statuts de démarche" aria-label="Cocher toutes les cases à cocher Statuts de démarche" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesInclues">Types d'étapes incluses</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_etape_etapesExclues">Types d'étapes exclues</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <!---->
+ <div style="display: flex; flex-direction: column; font-weight: normal; gap: 1rem;"><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></div>
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/entreprise.stories_snapshots_Complet.html b/packages/ui/src/components/entreprise.stories_snapshots_Complet.html
index 1cf798cfc..2763bf6a4 100644
--- a/packages/ui/src/components/entreprise.stories_snapshots_Complet.html
+++ b/packages/ui/src/components/entreprise.stories_snapshots_Complet.html
@@ -6,16 +6,16 @@
</button></div>
</div>
<div class="fr-pt-8w fr-pb-4w" style="display: flex; gap: 2rem; flex-direction: column;">
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Siren</span><span class="fr-col">SIREN</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Forme juridique</span><span class="fr-col">SAS, société par actions simplifiée</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Établissements</span><span class="fr-col"><span><ul><li class="">16-09-2013 : Nouvel établissement</li><li class="">01-02-2013 : Ancien établissement</li></ul></span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Adresse</span><span class="fr-col"><p>21 par ici<br>38240 CETTE COMMUNE</p></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone</span><span class="fr-col">Telephone</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col"><a class="fr-link" title="email" href="mailto:email">email</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Site</span><span class="fr-col"><a class="fr-link" title="url" href="url" target="_blank" rel="noopener noreferrer">url</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Archivée</span><span class="fr-col">Non</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Utilisateurs de l'entreprise</span><span class="fr-col"><a href="/mocked-href" title="Voir les utilisateurs" class="fr-link" aria-label="Voir les utilisateurs">Voir les utilisateurs</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Titres de l'entreprise</span><span class="fr-col"><a href="/mocked-href" title="Voir les titres" class="fr-link" aria-label="Voir les titres">Voir les titres</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Siren</span><span class="fr-col-12 fr-col-sm">SIREN</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Forme juridique</span><span class="fr-col-12 fr-col-sm">SAS, société par actions simplifiée</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Établissements</span><span class="fr-col-12 fr-col-sm"><span><ul><li class="">16-09-2013 : Nouvel établissement</li><li class="">01-02-2013 : Ancien établissement</li></ul></span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Adresse</span><span class="fr-col-12 fr-col-sm"><p>21 par ici<br>38240 CETTE COMMUNE</p></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone</span><span class="fr-col-12 fr-col-sm">Telephone</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="email" href="mailto:email">email</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Site</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="url" href="url" target="_blank" rel="noopener noreferrer">url</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Archivée</span><span class="fr-col-12 fr-col-sm">Non</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Utilisateurs de l'entreprise</span><span class="fr-col-12 fr-col-sm"><a href="/mocked-href" title="Voir les utilisateurs" class="fr-link" aria-label="Voir les utilisateurs">Voir les utilisateurs</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Titres de l'entreprise</span><span class="fr-col-12 fr-col-sm"><a href="/mocked-href" title="Voir les titres" class="fr-link" aria-label="Voir les titres">Voir les titres</a></span></div>
<div style="overflow-x: auto;">
<div>
<div class="fr-table fr-table--no-scroll" style="overflow: auto;">
@@ -63,7 +63,7 @@
</div>
</div>
<div>
- <h3>Fiscalité</h3>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">
+ <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>
diff --git a/packages/ui/src/components/entreprise.stories_snapshots_NonConnecte.html b/packages/ui/src/components/entreprise.stories_snapshots_NonConnecte.html
index 177887768..d43dc531e 100644
--- a/packages/ui/src/components/entreprise.stories_snapshots_NonConnecte.html
+++ b/packages/ui/src/components/entreprise.stories_snapshots_NonConnecte.html
@@ -6,16 +6,16 @@
</div>
</div>
<div class="fr-pt-8w fr-pb-4w" style="display: flex; gap: 2rem; flex-direction: column;">
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Siren</span><span class="fr-col">Siren</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Forme juridique</span><span class="fr-col">Forme</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Établissement</span><span class="fr-col"><span><ul></ul></span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Adresse</span><span class="fr-col"><p>adresse<br>code postal commune</p></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone</span><span class="fr-col">Telephone</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col"><a class="fr-link" title="email@entreprise.fr" href="mailto:email@entreprise.fr">email@entreprise.fr</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Site</span><span class="fr-col"><a class="fr-link" title="http://urlentreprise" href="http://urlentreprise" target="_blank" rel="noopener noreferrer">http://urlentreprise</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Archivée</span><span class="fr-col">Non</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Siren</span><span class="fr-col-12 fr-col-sm">Siren</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Forme juridique</span><span class="fr-col-12 fr-col-sm">Forme</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Établissement</span><span class="fr-col-12 fr-col-sm"><span><ul></ul></span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Adresse</span><span class="fr-col-12 fr-col-sm"><p>adresse<br>code postal commune</p></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone</span><span class="fr-col-12 fr-col-sm">Telephone</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="email@entreprise.fr" href="mailto:email@entreprise.fr">email@entreprise.fr</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Site</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="http://urlentreprise" href="http://urlentreprise" target="_blank" rel="noopener noreferrer">http://urlentreprise</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Archivée</span><span class="fr-col-12 fr-col-sm">Non</span></div>
<!---->
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Titres de l'entreprise</span><span class="fr-col"><a href="/mocked-href" title="Voir les titres" class="fr-link" aria-label="Voir les titres">Voir les titres</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Titres de l'entreprise</span><span class="fr-col-12 fr-col-sm"><a href="/mocked-href" title="Voir les titres" class="fr-link" aria-label="Voir les titres">Voir les titres</a></span></div>
<!---->
</div>
<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 3e7d7215b..252f764f5 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
@@ -35,20 +35,23 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="date">
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="date">
<!---->
</div>
</div>
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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_74">Description
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="text">
+ <!---->
+ </label><input class="fr-input" name="input_74" id="input_74" 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 15d6f85e7..17c8c77f0 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
@@ -14,20 +14,23 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
<!---->
</div>
</div>
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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_670">Description
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="text">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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 1b3cf8892..44579b3d2 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,20 @@ export const AddEntrepriseDocumentPopup = defineComponent<Props>(props => {
{props.lockedEntrepriseDocumentTypeId ? null : (
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <DsfrSelect legend={{ main: 'Type de document', placeholder: 'Selectionnez un type de document' }} initialValue={null} items={documentsTypes} valueChanged={typeChange} />
+ <DsfrSelect 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 legend={{ main: 'Date de délivrance du document' }} type={{ type: 'date' }} valueChanged={dateChange} />
+ <DsfrInput required={true} legend={{ main: 'Date de délivrance du document' }} type={{ type: 'date' }} valueChanged={dateChange} />
</div>
<div class="fr-fieldset__element">
- <InputFile accept={['pdf']} uploadFile={fileChange} />
+ <InputFile required={true} accept={['pdf']} uploadFile={fileChange} />
</div>
<div class="fr-fieldset__element">
- <DsfrInput legend={{ main: 'Description' }} type={{ type: 'text' }} valueChanged={descriptionChange} />
+ <DsfrInput 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 197e940db..8ee822970 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
@@ -13,13 +13,15 @@
<div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Pays
<!---->
<!---->
- </label><input class="fr-input" name="input_271" id="input_271" disabled="" type="text" value="France">
+ <!---->
+ </label><input class="fr-input" name="input_271" id="input_271" disabled="" required="" type="text" value="France">
<!---->
</div>
<div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Siren
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="text">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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 7aa3c302d..3cddbdc96 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 legend={{ main: 'Pays' }} disabled={true} valueChanged={() => {}} initialValue={'France'} type={{ type: 'text' }} />
- <DsfrInput legend={{ main: 'Siren' }} valueChanged={sirenChange} type={{ type: 'text' }} />
+ <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' }} />
</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 6a2ed377c..bda56d9e0 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,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>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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Téléphone (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_271" id="input_271" type="text" value="0102030405">
<!---->
</div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Adresse électronique
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Adresse électronique (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="text">
<!---->
</div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Site internet
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Site internet (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_74" id="input_74" type="text">
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 c930748d9..242a75fee 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,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>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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Téléphone (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_271" id="input_271" type="text" value="0102030405">
<!---->
</div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Adresse électronique
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Adresse électronique (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="text">
<!---->
</div>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Site internet
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Site internet (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_74" id="input_74" type="text">
diff --git a/packages/ui/src/components/entreprise/edit-popup.tsx b/packages/ui/src/components/entreprise/edit-popup.tsx
index 608466fdf..13f635e00 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 legend={{ main: 'Téléphone' }} type={{ type: 'text' }} valueChanged={telephoneChange} initialValue={telephone.value} />
- <DsfrInput legend={{ main: 'Adresse électronique' }} type={{ type: 'text' }} valueChanged={emailChange} initialValue={email.value} />
- <DsfrInput legend={{ main: 'Site internet' }} type={{ type: 'text' }} valueChanged={urlChange} initialValue={url.value} />
+ <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} />
{isSuper(props.user) ? <DsfrInputCheckbox 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 8e9c32a06..f1a58c95b 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
@@ -1,5 +1,5 @@
<div>
- <h3>Fiscalité</h3>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">
+ <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>
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 97488ff9b..036252bf2 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
@@ -1,5 +1,5 @@
<div>
- <h3>Fiscalité</h3>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">
+ <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>
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 dc719dc17..c7eef7dde 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
@@ -1,5 +1,5 @@
<div>
- <h3>Fiscalité</h3>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">
+ <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>
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 80ac253a2..c051bea59 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
@@ -1,5 +1,5 @@
<div>
- <h3>Fiscalité</h3>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">
+ <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>
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 65964dde9..ce3f87074 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
@@ -1,5 +1,5 @@
<div>
- <h3>Fiscalité</h3>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">
+ <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>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx b/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx
index 850f2c1a4..3e46dffbb 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx
@@ -16,7 +16,6 @@ interface Props {
anneeCourante: CaminoAnnee
annees: Readonly<NonEmptyArray<CaminoAnnee>>
}
-// TODO 2024-05-02: passer en DSFR
export const EntrepriseFiscalite = defineComponent<Props>(props => {
const tabId = ref<CaminoAnnee>(props.anneeCourante)
const data = ref<AsyncData<Fiscalite>>({ status: 'LOADING' })
@@ -67,7 +66,7 @@ export const EntrepriseFiscalite = defineComponent<Props>(props => {
<div>
{isVisible.value ? (
<>
- <h3>Fiscalité</h3>
+ <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} />
</>
diff --git a/packages/ui/src/components/entreprises.stories_snapshots_NonConnecte.html b/packages/ui/src/components/entreprises.stories_snapshots_NonConnecte.html
index 1451bce56..ba5d5000e 100644
--- a/packages/ui/src/components/entreprises.stories_snapshots_NonConnecte.html
+++ b/packages/ui/src/components/entreprises.stories_snapshots_NonConnecte.html
@@ -1,31 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsEntreprise">Nom / Siren / Siret</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsEntreprise">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Entreprises</h1>
@@ -111,5 +86,25 @@
<!---->
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsEntreprise">Nom / Siren / Siret</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="filtres_input_nomsEntreprise" id="filtres_input_nomsEntreprise" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/entreprises.stories_snapshots_canCreateEntreprise.html b/packages/ui/src/components/entreprises.stories_snapshots_canCreateEntreprise.html
index 583380310..ab3a96857 100644
--- a/packages/ui/src/components/entreprises.stories_snapshots_canCreateEntreprise.html
+++ b/packages/ui/src/components/entreprises.stories_snapshots_canCreateEntreprise.html
@@ -1,31 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsEntreprise">Nom / Siren / Siret</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsEntreprise">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Entreprises</h1>
@@ -113,5 +88,25 @@
<!---->
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsEntreprise">Nom / Siren / Siret</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="Nom d'entreprise ou d'établissement, Siren, ou Siret" class="fr-input" name="filtres_input_nomsEntreprise" id="filtres_input_nomsEntreprise" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
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 f4ceff2e9..a204086af 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_AffichageAide.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_AffichageAide.html
@@ -18,16 +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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
<!---->
</div>
</div>
@@ -37,13 +39,102 @@
<!---->
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances</label>
<div style="display: flex; flex-direction: column;">
<div>
<div style="display: flex;" class="fr-mt-1w">
<div id="typeahead_substances_0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_0" type="text" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_0" type="text" title="" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_0-control" aria-activedescendant="typeahead_substances_0-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_0-control-0"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-1"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-2"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-3"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-4"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-5"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-6"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-7"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-8"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-9"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-10"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-11"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-12"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-13"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-14"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-15"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-16"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-17"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-18"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-19"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-20"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-21"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-22"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-23"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-24"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-25"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-26"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-27"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-28"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-29"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-30"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-31"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-32"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-33"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-34"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-35"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-36"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-37"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-38"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-39"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-40"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-41"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-42"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-43"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-44"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-45"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-46"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-47"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-48"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-49"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-50"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-51"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-52"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-53"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-54"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-55"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-56"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-57"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-58"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-59"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-60"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-61"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-62"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-63"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-64"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-65"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-66"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-67"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-68"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-69"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-70"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-71"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-72"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-73"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-74"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-75"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-76"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-77"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-78"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-79"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-80"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-81"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-82"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-83"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-84"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-85"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-86"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-87"><span>zirconium</span></li>
+ </ul>
</div>
<!---->
<!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-delete-bin-line fr-ml-2w" title="Supprimer la substance " aria-label="Supprimer la substance " type="button">
@@ -76,7 +167,7 @@
<div class="fr-mb-1w">
<div>
<fieldset class="fr-fieldset" id="mecanise" aria-labelledby="mecanise-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -95,7 +186,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">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">
<!---->
@@ -225,8 +316,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_453">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_453">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_453" id="textarea_453" value=""></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 38b776753..cd66ff911 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
@@ -18,16 +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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="6">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="6">
<!---->
</div>
</div>
@@ -37,13 +39,102 @@
<!---->
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances</label>
<div style="display: flex; flex-direction: column;">
<div>
<div style="display: flex;" class="fr-mt-1w">
<div id="typeahead_substances_0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_0" type="text" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_0" type="text" title="" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_0-control" aria-activedescendant="typeahead_substances_0-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_0-control-0"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-1"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-2"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-3"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-4"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-5"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-6"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-7"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-8"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-9"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-10"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-11"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-12"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-13"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-14"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-15"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-16"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-17"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-18"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-19"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-20"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-21"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-22"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-23"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-24"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-25"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-26"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-27"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-28"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-29"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-30"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-31"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-32"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-33"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-34"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-35"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-36"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-37"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-38"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-39"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-40"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-41"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-42"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-43"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-44"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-45"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-46"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-47"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-48"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-49"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-50"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-51"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-52"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-53"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-54"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-55"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-56"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-57"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-58"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-59"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-60"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-61"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-62"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-63"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-64"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-65"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-66"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-67"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-68"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-69"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-70"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-71"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-72"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-73"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-74"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-75"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-76"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-77"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-78"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-79"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-80"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-81"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-82"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-83"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-84"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-85"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-86"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-87"><span>zirconium</span></li>
+ </ul>
</div>
<!---->
<!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-delete-bin-line fr-ml-2w" title="Supprimer la substance " aria-label="Supprimer la substance " type="button">
@@ -273,8 +364,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_25">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_25">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_25" id="textarea_25" value=""></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 af5e543fc..fffa47dbb 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_Creation.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_Creation.html
@@ -13,9 +13,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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date">
+ </label><input class="fr-input" name="input_271" id="input_271" 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 01a3fae03..01b0834bc 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_DemandeArmComplete.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_DemandeArmComplete.html
@@ -14,19 +14,22 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-02-01">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-02-01">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Modification de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Enregistrement de la demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
@@ -50,16 +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="input_74">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_74" id="input_74" 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="input_878">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_878" id="input_878" type="number" value="6">
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="6">
<!---->
</div>
</div>
@@ -67,23 +72,121 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="10 A" aria-label="10 A">10 A</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer 10 A" aria-label="Supprimer 10 A">10 A</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>2GRE</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>45-8 AVANT-MONTS</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-2"><span>45-8 FONTS-BOUILLANTS</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-3"><span>6EME SENS IMMOBILIER ENTREPRISES</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-4"><span>8 communes de la vallée de Vicdessos</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-5"><span>Aboeka Alphonse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-6"><span>ABOEKA METAL</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-7"><span>Aboeka Thomas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-8"><span>ABOUNAMI GOLD</span></li>
+ </ul>
</div>
</div>
<!---->
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances</label>
<div style="display: flex; flex-direction: column;">
<div>
<div style="display: flex;" class="fr-mt-1w">
<div id="typeahead_substances_0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_0" type="text" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" value="argent"></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_0" type="text" title="" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_0-control" aria-activedescendant="typeahead_substances_0-control" aria-expanded="false" aria-autocomplete="list" value="argent"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_0-control-0"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-1"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-2"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-3"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-4"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-5"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-6"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-7"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-8"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-9"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-10"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-11"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-12"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-13"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-14"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-15"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-16"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-17"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-18"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-19"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-20"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-21"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-22"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-23"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-24"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-25"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-26"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-27"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-28"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-29"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-30"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-31"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-32"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-33"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-34"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-35"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-36"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-37"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-38"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-39"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-40"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-41"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-42"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-43"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-44"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-45"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-46"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-47"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-48"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-49"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-50"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-51"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-52"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-53"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-54"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-55"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-56"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-57"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-58"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-59"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-60"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-61"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-62"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-63"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-64"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-65"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-66"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-67"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-68"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-69"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-70"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-71"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-72"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-73"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-74"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-75"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-76"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-77"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-78"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-79"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-80"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-81"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-82"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-83"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-84"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-85"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-86"><span>zirconium</span></li>
+ </ul>
</div>
<!---->
<!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-delete-bin-line fr-ml-2w" title="Supprimer la substance argent" aria-label="Supprimer la substance argent" type="button">
@@ -118,7 +221,7 @@
<div class="fr-mb-1w">
<div>
<fieldset class="fr-fieldset" id="mecanise" aria-labelledby="mecanise-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -137,7 +240,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_453">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">
<!---->
@@ -176,8 +279,78 @@
<div id="tabpanel-points-487-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-487" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_796_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_796" type="text" name="typeahead_796" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_796" type="text" title="" name="typeahead_796" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_796-control" aria-activedescendant="typeahead_796-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_796-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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_796-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -186,7 +359,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -570,8 +743,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_216">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_216">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_216" id="textarea_216" value=""></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 77f45d5e7..5fcd8a48d 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_Modification.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_Modification.html
@@ -18,16 +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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
<!---->
</div>
</div>
@@ -37,13 +39,102 @@
<!---->
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances</label>
<div style="display: flex; flex-direction: column;">
<div>
<div style="display: flex;" class="fr-mt-1w">
<div id="typeahead_substances_0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_0" type="text" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_0" type="text" title="" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_0-control" aria-activedescendant="typeahead_substances_0-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_0-control-0"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-1"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-2"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-3"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-4"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-5"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-6"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-7"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-8"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-9"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-10"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-11"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-12"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-13"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-14"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-15"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-16"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-17"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-18"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-19"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-20"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-21"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-22"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-23"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-24"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-25"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-26"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-27"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-28"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-29"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-30"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-31"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-32"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-33"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-34"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-35"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-36"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-37"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-38"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-39"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-40"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-41"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-42"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-43"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-44"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-45"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-46"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-47"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-48"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-49"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-50"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-51"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-52"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-53"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-54"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-55"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-56"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-57"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-58"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-59"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-60"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-61"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-62"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-63"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-64"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-65"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-66"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-67"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-68"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-69"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-70"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-71"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-72"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-73"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-74"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-75"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-76"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-77"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-78"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-79"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-80"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-81"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-82"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-83"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-84"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-85"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-86"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-87"><span>zirconium</span></li>
+ </ul>
</div>
<!---->
<!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-delete-bin-line fr-ml-2w" title="Supprimer la substance " aria-label="Supprimer la substance " type="button">
@@ -76,7 +167,7 @@
<div class="fr-mb-1w">
<div>
<fieldset class="fr-fieldset" id="mecanise" aria-labelledby="mecanise-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -95,7 +186,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">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">
<!---->
@@ -225,8 +316,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_453">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_453">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_453" id="textarea_453" value=""></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_556" type="checkbox"><label class="fr-label" for="checkbox_556">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 35c988f29..ac4bb8c12 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_ModificationDemandeHeritee.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_ModificationDemandeHeritee.html
@@ -14,19 +14,22 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-02-01">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-02-01">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="modification de la demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="modification de la demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
@@ -51,16 +54,18 @@
<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="input_74">Durée (années)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" disabled="" type="number" value="1">
+ </label><input class="fr-input" name="input_74" id="input_74" 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="input_878">Durée (mois)
<!---->
<!---->
- </label><input class="fr-input" name="input_878" id="input_878" disabled="" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_878" id="input_878" disabled="" required="" type="number" value="0">
<!---->
</div>
</div>
@@ -74,7 +79,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Titulaires *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Titulaires</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="10 A" aria-label="10 A">10 A</p>
</div>
@@ -89,7 +94,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</div>
@@ -174,8 +179,78 @@
<div id="tabpanel-points-585-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-585" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_759_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_759" type="text" name="typeahead_759" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_759" type="text" title="" name="typeahead_759" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_759-control" aria-activedescendant="typeahead_759-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_759-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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_759-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -184,7 +259,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -364,8 +439,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_661">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_661">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_661" id="textarea_661" value=""></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 c13a00798..6e5142561 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
@@ -13,17 +13,18 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 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="input_271">Date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
</label><input class="fr-input" name="input_271" id="input_271" 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="select_670">Statut
<!---->
</label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670" value="Exempté">
<option selected="" value="Exempté">Exempté</option>
@@ -33,7 +34,7 @@
</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é *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -54,8 +55,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element">
- <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_878" id="textarea_878" value="description"></textarea></div>
</div>
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 d9c9395db..77cb17052 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
@@ -13,17 +13,18 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 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="input_271">Date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
</label><input class="fr-input" name="input_271" id="input_271" 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="select_670">Statut
<!---->
</label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670">
<option value="Favorable">Favorable</option>
@@ -34,7 +35,7 @@
</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é *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -55,8 +56,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element">
- <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_878" id="textarea_878" value=""></textarea></div>
</div>
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 6852e8b4a..8fb142833 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
@@ -13,17 +13,18 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 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="input_271">Date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
</label><input class="fr-input" name="input_271" id="input_271" 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="select_670">Statut
<!---->
</label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670" value="Favorable">
<option selected="" value="Favorable">Favorable</option>
@@ -35,7 +36,7 @@
</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é *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -56,7 +57,8 @@
</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="textarea_878">Description
+ <!---->
<!---->
</label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="description"></textarea></div>
</div>
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 8d450c286..9bfaf74d1 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
@@ -13,17 +13,18 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 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="input_271">Date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
</label><input class="fr-input" name="input_271" id="input_271" 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="select_670">Statut
<!---->
</label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670" value="Favorable">
<option selected="" value="Favorable">Favorable</option>
@@ -35,7 +36,7 @@
</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é *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -56,7 +57,8 @@
</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="textarea_878">Description
+ <!---->
<!---->
</label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="description"></textarea></div>
</div>
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 f20169607..ffd34d1ad 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
@@ -14,25 +14,52 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Type d'avis</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>Autre avis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-1"><span>Avis d'un Service Administratif Local</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-2"><span>Avis d'une collectivité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-3"><span>Avis de l'Agence Régionale de Santé (ARS)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-4"><span>Avis de l'Autorité militaire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-5"><span>Avis de l'État-major Orpaillage et Pêche Illicite (EMOPI)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-6"><span>Avis de l'IFREMER</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-7"><span>Avis de l'Institut National de l'origine et de la Qualité</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-8"><span>Avis de l'Office National des Forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-9"><span>Avis de la Caisse Générale de Sécurité Sociale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-10"><span>Avis de la Direction de l'Alimentation de l'Agriculture et de la Forêt (DRAF)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-11"><span>Avis de la Direction Départementale des Territoires et de la Mer (DDTM)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-12"><span>Avis de la Direction régionale de l'économie, de l'emploi, du travail et des solidarités</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-13"><span>Avis de la Direction Régionale Des Affaires Culturelles (DRAC)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-14"><span>Avis de la Direction Regionale Des Finances Publiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-15"><span>Avis de la Gendarmerie Nationale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-16"><span>avis de la mission autorité environnementale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-17"><span>Avis du Conseil Départemental de l'Environnement et des Risques Sanitaires et Technologiques (CODERST)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-18"><span>Avis du Parc National</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-19"><span>Avis du Parc Naturel Marin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-20"><span>avis du propriétaire du sol</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-21"><span>Avis du Service Milieux Naturels Biodiversité Sites Et Paysages (MNBST) de la DGTM</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-22"><span>Confirmation de l'accord du propriétaire du sol</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-23"><span>Décision au cas par cas</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-24"><span>Expertise de l'Office National des Forêts</span></li>
+ </ul>
</div>
</div>
</div>
</fieldset>
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 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_670">Date *
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Date
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
</label><input class="fr-input" name="input_670" id="input_670" 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_74">Statut *
+ <div class="fr-select-group fr-select-group--disabled"><label class="fr-label" for="select_74">Statut
<!---->
</label><select class="fr-select" id="select_74" aria-label="Statut" disabled="" name="select_74">
<option value="Non renseigné">Non renseigné</option>
@@ -41,7 +68,7 @@
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-fieldset" id="radio_878" aria-labelledby="radio_878-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_878-legend">Visibilité *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_878-legend">Visibilité
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -62,8 +89,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element">
- <div class="fr-input-group"><label class="fr-label" for="textarea_967">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_967">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_967" id="textarea_967" value=""></textarea></div>
</div>
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 e0acf3050..f776425bb 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.tsx
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.tsx
@@ -76,6 +76,7 @@ export const AddEtapeAvisPopup = defineComponent<Props>(props => {
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element">
<InputFile
+ required={false}
accept={['pdf']}
uploadFile={file => {
etapeAvisFile.value = file
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 ae068db84..d56606806 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
@@ -14,19 +14,26 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Type de document</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>Autre document</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-1"><span>Documents cartographiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-2"><span>Dossier "Loi sur l'eau"</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-3"><span>Justificatif de paiement</span></li>
+ </ul>
</div>
</div>
</div>
</fieldset>
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element" style="order: 1;">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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" style="order: 2;">
<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">Visibilité
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Visibilité (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -47,8 +54,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element" style="order: 3;">
- <div class="fr-input-group"><label class="fr-label" for="textarea_74">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_74">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_74" id="textarea_74" value=""></textarea></div>
</div>
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 1019afe2b..7feff1b7e 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
@@ -13,11 +13,13 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element" style="order: 1;">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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" 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é
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -38,8 +40,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element" style="order: 3;">
- <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_670" id="textarea_670" value="description"></textarea></div>
</div>
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 c8d3cfe08..069934bab 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
@@ -13,11 +13,13 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element" style="order: 1;">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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" 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é
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -38,7 +40,8 @@
</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="textarea_670">Description
+ <!---->
<!---->
</label><textarea class="fr-input" name="textarea_670" id="textarea_670" required="" value="description"></textarea></div>
</div>
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 f73bbe8f9..015274d0e 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
@@ -14,19 +14,25 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Type de document</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>Documents cartographiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-1"><span>Dossier "Loi sur l'eau"</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-2"><span>Justificatif de paiement</span></li>
+ </ul>
</div>
</div>
</div>
</fieldset>
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element" style="order: 1;">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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" style="order: 2;">
<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">Visibilité
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Visibilité (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -42,8 +48,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element" style="order: 3;">
- <div class="fr-input-group"><label class="fr-label" for="textarea_74">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_74">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_74" id="textarea_74" value=""></textarea></div>
</div>
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 bac22dd3a..59b6d5aa5 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
@@ -13,11 +13,13 @@
<!---->
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element" style="order: 1;">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<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 class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><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" 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é
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -33,8 +35,7 @@
</fieldset>
</div>
<div class="fr-fieldset__element" style="order: 3;">
- <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description
- <!---->
+ <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_670" id="textarea_670" value=""></textarea></div>
</div>
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 df6bdfd8c..b8c46a6a2 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.tsx
+++ b/packages/ui/src/components/etape/add-etape-document-popup.tsx
@@ -88,6 +88,7 @@ export const AddEtapeDocumentPopup = defineComponent<Props>(props => {
<fieldset class="fr-fieldset" id="text">
<div class="fr-fieldset__element" style={{ order: 1 }}>
<InputFile
+ required={true}
accept={['pdf']}
uploadFile={file => {
etapeDocumentFile.value = file
diff --git a/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_Default.html b/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_Default.html
index 9704a18f1..e32abce2e 100644
--- a/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_Default.html
@@ -1,4 +1,6 @@
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>optionNom1</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_WithInitialValue.html b/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_WithInitialValue.html
index 1ebcc1462..9f93b319d 100644
--- a/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_WithInitialValue.html
+++ b/packages/ui/src/components/etape/autocomplete-entreprise-single.stories_snapshots_WithInitialValue.html
@@ -1,4 +1,7 @@
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value="optionNom2"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="optionNom2"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-control-0"><span>optionNom1</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_271-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/autocomplete-entreprises.stories.tsx b/packages/ui/src/components/etape/autocomplete-entreprises.stories.tsx
index 49be287aa..67549880a 100644
--- a/packages/ui/src/components/etape/autocomplete-entreprises.stories.tsx
+++ b/packages/ui/src/components/etape/autocomplete-entreprises.stories.tsx
@@ -12,11 +12,12 @@ export default meta
const onEntreprisesUpdate = action('onEntreprisesUpdate')
export const Default: StoryFn = () => (
- <AutocompleteEntreprises name="titulaires" allEntities={[{ id: newEntrepriseId('optionId1'), nom: 'optionNom1', legal_siren: null }]} onEntreprisesUpdate={onEntreprisesUpdate} />
+ <AutocompleteEntreprises id="titulaires" name="titulaires" allEntities={[{ id: newEntrepriseId('optionId1'), nom: 'optionNom1', legal_siren: null }]} onEntreprisesUpdate={onEntreprisesUpdate} />
)
export const WithEntitiesAlreadyPresent: StoryFn = () => (
<AutocompleteEntreprises
+ id="amodiataires"
name="amodiataires"
allEntities={[
{ id: newEntrepriseId('optionId1'), nom: 'optionNom1', legal_siren: null },
diff --git a/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_Default.html b/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_Default.html
index dbbd11368..71db8028d 100644
--- a/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_Default.html
@@ -1,4 +1,6 @@
-<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+<div id="titulaires_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="titulaires" type="text" name="titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="titulaires-control" aria-activedescendant="titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titulaires-control-0"><span>optionNom1</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_WithEntitiesAlreadyPresent.html b/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_WithEntitiesAlreadyPresent.html
index 64fb34a06..fc5b4b517 100644
--- a/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_WithEntitiesAlreadyPresent.html
+++ b/packages/ui/src/components/etape/autocomplete-entreprises.stories_snapshots_WithEntitiesAlreadyPresent.html
@@ -1,4 +1,8 @@
-<div id="filters_autocomplete_amodiataires_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom10" aria-label="optionNom10">optionNom10</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom2" aria-label="optionNom2">optionNom2</button><input id="filters_autocomplete_amodiataires" type="text" name="filters_autocomplete_amodiataires" style="outline: none;" placeholder="amodiataires" autocomplete="off" value=""></div>
- <!---->
+<div id="amodiataires_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom10" aria-label="Supprimer optionNom10">optionNom10</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom2" aria-label="Supprimer optionNom2">optionNom2</button><input id="amodiataires" type="text" name="amodiataires" style="outline: none;" placeholder="amodiataires" autocomplete="off" role="combobox" aria-controls="amodiataires-control" aria-activedescendant="amodiataires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="amodiataires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="amodiataires-control-0"><span>optionNom3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="amodiataires-control-1"><span>optionNom4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="amodiataires-control-2"><span>optionNom5</span></li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/autocomplete-entreprises.tsx b/packages/ui/src/components/etape/autocomplete-entreprises.tsx
index 1d43df140..679b0efc9 100644
--- a/packages/ui/src/components/etape/autocomplete-entreprises.tsx
+++ b/packages/ui/src/components/etape/autocomplete-entreprises.tsx
@@ -5,6 +5,7 @@ import { isNullOrUndefinedOrEmpty, stringArrayEquals } from 'camino-common/src/t
import { TypeAheadSmartMultiple } from '../_ui/typeahead-smart-multiple'
interface Props {
+ id: string
nonSelectableEntities?: EntrepriseId[]
selectedEntities?: EntrepriseId[]
allEntities: Entreprise[]
@@ -39,6 +40,7 @@ export const AutocompleteEntreprises = defineComponent<Props>(props => {
return () => (
<TypeAheadSmartMultiple
+ id={props.id}
filter={{
name: props.name,
value: mySelectedEntities.value.map(id => id),
@@ -51,4 +53,4 @@ export const AutocompleteEntreprises = defineComponent<Props>(props => {
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-AutocompleteEntreprises.props = ['onEntreprisesUpdate', 'nonSelectableEntities', 'selectedEntities', 'allEntities', 'name']
+AutocompleteEntreprises.props = ['id', 'onEntreprisesUpdate', 'nonSelectableEntities', 'selectedEntities', 'allEntities', 'name']
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 a3e7217c5..28dbd972e 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,16 +1,19 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-01-01">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Demande</strong></li>
+ </ul>
</div>
</div>
<!---->
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 ce4e9b912..11cf14b09 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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-01-01">
+ </label><input class="fr-input" name="input_271" id="input_271" 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 329cb53a6..706e7a6b6 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,14 +1,14 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-01-01">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
<!---->
</div>
<div class=" fr-mt-2w" style="display: flex; justify-content: center;">
<!---->
- <div class="fr-alert fr-alert--error fr-alert--sm">
+ <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
<p>Une erreur est survenue</p>
</div>
<!---->
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 1f9a5baf3..4e9147017 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,19 +1,21 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-01-01">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Enregistrement de la demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
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 1f9a5baf3..4e9147017 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,19 +1,21 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2023-01-01">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Enregistrement de la demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
diff --git a/packages/ui/src/components/etape/date-type-edit.tsx b/packages/ui/src/components/etape/date-type-edit.tsx
index 55140a600..184580fde 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 type={{ type: 'date' }} valueChanged={onDateChanged} initialValue={props.etape.date} legend={{ main: 'Date' }} />
+ <DsfrInput 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.tsx b/packages/ui/src/components/etape/entreprises-documents-edit.tsx
index 2774e9a80..2e18f597e 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
+ required={false}
items={map(tdeEntrepriseDocuments.value, ({ id, nom }) => ({ id, label: nom }))}
legend={{ main: 'Ajouter un nouveau type de document', visible: false }}
valueChanged={addEntrepriseDocumentType(eId)}
@@ -402,6 +403,7 @@ const EntrepriseSelect: FunctionalComponent<{
<>
{isNotNullNorUndefinedNorEmpty(options) ? (
<DsfrSelect
+ required={true}
initialValue={props.entrepriseDocuments.id === '' ? entrepriseDocumentIdValidator.parse('') : props.entrepriseDocuments.id}
items={options}
legend={{ main: legend, visible: false }}
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 87a29ff0f..ae5840656 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
@@ -10,19 +10,24 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2022-02-02">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Consultation des administrations centrales</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Avis de la commission des autorisations de recherches minières (CARM)</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2"><strong>Avis des services et commissions consultatives</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-3"><strong>Enregistrement de la demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
@@ -46,16 +51,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="input_74">Durée (années)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ </label><input class="fr-input" name="input_74" id="input_74" 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="input_878">Durée (mois)
<!---->
<!---->
- </label><input class="fr-input" name="input_878" id="input_878" type="number" value="4">
+ <!---->
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -67,10 +74,18 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>Nom de l'entreprise 3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>Nom de l'entreprise 4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-2"><span>Nom de l'entreprise 5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-3"><span>Nom de l'entreprise 6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-4"><span>Nom de l'entreprise 7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-5"><span>Nom de l'entreprise 8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-6"><span>Nom de l'entreprise 9</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -78,7 +93,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</div>
@@ -111,7 +126,7 @@
<div class="fr-mb-1w">
<div>
<fieldset class="fr-fieldset" id="mecanise" aria-labelledby="mecanise-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -130,7 +145,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_487">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">
<!---->
@@ -742,8 +757,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_216">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_216">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_216" id="textarea_216" value="Super notes de cette story"></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_482" type="checkbox"><label class="fr-label" for="checkbox_482">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 cc5c5eb45..557d16de2 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
@@ -10,19 +10,24 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2022-02-02">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="consultation des administrations centrales"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="consultation des administrations centrales"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Avis de la commission des autorisations de recherches minières (CARM)</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Avis des services et commissions consultatives</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-3"><strong>Demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
@@ -141,8 +146,7 @@
</div>
</div>
<!---->
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_670">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_670">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_670" id="textarea_670" value="Super notes de cette story"></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 ae3dc6ad6..fe018e765 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
@@ -10,19 +10,24 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2022-02-02">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="avis de la commission des autorisations de recherches minières (CARM)"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="avis de la commission des autorisations de recherches minières (CARM)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Consultation des administrations centrales</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Avis des services et commissions consultatives</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-3"><strong>Demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fav">
<option selected="" disabled="" value="fav">favorable</option>
@@ -47,16 +52,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="input_74">Durée (années)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ </label><input class="fr-input" name="input_74" id="input_74" 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="input_878">Durée (mois)
<!---->
<!---->
- </label><input class="fr-input" name="input_878" id="input_878" type="number" value="4">
+ <!---->
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -68,10 +75,18 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>Nom de l'entreprise 3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>Nom de l'entreprise 4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-2"><span>Nom de l'entreprise 5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-3"><span>Nom de l'entreprise 6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-4"><span>Nom de l'entreprise 7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-5"><span>Nom de l'entreprise 8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-6"><span>Nom de l'entreprise 9</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -94,7 +109,7 @@
</div>
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</div>
@@ -171,8 +186,7 @@
</div>
<!---->
<!---->
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_796">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_796">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_796" id="textarea_796" value="Super notes de cette story"></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_216" type="checkbox"><label class="fr-label" for="checkbox_216">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 28c56263b..4947961cb 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
@@ -10,19 +10,24 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2022-02-02">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Consultation des administrations centrales</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Avis de la commission des autorisations de recherches minières (CARM)</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2"><strong>Avis des services et commissions consultatives</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-3"><strong>Enregistrement de la demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
@@ -46,16 +51,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="input_74">Durée (années)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ </label><input class="fr-input" name="input_74" id="input_74" 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="input_878">Durée (mois)
<!---->
<!---->
- </label><input class="fr-input" name="input_878" id="input_878" type="number" value="4">
+ <!---->
+ </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -67,10 +74,18 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>Nom de l'entreprise 3</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>Nom de l'entreprise 4</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-2"><span>Nom de l'entreprise 5</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-3"><span>Nom de l'entreprise 6</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-4"><span>Nom de l'entreprise 7</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-5"><span>Nom de l'entreprise 8</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-6"><span>Nom de l'entreprise 9</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -93,7 +108,7 @@
</div>
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</div>
@@ -123,7 +138,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_796">Volume (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_796" id="input_796" type="number" min="0">
@@ -134,7 +149,7 @@
</div>
<div class="fr-mb-1w">
<div>
- <div class="fr-select-group"><label class="fr-label" for="select_482">Unité du volume
+ <div class="fr-select-group"><label class="fr-label" for="select_482">Unité du volume (optionnel)
<!---->
</label><select class="fr-select" id="select_482" aria-label="Unité du volume" name="select_482">
<option value="deg">degré</option>
@@ -189,8 +204,78 @@
<div id="tabpanel-points-759-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-759" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_58_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_58" type="text" name="typeahead_58" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_58" type="text" title="" name="typeahead_58" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_58-control" aria-activedescendant="typeahead_58-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_58-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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_58-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -199,7 +284,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -434,8 +519,7 @@
<!---->
</div>
</div>
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_661">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_661">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_661" id="textarea_661" value="Super notes de cette story"></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_684" type="checkbox"><label class="fr-label" for="checkbox_684">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></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 b79d69735..7cd9468f3 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
@@ -10,19 +10,24 @@
<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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2022-02-02">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
<!---->
</div>
<div class="fr-mt-2w">
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="Avis des services et commissions consultatives"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="Avis des services et commissions consultatives"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Consultation des administrations centrales</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Avis de la commission des autorisations de recherches minières (CARM)</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-3"><strong>Demande</strong></li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
@@ -141,8 +146,7 @@
</div>
</div>
<!---->
- <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_670">Notes
- <!---->
+ <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_670">Notes (optionnel)
<!---->
</label><textarea class="fr-input" name="textarea_670" id="textarea_670" value="Super notes de cette story"></textarea></div>
<div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
diff --git a/packages/ui/src/components/etape/etape-edit-form.tsx b/packages/ui/src/components/etape/etape-edit-form.tsx
index fbd747ffc..6ffc39330 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 initialValue={props.etape.note.valeur} class="fr-mt-2w" style="flex-grow: 1" legend={{ main: 'Notes' }} valueChanged={onUpdateNotes} />
+ <DsfrTextarea required={false} initialValue={props.etape.note.valeur} class="fr-mt-2w" style="flex-grow: 1" legend={{ main: 'Notes' }} valueChanged={onUpdateNotes} />
<DsfrInputCheckbox
legend={{ main: 'Cette note est un avertissement', description: 'Apparait sur le résumé de la démarche' }}
valueChanged={onUpdateNoteAvertissement}
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 d14241580..7b0f426ca 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,16 +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" 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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="4">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -23,10 +25,13 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom1" aria-label="optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom1" aria-label="Supprimer optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -34,7 +39,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 a369643c5..e9c7330c4 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,16 +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" 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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="4">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -26,7 +28,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 822e1b9ad..7c21f8b30 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,16 +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" 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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="4">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -22,8 +24,7 @@
</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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_25" id="input_25" type="date" value="2022-02-02">
<!---->
@@ -31,8 +32,7 @@
<!---->
</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
- <!---->
+ <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/yyyy</span>
<!---->
</label><input class="fr-input" name="input_772" id="input_772" type="date">
<!---->
@@ -40,10 +40,13 @@
<!---->
</div>
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom1" aria-label="optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom1" aria-label="Supprimer optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -51,7 +54,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 d14241580..7b0f426ca 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,16 +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" 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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="4">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -23,10 +25,13 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom1" aria-label="optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom1" aria-label="Supprimer optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -34,7 +39,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 d14241580..7b0f426ca 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,16 +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" 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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="4">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -23,10 +25,13 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom1" aria-label="optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom1" aria-label="Supprimer optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -34,7 +39,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 11929ba27..b8bc5955d 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,16 +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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input fr-input--error" name="input_670" id="input_670" type="number" aria-describedby="input_670-info" value="10">
+ <!---->
+ </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>
</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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="0">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
<!---->
</div>
</div>
@@ -19,10 +21,13 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom1" aria-label="optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom1" aria-label="Supprimer optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -30,7 +35,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 822f93a30..d888ea386 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,16 +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" 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="input_670">Durée (années)
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="number" value="0">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" 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="input_74">Durée (mois)
+ <!---->
<!---->
<!---->
- </label><input class="fr-input" name="input_74" id="input_74" type="number" value="4">
+ </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
<!---->
</div>
</div>
@@ -23,10 +25,13 @@
</div>
<!---->
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_titulaires">Titulaires</label>
<div id="filters_autocomplete_titulaires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="optionNom1" aria-label="optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer optionNom1" aria-label="Supprimer optionNom1">optionNom1</button><input id="filters_autocomplete_titulaires" type="text" name="filters_autocomplete_titulaires" style="outline: none;" placeholder="titulaires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_titulaires-control" aria-activedescendant="filters_autocomplete_titulaires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_titulaires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_titulaires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_titulaires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
@@ -34,15 +39,18 @@
<div class="fr-mb-1w">
<div class="fr-input-group fr-mb-0"><label class="fr-label" for="filters_autocomplete_amodiataires">Amodiataires</label>
<div id="filters_autocomplete_amodiataires_wrapper" class="_typeahead_8eddf1 fr-mt-1w">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_amodiataires" type="text" name="filters_autocomplete_amodiataires" style="outline: none;" placeholder="amodiataires" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_amodiataires" type="text" name="filters_autocomplete_amodiataires" style="outline: none;" placeholder="amodiataires" autocomplete="off" role="combobox" aria-controls="filters_autocomplete_amodiataires-control" aria-activedescendant="filters_autocomplete_amodiataires-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filters_autocomplete_amodiataires-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filters_autocomplete_amodiataires-control-0"><span>optionNom2</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filters_autocomplete_amodiataires-control-1"><span>optionNom3</span></li>
+ </ul>
</div>
</div>
<!---->
</div>
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</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 2d12aa343..28b091beb 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
@@ -6,7 +6,7 @@
<!---->
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
</div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.tsx b/packages/ui/src/components/etape/fondamentales-edit.tsx
index 9875dcaad..2298844bf 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.tsx
+++ b/packages/ui/src/components/etape/fondamentales-edit.tsx
@@ -15,6 +15,7 @@ import { isNotNullNorUndefined, isNotNullNorUndefinedNorEmpty } from 'camino-com
import { DsfrInput } from '../_ui/dsfr-input'
import { FlattenEtape } from 'camino-common/src/etape-form'
import { ZERO_KM2 } from 'camino-common/src/number'
+import { fr } from '@codegouvfr/react-dsfr'
export type EtapeFondamentaleEdit = Pick<FlattenEtape, 'typeId' | 'dateDebut' | 'dateFin' | 'duree' | 'titulaires' | 'amodiataires' | 'substances' | 'perimetre' | 'date' | 'titreDemarcheId'>
interface Props {
@@ -81,19 +82,22 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
)
const datesEdit = computed<InputAbsent | InputPresentOptional>(() => canEditDates(props.titreTypeId, props.demarcheTypeId, props.etape.typeId, props.user))
+ const datesRequiredCheck = computed<boolean>(() => datesEdit.value.visibility === 'present' && datesEdit.value.required)
const titulairesEdit = computed<InputPresence>(() => canEditTitulaires(props.titreTypeId, props.demarcheTypeId, props.user))
const titulairesLabel = computed<string>(() => {
if (titulairesEdit.value.visibility === 'present') {
- return titulairesEdit.value.required ? 'Titulaires *' : 'Titulaires'
+ return 'Titulaires'
}
return ''
})
+ const titulairesRequiredCheck = computed<boolean>(() => titulairesEdit.value.visibility === 'present' && titulairesEdit.value.required)
+ const amodiatairesRequiredCheck = computed<boolean>(() => amodiatairesEdit.value.visibility === 'present' && amodiatairesEdit.value.required)
const amodiatairesEdit = computed<InputPresence>(() => canEditAmodiataires(props.titreTypeId, props.demarcheTypeId, props.user))
const amodiatairesLabel = computed<string>(() => {
if (amodiatairesEdit.value.visibility === 'present') {
- return amodiatairesEdit.value.required ? 'Amodiataires *' : 'Amodiataires'
+ return 'Amodiataires'
}
return ''
})
@@ -137,10 +141,11 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
}
return () => (
- <div class="fr-grid-row">
- <div class="fr-col-12 fr-col-xl-6">
+ <div class={fr.cx('fr-grid-row')}>
+ <div class={[fr.cx('fr-col-12'), fr.cx('fr-col-xl-6')]}>
{dureeEdit.value.visibility === 'present' ? (
<HeritageEdit
+ required={!dureeOptionalCheck.value}
updateHeritage={updateDureeHeritage}
hasHeritageValue={isNotNullNorUndefined(props.etape.duree.etapeHeritee?.value)}
prop={editedEtape.value.duree}
@@ -148,36 +153,40 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
write={() => (
<div style={{ display: 'flex' }}>
<DsfrInput
- legend={{ main: `Durée (années)${!dureeOptionalCheck.value ? ' *' : ''}`, info: !dureeValid.value.valid ? { type: 'error', value: dureeValid.value.message } : undefined }}
+ legend={{ main: 'Durée (années)', info: !dureeValid.value.valid ? { type: 'error', value: dureeValid.value.message } : undefined }}
+ required={!dureeOptionalCheck.value}
type={{ type: 'number' }}
valueChanged={updateAnsDuree}
initialValue={ans.value}
/>
<DsfrInput
- legend={{ main: `Durée (mois)${!dureeOptionalCheck.value ? ' *' : ''}` }}
+ legend={{ main: 'Durée (mois)' }}
+ required={!dureeOptionalCheck.value}
type={{ type: 'number' }}
valueChanged={updateMoisDuree}
initialValue={mois.value}
- class="fr-ml-2w"
+ class={fr.cx('fr-ml-2w')}
/>
</div>
)}
read={heritagePropEtape => (
<div style={{ display: 'flex' }}>
<DsfrInput
- legend={{ main: `Durée (années)${!dureeOptionalCheck.value ? ' *' : ''}` }}
+ legend={{ main: 'Durée (années)' }}
+ required={!dureeOptionalCheck.value}
type={{ type: 'number' }}
valueChanged={() => {}}
disabled={true}
initialValue={dureeToAns(heritagePropEtape?.value)}
/>
<DsfrInput
- legend={{ main: `Durée (mois)${!dureeOptionalCheck.value ? ' *' : ''}` }}
+ legend={{ main: 'Durée (mois)' }}
+ required={!dureeOptionalCheck.value}
type={{ type: 'number' }}
valueChanged={() => {}}
initialValue={dureeToMois(heritagePropEtape?.value)}
disabled={true}
- class="fr-ml-2w"
+ class={fr.cx('fr-ml-2w')}
/>
</div>
)}
@@ -187,37 +196,63 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
{datesEdit.value.visibility === 'present' ? (
<>
<HeritageEdit
+ required={datesRequiredCheck.value}
updateHeritage={updateDateDebutHeritage}
hasHeritageValue={isNotNullNorUndefined(props.etape.dateDebut.etapeHeritee?.value)}
prop={editedEtape.value.dateDebut}
label="Date de début"
- write={() => <DsfrInput type={{ type: 'date' }} legend={{ main: 'Date de début' }} initialValue={props.etape.dateDebut.value} valueChanged={dateDebutChanged} />}
- read={heritagePropEtape => <DsfrInput type={{ type: 'date' }} legend={{ main: 'Date de début' }} initialValue={heritagePropEtape?.value} valueChanged={() => {}} disabled={true} />}
+ write={() => (
+ <DsfrInput required={datesRequiredCheck.value} type={{ type: 'date' }} legend={{ main: 'Date de début' }} initialValue={props.etape.dateDebut.value} valueChanged={dateDebutChanged} />
+ )}
+ read={heritagePropEtape => (
+ <DsfrInput
+ required={datesRequiredCheck.value}
+ type={{ type: 'date' }}
+ legend={{ main: 'Date de début' }}
+ initialValue={heritagePropEtape?.value}
+ valueChanged={() => {}}
+ disabled={true}
+ />
+ )}
/>
<HeritageEdit
+ required={datesRequiredCheck.value}
updateHeritage={updateDateFinHeritage}
hasHeritageValue={isNotNullNorUndefined(props.etape.dateFin.etapeHeritee?.value)}
prop={editedEtape.value.dateFin}
label="Date d’échéance"
- write={() => <DsfrInput type={{ type: 'date' }} legend={{ main: 'Date d’échéance' }} initialValue={props.etape.dateFin.value} valueChanged={dateFinChanged} />}
- read={heritagePropEtape => <DsfrInput type={{ type: 'date' }} legend={{ main: 'Date d’échéance' }} initialValue={heritagePropEtape?.value} valueChanged={() => {}} disabled={true} />}
+ write={() => (
+ <DsfrInput required={datesRequiredCheck.value} type={{ type: 'date' }} legend={{ main: 'Date d’échéance' }} initialValue={props.etape.dateFin.value} valueChanged={dateFinChanged} />
+ )}
+ read={heritagePropEtape => (
+ <DsfrInput
+ required={datesRequiredCheck.value}
+ type={{ type: 'date' }}
+ legend={{ main: 'Date d’échéance' }}
+ initialValue={heritagePropEtape?.value}
+ valueChanged={() => {}}
+ disabled={true}
+ />
+ )}
/>
</>
) : null}
{titulairesEdit.value.visibility === 'present' ? (
<HeritageEdit
+ required={titulairesRequiredCheck.value}
updateHeritage={updateTitulairesHeritage}
hasHeritageValue={isNotNullNorUndefinedNorEmpty(props.etape.titulaires.etapeHeritee?.value)}
prop={editedEtape.value.titulaires}
label={titulairesLabel.value}
write={() => (
- <div class="fr-input-group fr-mb-0">
- <label class="fr-label" for="filters_autocomplete_titulaires">
+ <div class={[fr.cx('fr-input-group'), fr.cx('fr-mb-0')]}>
+ <label class={fr.cx('fr-label')} for="filters_autocomplete_titulaires">
{titulairesLabel.value}
</label>
<AutocompleteEntreprises
- class="fr-mt-1w"
+ id="filters_autocomplete_titulaires"
+ class={fr.cx('fr-mt-1w')}
allEntities={props.entreprises}
selectedEntities={editedEtape.value.titulaires.value}
nonSelectableEntities={editedEtape.value.amodiataires.value}
@@ -227,9 +262,9 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
</div>
)}
read={heritagePropEtape => (
- <div class="fr-input-group fr-input-group--disabled fr-mb-0">
- <label class="fr-label">{titulairesLabel.value}</label>
- <div class="fr-mt-1w">{heritagePropEtape?.value.map(id => <DsfrTag key={id} class="fr-mr-1w" ariaLabel={getEntrepriseNom(id)} />)}</div>
+ <div class={[fr.cx('fr-input-group'), fr.cx('fr-input-group--disabled'), fr.cx('fr-mb-0')]}>
+ <label class={[fr.cx('fr-label')]}>{titulairesLabel.value}</label>
+ <div class={[fr.cx('fr-mt-1w')]}>{heritagePropEtape?.value.map(id => <DsfrTag key={id} class={fr.cx('fr-mr-1w')} ariaLabel={getEntrepriseNom(id)} />)}</div>
</div>
)}
/>
@@ -237,17 +272,19 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
{amodiatairesEdit.value.visibility === 'present' ? (
<HeritageEdit
+ required={amodiatairesRequiredCheck.value}
updateHeritage={updateAmodiatairesHeritage}
hasHeritageValue={isNotNullNorUndefinedNorEmpty(props.etape.amodiataires.etapeHeritee?.value)}
prop={editedEtape.value.amodiataires}
label={amodiatairesLabel.value}
write={() => (
- <div class="fr-input-group fr-mb-0">
- <label class="fr-label" for="filters_autocomplete_amodiataires">
+ <div class={[fr.cx('fr-input-group'), fr.cx('fr-mb-0')]}>
+ <label class={[fr.cx('fr-label')]} for="filters_autocomplete_amodiataires">
{amodiatairesLabel.value}
</label>
<AutocompleteEntreprises
- class="fr-mt-1w"
+ id="filters_autocomplete_amodiataires"
+ class={[fr.cx('fr-mt-1w')]}
allEntities={props.entreprises}
selectedEntities={editedEtape.value.amodiataires.value}
nonSelectableEntities={editedEtape.value.titulaires.value}
@@ -257,9 +294,9 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
</div>
)}
read={heritagePropEtape => (
- <div class="fr-input-group fr-input-group--disabled fr-mb-0">
- <label class="fr-label">{amodiatairesLabel.value}</label>
- <div class="fr-mt-1w">{heritagePropEtape?.value.map(id => <DsfrTag key={id} class="fr-mr-1w" ariaLabel={getEntrepriseNom(id)} />)}</div>
+ <div class={[fr.cx('fr-input-group'), fr.cx('fr-input-group--disabled'), fr.cx('fr-mb-0')]}>
+ <label class={[fr.cx('fr-label')]}>{amodiatairesLabel.value}</label>
+ <div class={[fr.cx('fr-mt-1w')]}>{heritagePropEtape?.value.map(id => <DsfrTag key={id} class={[fr.cx('fr-mr-1w')]} ariaLabel={getEntrepriseNom(id)} />)}</div>
</div>
)}
/>
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 a75c0d3d6..82d027698 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
@@ -14,14 +14,84 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGF93 / Lambert-93 - (2154)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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>
</div>
</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
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Type de fichier (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
@@ -45,7 +115,9 @@
</div>
<fieldset class="fr-fieldset" id="fichier">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : csv.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".csv"></div>
+ <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : csv.</span>
+ </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".csv"></div>
</div>
</fieldset>
</form>
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 2ebc7e82c..f9b3ce133 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
@@ -14,14 +14,84 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGF93 / Lambert-93 - (2154)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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>
</div>
</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
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Type de fichier (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
diff --git a/packages/ui/src/components/etape/forages-import-popup.tsx b/packages/ui/src/components/etape/forages-import-popup.tsx
index 00f4cc5fc..0d8a3ce47 100644
--- a/packages/ui/src/components/etape/forages-import-popup.tsx
+++ b/packages/ui/src/components/etape/forages-import-popup.tsx
@@ -72,7 +72,7 @@ export const ForagesImportPopup = defineComponent<Props>(props => {
<fieldset class="fr-fieldset" id="fichier">
<div class="fr-fieldset__element">
- <InputFile accept={[fileType.value]} uploadFile={fileChange} />
+ <InputFile required={true} accept={[fileType.value]} uploadFile={fileChange} />
</div>
</fieldset>
</>
diff --git a/packages/ui/src/components/etape/heritage-edit.stories.tsx b/packages/ui/src/components/etape/heritage-edit.stories.tsx
index 874f734d6..d69e470f4 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories.tsx
+++ b/packages/ui/src/components/etape/heritage-edit.stories.tsx
@@ -16,44 +16,60 @@ const updateHeritage = action('updateHeritage')
export const HeritageDisabled: StoryFn = () => (
<HeritageEdit
+ required={true}
updateHeritage={updateHeritage}
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 legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+ write={() => <DsfrInput 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>}
/>
)
export const HeritageEnabled: StoryFn = () => (
<HeritageEdit
+ required={true}
updateHeritage={updateHeritage}
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 legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+ write={() => <DsfrInput 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>}
/>
)
export const HeritageEnabledWithoutValue: StoryFn = () => (
<HeritageEdit
+ required={true}
updateHeritage={updateHeritage}
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 legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+ write={() => <DsfrInput 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>}
/>
)
export const NoHeritage: StoryFn = () => (
<HeritageEdit
+ required={true}
updateHeritage={updateHeritage}
hasHeritageValue={false}
prop={{ value: null, heritee: false, etapeHeritee: null }}
label="Date de début"
- write={() => <DsfrInput legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+ write={() => <DsfrInput 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>}
+ />
+)
+
+export const Optional: StoryFn = () => (
+ <HeritageEdit
+ required={false}
+ updateHeritage={updateHeritage}
+ 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" />}
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 d9ab3a192..f8705cad3 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,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">
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="date">
+ </label><input class="fr-input" name="input_670" id="input_670" required="" type="date">
<!---->
</div>
<div class="fr-pt-2w fr-pb-2w">
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 75c95c0cf..6f743d08e 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
@@ -3,7 +3,8 @@
<div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Date de début
<!---->
<!---->
- </label><input class="fr-input" name="input_670" id="input_670" disabled="" type="text" value="Non renseigné">
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" disabled="" required="" type="text" value="Non renseigné">
<!---->
</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 f63814c8d..c8300b88b 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">
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_670" id="input_670" type="date">
+ </label><input class="fr-input" name="input_670" id="input_670" 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
new file mode 100644
index 000000000..f6b304a3c
--- /dev/null
+++ b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_Optional.html
@@ -0,0 +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"> (optionnel)<span class="fr-hint-text">au format jj/mm/yyyy</span>
+ <!---->
+ </label><input class="fr-input" name="input_670" id="input_670" type="date">
+ <!---->
+ </div>
+ <!---->
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/heritage-edit.tsx b/packages/ui/src/components/etape/heritage-edit.tsx
index 38863e880..a3daae52e 100644
--- a/packages/ui/src/components/etape/heritage-edit.tsx
+++ b/packages/ui/src/components/etape/heritage-edit.tsx
@@ -23,6 +23,7 @@ type HeritagePossible =
type Props<T extends HeritagePossible> = {
prop: T
write: () => JSX.Element
+ required: boolean
read: (heritagePropEtape?: NoInfer<T>['etapeHeritee']) => JSX.Element
label: string | null
hasHeritageValue: boolean
@@ -59,6 +60,7 @@ export const HeritageEdit = <T extends HeritagePossible>(props: Props<T>): JSX.E
key={dummyKey}
type={{ type: 'text' }}
disabled={true}
+ required={props.required}
initialValue={'Non renseigné'}
legend={{ main: props.label ?? '', visible: props.label !== null }}
valueChanged={dummyValueChanged}
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 f621aa5c9..52d56dab4 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
@@ -2,7 +2,7 @@
<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="" type="text" value="Non renseigné">
+ <!----><input class="fr-input" name="input_670" id="input_670" disabled="" required="" type="text" value="Non renseigné">
<!---->
</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 efbc24fec..7a2abe2e3 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
@@ -16,8 +16,78 @@
<div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_74_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_74" type="text" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_74" type="text" title="" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_74-control" aria-activedescendant="typeahead_74-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_74-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -26,7 +96,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 087481eed..1e853a46e 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
@@ -14,8 +14,78 @@
<div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_74_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_74" type="text" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_74" type="text" title="" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_74-control" aria-activedescendant="typeahead_74-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_74-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -24,7 +94,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 7721f7b42..6703afc24 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
@@ -16,8 +16,78 @@
<div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_74_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_74" type="text" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 - (4624)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_74" type="text" title="" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_74-control" aria-activedescendant="typeahead_74-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_74-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -26,7 +96,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
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 090251b60..192596742 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
@@ -15,8 +15,78 @@
<div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_74_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_74" type="text" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_74" type="text" title="" name="typeahead_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_74-control" aria-activedescendant="typeahead_74-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_74-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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_74-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
diff --git a/packages/ui/src/components/etape/perimetre-edit.tsx b/packages/ui/src/components/etape/perimetre-edit.tsx
index 35023cf2c..30bcbbb8d 100644
--- a/packages/ui/src/components/etape/perimetre-edit.tsx
+++ b/packages/ui/src/components/etape/perimetre-edit.tsx
@@ -140,6 +140,7 @@ export const PerimetreEdit = defineComponent<Props>(props => {
return () => (
<div>
<HeritageEdit
+ required={true}
prop={props.etape.perimetre}
updateHeritage={updateHeritage}
hasHeritageValue={isNotNullNorUndefined(props.etape.perimetre.etapeHeritee?.value?.geojson4326Perimetre)}
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 a3cbd92ef..f8e5c78be 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
@@ -14,14 +14,84 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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>
</div>
</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
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Type de fichier (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
diff --git a/packages/ui/src/components/etape/perimetre-import-popup.tsx b/packages/ui/src/components/etape/perimetre-import-popup.tsx
index b66147913..c0791a450 100644
--- a/packages/ui/src/components/etape/perimetre-import-popup.tsx
+++ b/packages/ui/src/components/etape/perimetre-import-popup.tsx
@@ -85,7 +85,7 @@ export const PerimetreImportPopup = defineComponent<Props>(props => {
{isNotNullNorUndefined(fileType.value) ? (
<fieldset class="fr-fieldset" id="fichier">
<div class="fr-fieldset__element">
- <InputFile accept={[fileType.value]} uploadFile={fileChange} />
+ <InputFile required={true} accept={[fileType.value]} uploadFile={fileChange} />
</div>
</fieldset>
) : null}
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 97f64383c..a03961f4e 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
@@ -17,15 +17,87 @@
<div class="fr-fieldset__element">
<div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
<div id="typeahead_271_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_271" type="text" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGF93 / Lambert-93 - (2154)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_271" type="text" title="" name="typeahead_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_271-control" aria-activedescendant="typeahead_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_271-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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_271-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>
</div>
</div>
</div>
</fieldset>
<fieldset class="fr-fieldset" id="fichier">
<div class="fr-fieldset__element">
- <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : geojson.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".geojson"></div>
+ <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier
+ <!----><span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : geojson.</span>
+ </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".geojson"></div>
</div>
</fieldset>
</form>
diff --git a/packages/ui/src/components/etape/points-import-popup.tsx b/packages/ui/src/components/etape/points-import-popup.tsx
index 6379e6c0d..7ee6c29db 100644
--- a/packages/ui/src/components/etape/points-import-popup.tsx
+++ b/packages/ui/src/components/etape/points-import-popup.tsx
@@ -41,7 +41,7 @@ export const PointsImportPopup = defineComponent<Props>(props => {
</fieldset>
<fieldset class="fr-fieldset" id="fichier">
<div class="fr-fieldset__element">
- <InputFile accept={['geojson']} uploadFile={fileChange} />
+ <InputFile required={true} accept={['geojson']} uploadFile={fileChange} />
</div>
</fieldset>
</form>
diff --git a/packages/ui/src/components/etape/section-element-with-value-edit.tsx b/packages/ui/src/components/etape/section-element-with-value-edit.tsx
index 296e856d5..0def3684b 100644
--- a/packages/ui/src/components/etape/section-element-with-value-edit.tsx
+++ b/packages/ui/src/components/etape/section-element-with-value-edit.tsx
@@ -32,8 +32,9 @@ export const SectionElementWithValueEdit: FunctionalComponent<Props> = props =>
return (
<HeritageEdit
+ required={props.elementWithValue.optionnel}
prop={props.elementHeritage}
- label={`${props.elementWithValue.nom ?? ''} ${props.elementWithValue.optionnel ? '' : ' *'}`}
+ label={props.elementWithValue.nom ?? ''}
hasHeritageValue={hasHeritageValue}
read={etape => {
if (isNotNullNorUndefined(etape)) {
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 341c3f863..0d8d666ca 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
@@ -5,7 +5,7 @@
<div class="fr-mb-1w">
<div>
<fieldset class="fr-fieldset" id="mecanise" aria-labelledby="mecanise-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -28,7 +28,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">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">
<!---->
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 97d32271d..7b0940baf 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,7 +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 *<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">
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">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">
<!---->
</div>
</div>
@@ -15,7 +18,8 @@
<div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Numéro NOR
<!---->
<!---->
- </label><input class="fr-input" name="input_878" id="input_878" disabled="" type="text" value="Non renseigné">
+ <!---->
+ </label><input class="fr-input" name="input_878" id="input_878" disabled="" required="" type="text" value="Non renseigné">
<!---->
</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 47f4de609..96aeb7e1a 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
@@ -5,7 +5,7 @@
<div class="fr-mb-1w">
<div>
<fieldset class="fr-fieldset" id="mecanise" aria-labelledby="mecanise-legend" style="flex-direction: column; align-items: flex-start;">
- <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée *
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mecanise-legend">Prospection mécanisée
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -24,7 +24,7 @@
</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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">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">
<!---->
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 be34a20ee..56d5437fa 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
@@ -1,6 +1,6 @@
<div class="fr-mb-1w">
<div>
- <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances *</label>
+ <div class="fr-input-group fr-input-group--disabled fr-mb-0"><label class="fr-label">Substances</label>
<div class="fr-mt-1w">
<p class="fr-tag fr-tag--md fr-mr-1w" title="Or" aria-label="Or">Or</p>
<p class="fr-tag fr-tag--md fr-mr-1w" title="Argent" aria-label="Argent">Argent</p>
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 729f43b68..8640a2ca1 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
@@ -1,11 +1,99 @@
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances</label>
<div style="display: flex; flex-direction: column;">
<div>
<div style="display: flex;" class="fr-mt-1w">
<div id="typeahead_substances_0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_0" type="text" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" value="or"></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_0" type="text" title="" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_0-control" aria-activedescendant="typeahead_substances_0-control" aria-expanded="false" aria-autocomplete="list" value="or"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_0-control-0"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-1"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-2"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-3"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-4"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-5"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-6"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-7"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-8"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-9"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-10"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-11"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-12"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-13"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-14"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-15"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-16"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-17"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-18"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-19"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-20"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-21"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-22"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-23"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-24"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-25"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-26"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-27"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-28"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-29"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-30"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-31"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-32"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-33"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-34"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-35"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-36"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-37"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-38"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-39"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-40"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-41"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-42"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-43"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-44"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-45"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-46"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-47"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-48"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-49"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-50"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-51"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-52"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-53"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-54"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-55"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-56"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-57"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-58"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-59"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-60"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-61"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-62"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-63"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-64"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-65"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-66"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-67"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-68"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-69"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-70"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-71"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-72"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-73"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-74"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-75"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-76"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-77"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-78"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-79"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-80"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-81"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-82"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-83"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-84"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-85"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-86"><span>zirconium</span></li>
+ </ul>
</div>
<!---->
<!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-delete-bin-line fr-ml-2w" title="Supprimer la substance or" aria-label="Supprimer la substance or" type="button">
diff --git a/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansSubstance.html b/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansSubstance.html
index c2ed90206..6b7123c47 100644
--- a/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansSubstance.html
+++ b/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansSubstance.html
@@ -1,11 +1,100 @@
<div class="fr-mb-1w">
- <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances *</label>
+ <div class="fr-input-group fr-mb-0"><label class="fr-label" for="typeahead_substances_0">Substances</label>
<div style="display: flex; flex-direction: column;">
<div>
<div style="display: flex;" class="fr-mt-1w">
<div id="typeahead_substances_0_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_substances_0" type="text" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_substances_0" type="text" title="" name="typeahead_substances_0" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_0-control" aria-activedescendant="typeahead_substances_0-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_0-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_0-control-0"><span>alun</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-1"><span>antimoine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-2"><span>argent</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-3"><span>arsenic</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-4"><span>autres éléments de terres rares</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-5"><span>bauxite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-6"><span>béryllium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-7"><span>bismuth</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-8"><span>cadmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-9"><span>calcaires bitumineux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-10"><span>cérium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-11"><span>césium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-12"><span>chrome</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-13"><span>cobalt</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-14"><span>cuivre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-15"><span>diamant</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-16"><span>dysprosium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-17"><span>erbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-18"><span>étain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-19"><span>europium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-20"><span>fer</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-21"><span>fluorine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-22"><span>gadolinium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-23"><span>gallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-24"><span>gaz carbonique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-25"><span>germanium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-26"><span>graphite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-27"><span>hafnium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-28"><span>hélium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-29"><span>holmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-30"><span>hydrogène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-31"><span>indium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-32"><span>iridium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-33"><span>lanthane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-34"><span>lithium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-35"><span>lutécium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-36"><span>manganèse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-37"><span>mercure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-38"><span>métaux connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-39"><span>métaux de base</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-40"><span>métaux de la mine du platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-41"><span>métaux précieux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-42"><span>minerais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-43"><span>molybdène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-44"><span>néodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-45"><span>nickel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-46"><span>niobium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-47"><span>non précisée(s)</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-48"><span>or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-49"><span>osmium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-50"><span>palladium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-51"><span>phosphates</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-52"><span>pierres précieuses</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-53"><span>platine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-54"><span>plomb</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-55"><span>praséodyme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-56"><span>prométhium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-57"><span>puits d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-58"><span>pyrite</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-59"><span>rhénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-60"><span>rhodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-61"><span>rubidium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-62"><span>ruthénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-63"><span>samarium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-64"><span>scandium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-65"><span>sel</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-66"><span>sel gemme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-67"><span>sélénium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-68"><span>sels</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-69"><span>sels de potassium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-70"><span>sels de sodium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-71"><span>soufre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-72"><span>sources d'eau salée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-73"><span>substances connexes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-74"><span>sulfates autres que les sulfates alcalino-terreux</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-75"><span>tantale</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-76"><span>tellure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-77"><span>terbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-78"><span>thallium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-79"><span>thulium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-80"><span>titane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-81"><span>tous métaux associés</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-82"><span>tungstène</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-83"><span>vanadium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-84"><span>ytterbium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-85"><span>yttrium</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-86"><span>zinc</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_0-control-87"><span>zirconium</span></li>
+ </ul>
</div>
<!---->
<!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-delete-bin-line fr-ml-2w" title="Supprimer la substance " aria-label="Supprimer la substance " type="button">
diff --git a/packages/ui/src/components/etape/substances-edit.tsx b/packages/ui/src/components/etape/substances-edit.tsx
index 4120ac5c7..b22fb645b 100644
--- a/packages/ui/src/components/etape/substances-edit.tsx
+++ b/packages/ui/src/components/etape/substances-edit.tsx
@@ -110,11 +110,12 @@ export const SubstancesEdit = defineComponent<Props>(props => {
<HeritageEdit
prop={{ ...editedSubstances.value, value: editedSubstances.value.value.filter(isNotNullNorUndefined) }}
hasHeritageValue={isNotNullNorUndefinedNorEmpty(editedSubstances.value.etapeHeritee?.value)}
- label="Substances *"
+ required={true}
+ label="Substances"
write={() => (
<div class="fr-input-group fr-mb-0">
<label class="fr-label" for={`typeahead_substances_${editedSubstances.value.value.length - 1}`}>
- Substances *
+ Substances
</label>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{editedSubstances.value.value.map((substance, n) => (
@@ -165,7 +166,7 @@ export const SubstancesEdit = defineComponent<Props>(props => {
)}
read={() => (
<div class="fr-input-group fr-input-group--disabled fr-mb-0">
- <label class="fr-label">Substances *</label>
+ <label class="fr-label">Substances</label>
<div class="fr-mt-1w">
{substanceNoms.value.map(sub => (
<DsfrTag class="fr-mr-1w" ariaLabel={capitalize(sub)} />
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeAvecUnSeulStatut.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeAvecUnSeulStatut.html
index 2719a31d1..91764cc53 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeAvecUnSeulStatut.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeAvecUnSeulStatut.html
@@ -1,11 +1,15 @@
<div>
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="classement sans suite"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="classement sans suite"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Rapport et avis de la DREAL</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2">Demande</li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeSansStatut.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeSansStatut.html
index 877d81e19..65e628f0e 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeSansStatut.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_DemandeSansStatut.html
@@ -1,11 +1,15 @@
<div>
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" value="demande"></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value="demande"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Rapport et avis de la DREAL</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2">Classement sans suite</li>
+ </ul>
</div>
</div>
- <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut *
+ <div class="fr-select-group"><label class="fr-label" for="select-etape-statut-id">Statut
<!---->
</label><select class="fr-select" id="select-etape-statut-id" aria-label="Statut" name="select-etape-statut-id" value="fai">
<option selected="" disabled="" value="fai">fait</option>
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_Empty.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_Empty.html
index 2c1243694..4ebffb7d8 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_Empty.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_Empty.html
@@ -1,3 +1,3 @@
-<div class="fr-alert fr-alert--warning fr-mt-2w">
+<div class="fr-alert fr-alert--warning fr-mt-2w" role="alert">
<h3 class="fr-alert__title">Il n’y a aucune étape possible à cette date.</h3>Veuillez modifier la date pour pouvoir choisir une étape.
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_NoEtape.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_NoEtape.html
index 65c1605cb..6bc0a6481 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_NoEtape.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_NoEtape.html
@@ -1,3 +1,3 @@
-<div class="fr-alert fr-alert--warning fr-mt-2w">
+<div class="fr-alert fr-alert--warning fr-mt-2w" role="alert">
<h3 class="fr-alert__title">L'étape demande n'est pas possible à cette date</h3>Veuillez modifier la date pour pouvoir choisir une étape.
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_NouvelleDemande.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_NouvelleDemande.html
index 0bc0aaa05..a2dc20f64 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_NouvelleDemande.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_NouvelleDemande.html
@@ -1,8 +1,13 @@
<div>
- <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type *</label>
+ <div class="fr-input-group"><label class="fr-label fr-mb-1w" for="select-etape-type">Type</label>
<div id="select-etape-type_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="select-etape-type" type="text" name="select-etape-type" class="fr-input" placeholder="" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="select-etape-type" type="text" title="" name="select-etape-type" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="select-etape-type-control" aria-activedescendant="select-etape-type-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="select-etape-type-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="select-etape-type-control-0"><strong>Rapport et avis de la DREAL</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-1"><strong>Enregistrement de la demande</strong></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-2">Demande</li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="select-etape-type-control-3">Classement sans suite</li>
+ </ul>
</div>
</div>
<!---->
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_SelectedEtapeNotPossible.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_SelectedEtapeNotPossible.html
index 65c1605cb..6bc0a6481 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_SelectedEtapeNotPossible.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_SelectedEtapeNotPossible.html
@@ -1,3 +1,3 @@
-<div class="fr-alert fr-alert--warning fr-mt-2w">
+<div class="fr-alert fr-alert--warning fr-mt-2w" role="alert">
<h3 class="fr-alert__title">L'étape demande n'est pas possible à cette date</h3>Veuillez modifier la date pour pouvoir choisir une étape.
</div>
\ No newline at end of file
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 5775fb251..ff18c01f7 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,6 +1,6 @@
<div class=" undefined" style="display: flex; justify-content: center;">
<!---->
- <div class="fr-alert fr-alert--error fr-alert--sm">
+ <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
<p>Cassé</p>
</div>
<!---->
diff --git a/packages/ui/src/components/etape/type-edit.tsx b/packages/ui/src/components/etape/type-edit.tsx
index f83a194d9..d44d72789 100644
--- a/packages/ui/src/components/etape/type-edit.tsx
+++ b/packages/ui/src/components/etape/type-edit.tsx
@@ -123,7 +123,7 @@ export const TypeEdit = defineComponent<Props>(props => {
<div class={props.class}>
<div class="fr-input-group">
<label class="fr-label fr-mb-1w" for="select-etape-type">
- Type *
+ Type
</label>
<TypeAheadSingle
overrideItem={etapeTypeExistante.value}
@@ -164,7 +164,7 @@ export const TypeEdit = defineComponent<Props>(props => {
)}
</div>
) : (
- <Alert type="warning" class="fr-mt-2w" title={noItemsText.value} description="Veuillez modifier la date pour pouvoir choisir une étape." />
+ <Alert type="warning" role="alert" class="fr-mt-2w" title={noItemsText.value} description="Veuillez modifier la date pour pouvoir choisir une étape." />
)}
</>
)}
diff --git a/packages/ui/src/components/journaux.stories_snapshots_AvecPagination.html b/packages/ui/src/components/journaux.stories_snapshots_AvecPagination.html
index 0b975053b..0f8b8b7da 100644
--- a/packages/ui/src/components/journaux.stories_snapshots_AvecPagination.html
+++ b/packages/ui/src/components/journaux.stories_snapshots_AvecPagination.html
@@ -1,31 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 15 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Journaux</h1>
@@ -164,5 +139,25 @@
</nav>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (10 / 15 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/journaux.stories_snapshots_Default.html b/packages/ui/src/components/journaux.stories_snapshots_Default.html
index cf182a87c..a792127c7 100644
--- a/packages/ui/src/components/journaux.stories_snapshots_Default.html
+++ b/packages/ui/src/components/journaux.stories_snapshots_Default.html
@@ -1,31 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (1 résultat)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Journaux</h1>
@@ -72,5 +47,25 @@
<!---->
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (1 résultat)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/journaux.stories_snapshots_Loading.html b/packages/ui/src/components/journaux.stories_snapshots_Loading.html
index ae86e6547..5fbc6fc1a 100644
--- a/packages/ui/src/components/journaux.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/journaux.stories_snapshots_Loading.html
@@ -1,31 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Journaux</h1>
@@ -137,5 +112,25 @@
</div>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/journaux.stories_snapshots_WithError.html b/packages/ui/src/components/journaux.stories_snapshots_WithError.html
index 29e4fa270..2ebdd2a73 100644
--- a/packages/ui/src/components/journaux.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/journaux.stories_snapshots_WithError.html
@@ -1,31 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-titresIds">Noms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-titresIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Noms_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Noms" type="text" name="filters_autocomplete_Noms" style="outline: none;" placeholder="Noms" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Journaux</h1>
@@ -139,5 +114,25 @@
</div>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_titresIds">Noms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_titresIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_titresIds" type="text" name="filtres_autocomplete_titresIds" style="outline: none;" placeholder="Noms" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_titresIds-control" aria-activedescendant="filtres_autocomplete_titresIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_titresIds-control" role="listbox"></ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/footer.stories_snapshots_Default.html b/packages/ui/src/components/page/footer.stories_snapshots_Default.html
index ed6d09e7c..1be2e8fc8 100644
--- a/packages/ui/src/components/page/footer.stories_snapshots_Default.html
+++ b/packages/ui/src/components/page/footer.stories_snapshots_Default.html
@@ -2,24 +2,25 @@
<div class="fr-footer">
<div class="fr-footer__top">
<div class="fr-container">
- <div class="fr-grid-row fr-grid-row--start fr-grid-row--gutters">
+ <div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
- <p class="fr-footer__top-cat">Nous contacter</p>
+ <h1 class="fr-footer__top-cat">Nous contacter</h1>
<ul class="fr-footer__top-list">
<li><a class="fr-footer__top-link" href="https://camino.gitbook.io/guide-dutilisation/a-propos/contact" target="_blank" rel="noopener noreferrer" title="Page contact - lien externe">Contact</a></li>
<li><a href="/mocked-href" title="À propos" class="fr-footer__top-link" aria-label="À propos">À propos</a></li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
- <p class="fr-footer__top-cat">Utiliser Camino</p>
+ <h1 class="fr-footer__top-cat">Utiliser Camino</h1>
<ul class="fr-footer__top-list">
+ <li><a href="/mocked-href" title="Plan du site" class="fr-footer__top-link" aria-label="Plan du site">Plan du site</a></li>
<li><a class="fr-footer__top-link" href="https://camino.gitbook.io/guide-dutilisation/camino/glossaire" target="_blank" rel="noopener noreferrer" title="Page glossaire - lien externe">Glossaire</a></li>
<li><a class="fr-footer__top-link" href="https://camino.gitbook.io/guide-dutilisation/camino/guide-dutilisation" target="_blank" rel="noopener noreferrer" title="Page guide d’utilisation - lien externe">Tutoriel</a></li>
<li><a class="fr-footer__top-link" href="https://docs.camino.beta.gouv.fr/" target="_blank" rel="noopener noreferrer" title="Page de la documentation - lien externe">API</a></li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
- <p class="fr-footer__top-cat">Lien externes</p>
+ <h1 class="fr-footer__top-cat">Lien externes</h1>
<ul class="fr-footer__top-list">
<li><a class="fr-footer__top-link" href="http://www.minergies.fr/" target="_blank" rel="noopener noreferrer" title="Site MINergies - lien externe">Minergies</a></li>
<li><a class="fr-footer__top-link" href="https://www.mineralinfo.fr/" target="_blank" rel="noopener noreferrer" title="Site minéral info - lien externe">MinéralInfos</a></li>
@@ -31,14 +32,14 @@
<div class="fr-container">
<div class="fr-footer__body" style="margin-bottom: 0px;">
<div class="fr-footer__brand fr-enlarge-link">
- <p class="fr-logo">Ministère <br>de la transition <br>écologique</p><a class="fr-footer__brand-link" href="/" title="Retour à l’accueil du site - Camino - République Française"><img class="fr-footer__logo" style="width: 9rem;" src="/img/logo-fabriquenumerique.svg" alt="La fabrique numérique"></a>
+ <p class="fr-logo">Ministère <br>de la transition <br>écologique</p><a class="fr-footer__brand-link" href="/" title="Retour à l'accueil du site - Camino - La fabrique numérque - République Française"><img class="fr-footer__logo" style="width: 9rem;" src="/img/logo-fabriquenumerique.svg" alt="La fabrique numérique"></a>
</div>
<div class="fr-footer__content">
<ul class="fr-footer__content-list">
- <li class="fr-footer__content-item"><a class="fr-footer__content-link" target="_blank" href="https://economie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’économie - lien externe">economie.gouv.fr</a></li>
- <li class="fr-footer__content-item"><a class="fr-footer__content-link" target="_blank" href="https://ecologie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’écologie - lien externe">ecologie.gouv.fr</a></li>
- <li class="fr-footer__content-item"><a class="fr-footer__content-link" target="_blank" href="https://onf.fr" rel="noopener noreferrer" title="Site de l’office national des forêts - lien externe">onf.fr</a></li>
- <li class="fr-footer__content-item"><a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr" rel="noopener noreferrer" title="Site légifrance - lien externe">legifrance.gouv.fr</a></li>
+ <li><a class="fr-footer__content-link" target="_blank" href="https://economie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’économie - lien externe">economie.gouv.fr</a></li>
+ <li><a class="fr-footer__content-link" target="_blank" href="https://ecologie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’écologie - lien externe">ecologie.gouv.fr</a></li>
+ <li><a class="fr-footer__content-link" target="_blank" href="https://onf.fr" rel="noopener noreferrer" title="Site de l’office national des forêts - lien externe">onf.fr</a></li>
+ <li><a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr" rel="noopener noreferrer" title="Site légifrance - lien externe">legifrance.gouv.fr</a></li>
</ul>
</div>
<div class="fr-footer__bottom" style="width: 100%;">
diff --git a/packages/ui/src/components/page/footer.tsx b/packages/ui/src/components/page/footer.tsx
index 344973a78..a8a68ff45 100644
--- a/packages/ui/src/components/page/footer.tsx
+++ b/packages/ui/src/components/page/footer.tsx
@@ -1,42 +1,61 @@
import { FunctionalComponent } from 'vue'
import { CaminoRouterLink } from '@/router/camino-router-link'
+import { PAGE_IDS } from '@/utils/page-ids'
+import { fr } from '@codegouvfr/react-dsfr'
interface Props {
version: string
}
export const Footer: FunctionalComponent<Props> = (props: Props) => (
- <footer role="contentinfo" id="footer" class="noprint">
- <div class="fr-footer">
- <div class="fr-footer__top">
- <div class="fr-container">
- <div class="fr-grid-row fr-grid-row--start fr-grid-row--gutters">
- <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
- <p class="fr-footer__top-cat">Nous contacter</p>
- <ul class="fr-footer__top-list">
+ <footer role="contentinfo" id={PAGE_IDS.footer.id} class="noprint">
+ <div class={fr.cx('fr-footer')}>
+ <div class={fr.cx('fr-footer__top')}>
+ <div class={fr.cx('fr-container')}>
+ <div class={[fr.cx('fr-grid-row'), fr.cx('fr-grid-row--gutters')]}>
+ <div class={[fr.cx('fr-col-12'), fr.cx('fr-col-sm-6'), fr.cx('fr-col-md-4')]}>
+ <h1 class={fr.cx('fr-footer__top-cat')}>Nous contacter</h1>
+ <ul class={fr.cx('fr-footer__top-list')}>
<li>
- <a class="fr-footer__top-link" href="https://camino.gitbook.io/guide-dutilisation/a-propos/contact" target="_blank" rel="noopener noreferrer" title="Page contact - lien externe">
+ <a
+ class={fr.cx('fr-footer__top-link')}
+ href="https://camino.gitbook.io/guide-dutilisation/a-propos/contact"
+ target="_blank"
+ rel="noopener noreferrer"
+ title="Page contact - lien externe"
+ >
Contact
</a>
</li>
<li>
- <CaminoRouterLink isDisabled={false} title="À propos" class="fr-footer__top-link" to={{ name: 'aPropos', params: {} }}>
+ <CaminoRouterLink isDisabled={false} title="À propos" class={fr.cx('fr-footer__top-link')} to={{ name: 'aPropos', params: {} }}>
À propos
</CaminoRouterLink>
</li>
</ul>
</div>
- <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
- <p class="fr-footer__top-cat">Utiliser Camino</p>
- <ul class="fr-footer__top-list">
+ <div class={[fr.cx('fr-col-12'), fr.cx('fr-col-sm-6'), fr.cx('fr-col-md-4')]}>
+ <h1 class={fr.cx('fr-footer__top-cat')}>Utiliser Camino</h1>
+ <ul class={fr.cx('fr-footer__top-list')}>
<li>
- <a class="fr-footer__top-link" href="https://camino.gitbook.io/guide-dutilisation/camino/glossaire" target="_blank" rel="noopener noreferrer" title="Page glossaire - lien externe">
+ <CaminoRouterLink isDisabled={false} title="Plan du site" class={fr.cx('fr-footer__top-link')} to={{ name: 'plan', params: {} }}>
+ Plan du site
+ </CaminoRouterLink>
+ </li>
+ <li>
+ <a
+ class={fr.cx('fr-footer__top-link')}
+ href="https://camino.gitbook.io/guide-dutilisation/camino/glossaire"
+ target="_blank"
+ rel="noopener noreferrer"
+ title="Page glossaire - lien externe"
+ >
Glossaire
</a>
</li>
<li>
<a
- class="fr-footer__top-link"
+ class={fr.cx('fr-footer__top-link')}
href="https://camino.gitbook.io/guide-dutilisation/camino/guide-dutilisation"
target="_blank"
rel="noopener noreferrer"
@@ -46,22 +65,22 @@ export const Footer: FunctionalComponent<Props> = (props: Props) => (
</a>
</li>
<li>
- <a class="fr-footer__top-link" href="https://docs.camino.beta.gouv.fr/" target="_blank" rel="noopener noreferrer" title="Page de la documentation - lien externe">
+ <a class={fr.cx('fr-footer__top-link')} href="https://docs.camino.beta.gouv.fr/" target="_blank" rel="noopener noreferrer" title="Page de la documentation - lien externe">
API
</a>
</li>
</ul>
</div>
- <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
- <p class="fr-footer__top-cat">Lien externes</p>
- <ul class="fr-footer__top-list">
+ <div class={[fr.cx('fr-col-12'), fr.cx('fr-col-sm-6'), fr.cx('fr-col-md-4')]}>
+ <h1 class={fr.cx('fr-footer__top-cat')}>Lien externes</h1>
+ <ul class={fr.cx('fr-footer__top-list')}>
<li>
- <a class="fr-footer__top-link" href="http://www.minergies.fr/" target="_blank" rel="noopener noreferrer" title="Site MINergies - lien externe">
+ <a class={fr.cx('fr-footer__top-link')} href="http://www.minergies.fr/" target="_blank" rel="noopener noreferrer" title="Site MINergies - lien externe">
Minergies
</a>
</li>
<li>
- <a class="fr-footer__top-link" href="https://www.mineralinfo.fr/" target="_blank" rel="noopener noreferrer" title="Site minéral info - lien externe">
+ <a class={fr.cx('fr-footer__top-link')} href="https://www.mineralinfo.fr/" target="_blank" rel="noopener noreferrer" title="Site minéral info - lien externe">
MinéralInfos
</a>
</li>
@@ -70,47 +89,47 @@ export const Footer: FunctionalComponent<Props> = (props: Props) => (
</div>
</div>
</div>
- <div class="fr-container">
- <div class="fr-footer__body" style="margin-bottom: 0;">
- <div class="fr-footer__brand fr-enlarge-link">
- <p class="fr-logo">
+ <div class={fr.cx('fr-container')}>
+ <div class={fr.cx('fr-footer__body')} style="margin-bottom: 0;">
+ <div class={[fr.cx('fr-footer__brand'), fr.cx('fr-enlarge-link')]}>
+ <p class={fr.cx('fr-logo')}>
Ministère <br />
de la transition <br />
écologique
</p>
- <a class="fr-footer__brand-link" href="/" title="Retour à l’accueil du site - Camino - République Française">
- <img class="fr-footer__logo" style="width:9rem;" src="/img/logo-fabriquenumerique.svg" alt="La fabrique numérique" />
+ <a class={fr.cx('fr-footer__brand-link')} href="/" title="Retour à l'accueil du site - Camino - La fabrique numérque - République Française">
+ <img class={fr.cx('fr-footer__logo')} style="width:9rem;" src="/img/logo-fabriquenumerique.svg" alt="La fabrique numérique" />
</a>
</div>
- <div class="fr-footer__content">
- <ul class="fr-footer__content-list">
- <li class="fr-footer__content-item">
- <a class="fr-footer__content-link" target="_blank" href="https://economie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’économie - lien externe">
+ <div class={fr.cx('fr-footer__content')}>
+ <ul class={fr.cx('fr-footer__content-list')}>
+ <li>
+ <a class={fr.cx('fr-footer__content-link')} target="_blank" href="https://economie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’économie - lien externe">
economie.gouv.fr
</a>
</li>
- <li class="fr-footer__content-item">
- <a class="fr-footer__content-link" target="_blank" href="https://ecologie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’écologie - lien externe">
+ <li>
+ <a class={fr.cx('fr-footer__content-link')} target="_blank" href="https://ecologie.gouv.fr" rel="noopener noreferrer" title="Site du ministère de l’écologie - lien externe">
ecologie.gouv.fr
</a>
</li>
- <li class="fr-footer__content-item">
- <a class="fr-footer__content-link" target="_blank" href="https://onf.fr" rel="noopener noreferrer" title="Site de l’office national des forêts - lien externe">
+ <li>
+ <a class={fr.cx('fr-footer__content-link')} target="_blank" href="https://onf.fr" rel="noopener noreferrer" title="Site de l’office national des forêts - lien externe">
onf.fr
</a>
</li>
- <li class="fr-footer__content-item">
- <a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr" rel="noopener noreferrer" title="Site légifrance - lien externe">
+ <li>
+ <a class={fr.cx('fr-footer__content-link')} target="_blank" href="https://legifrance.gouv.fr" rel="noopener noreferrer" title="Site légifrance - lien externe">
legifrance.gouv.fr
</a>
</li>
</ul>
</div>
- <div class="fr-footer__bottom" style="width: 100%;">
- <ul class="fr-footer__bottom-list">
- <li class="fr-footer__bottom-item">
+ <div class={fr.cx('fr-footer__bottom')} style="width: 100%;">
+ <ul class={fr.cx('fr-footer__bottom-list')}>
+ <li class={fr.cx('fr-footer__bottom-item')}>
<a
- class="fr-footer__bottom-link"
+ class={fr.cx('fr-footer__bottom-link')}
href="https://camino.gitbook.io/guide-dutilisation/a-propos/accessibilite"
target="_blank"
rel="noopener noreferrer"
@@ -119,9 +138,9 @@ export const Footer: FunctionalComponent<Props> = (props: Props) => (
Accessibilité : non conforme
</a>
</li>
- <li class="fr-footer__bottom-item">
+ <li class={fr.cx('fr-footer__bottom-item')}>
<a
- class="fr-footer__bottom-link"
+ class={fr.cx('fr-footer__bottom-link')}
href="https://camino.gitbook.io/guide-dutilisation/a-propos/mentions-legales"
target="_blank"
rel="noopener noreferrer"
@@ -130,9 +149,9 @@ export const Footer: FunctionalComponent<Props> = (props: Props) => (
Mentions légales
</a>
</li>
- <li class="fr-footer__bottom-item">
+ <li class={fr.cx('fr-footer__bottom-item')}>
<a
- class="fr-footer__bottom-link"
+ class={fr.cx('fr-footer__bottom-link')}
href="https://camino.gitbook.io/guide-dutilisation/a-propos/cgu"
target="_blank"
rel="noopener noreferrer"
@@ -141,9 +160,9 @@ export const Footer: FunctionalComponent<Props> = (props: Props) => (
CGU
</a>
</li>
- <li class="fr-footer__bottom-item">
+ <li class={fr.cx('fr-footer__bottom-item')}>
<a
- class="fr-footer__bottom-link"
+ class={fr.cx('fr-footer__bottom-link')}
href={'https://gitlab-forge.din.developpement-durable.gouv.fr/pub/pnm-public/camino/-/commit/' + props.version}
target="_blank"
rel="noopener noreferrer"
@@ -153,7 +172,7 @@ export const Footer: FunctionalComponent<Props> = (props: Props) => (
</a>
</li>
</ul>
- <div class="fr-footer__bottom-copy">
+ <div class={fr.cx('fr-footer__bottom-copy')}>
<p>
Sauf mention contraire, tous les contenus de ce site sont sous{' '}
<a
diff --git a/packages/ui/src/components/page/header.stories_snapshots_AdminDGTM.html b/packages/ui/src/components/page/header.stories_snapshots_AdminDGTM.html
index 3ed6ca74e..d1501cd54 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_AdminDGTM.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_AdminDGTM.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_AdminONF.html b/packages/ui/src/components/page/header.stories_snapshots_AdminONF.html
index 4abbb8c73..cc9f0e713 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_AdminONF.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_AdminONF.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_BureauDEtudes.html b/packages/ui/src/components/page/header.stories_snapshots_BureauDEtudes.html
index fcfb9311b..e37c65796 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_BureauDEtudes.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_BureauDEtudes.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_CanOpenAnnuaire.html b/packages/ui/src/components/page/header.stories_snapshots_CanOpenAnnuaire.html
index 501f48c24..3c4e6a98a 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_CanOpenAnnuaire.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_CanOpenAnnuaire.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_Deconnecte.html b/packages/ui/src/components/page/header.stories_snapshots_Deconnecte.html
index d5c032cc2..9b53f449e 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_Deconnecte.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_Deconnecte.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -21,12 +21,12 @@
<div><a class="fr-btn fr-icon-lock-fill" href="/oauth2/sign_in?rd=http%3A%2F%2Flocalhost%3A3000%2Ftitres%3FdomainesIds%3D%5B'm'%5D">Se connecter / S'enregistrer</a></div>
</div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -35,7 +35,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group">
diff --git a/packages/ui/src/components/page/header.stories_snapshots_Defaut.html b/packages/ui/src/components/page/header.stories_snapshots_Defaut.html
index fe25b247b..155048c02 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_Defaut.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_Defaut.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_Editeur.html b/packages/ui/src/components/page/header.stories_snapshots_Editeur.html
index 4abbb8c73..cc9f0e713 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_Editeur.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_Editeur.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_Entreprise.html b/packages/ui/src/components/page/header.stories_snapshots_Entreprise.html
index a2b5ee632..88191e8a4 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_Entreprise.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_Entreprise.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_Lecteur.html b/packages/ui/src/components/page/header.stories_snapshots_Lecteur.html
index 5e6cc6bc1..9579843ce 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_Lecteur.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_Lecteur.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.stories_snapshots_Super.html b/packages/ui/src/components/page/header.stories_snapshots_Super.html
index 501f48c24..3c4e6a98a 100644
--- a/packages/ui/src/components/page/header.stories_snapshots_Super.html
+++ b/packages/ui/src/components/page/header.stories_snapshots_Super.html
@@ -1,4 +1,4 @@
-<header role="banner" class="fr-header noprint">
+<header role="banner" class="fr-header noprint" id="header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
@@ -19,12 +19,12 @@
<div class="fr-header__tools-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
</div>
- <div class="fr-header__search fr-modal " id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
+ <div class="fr-header__search fr-modal" id="headerSearchModalId" aria-labelledby="button-search" aria-label="Recherche dans le site">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
- <div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
<div id="search-473-input_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="search-473-input" type="text" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="search-473-input" type="text" title="Rechercher un titre" name="search-473-input" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="search-473-input-control" aria-activedescendant="search-473-input-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="search-473-input-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
</div>
@@ -33,7 +33,7 @@
</div>
</div>
</div>
- <div class="fr-header__menu fr-modal " id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
+ <div class="fr-header__menu fr-modal" id="headerNavigationModalId" aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
<div class="fr-container"><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-close-line fr-btn--icon-right fr-btn--close" title="Fermer la fenêtre de dialogue" aria-label="Fermer la fenêtre de dialogue" type="button">Fermer</button>
<div class="fr-header__menu-links">
<div class="fr-btns-group"><a class="fr-btns-group--inline fr-btn fr-icon-account-fill" to="/utilisateurs/id" type="primary">nom prenom</a><a class="fr-btns-group--inline fr-btn fr-icon-lock-line" href="/apiUrl/deconnecter">Se déconnecter</a></div>
diff --git a/packages/ui/src/components/page/header.tsx b/packages/ui/src/components/page/header.tsx
index 2c048ca95..891c7b3d5 100644
--- a/packages/ui/src/components/page/header.tsx
+++ b/packages/ui/src/components/page/header.tsx
@@ -1,36 +1,19 @@
-import { computed, defineComponent, FunctionalComponent, onMounted, ref } from 'vue'
-import { Role, User } from 'camino-common/src/roles'
-import { canReadActivites } from 'camino-common/src/permissions/activites'
+import { defineComponent, FunctionalComponent, onMounted, ref } from 'vue'
+import { User } from 'camino-common/src/roles'
import { QuickAccessTitre } from '@/components/page/quick-access-titre'
import { DsfrButtonIcon } from '../_ui/dsfr-button'
import { isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
import { MenuSection } from '../../router'
import { fr } from '@codegouvfr/react-dsfr'
+import { PAGE_IDS } from '@/utils/page-ids'
+import { LinkList, Link, isDirectLink, linksByRole } from './menu'
+
interface Props {
user: User
currentMenuSection: MenuSection | null
routePath: string
}
-type Link = { label: string; path: MenuSection }
-type LinkList = { label: string; sublinks: Link[] }
-const links = {
- TITRES_ET_AUTORISATIONS: { label: 'Titres et autorisations', path: 'titres' },
- DEMARCHES: { label: 'Démarches', path: 'demarches' },
- TRAVAUX: { label: 'Travaux', path: 'travaux' },
- ACTIVITES: { label: 'Activités', path: 'activites' },
- STATISTIQUES: { label: 'Statistiques', path: 'statistiques' },
- ENTREPRISES: { label: 'Entreprises', path: 'entreprises' },
- UTILISATEURS: { label: 'Utilisateurs', path: 'utilisateurs' },
- ADMINISTRATIONS: { label: 'Administrations', path: 'administrations' },
- JOURNAUX: { label: 'Journaux', path: 'journaux' },
- TABLEAU_DE_BORD: { label: 'Tableau de bord', path: 'dashboard' },
-} as const satisfies Record<string, Link>
-
-const isDirectLink = (link: Link | LinkList): link is Link => Object.prototype.hasOwnProperty.call(link, 'path')
-
-const ANNUAIRE = { label: 'Annuaire', sublinks: [links.ENTREPRISES, links.ADMINISTRATIONS, links.UTILISATEURS] }
-
const HeaderLinks: FunctionalComponent<Pick<Props, 'user' | 'routePath'> & { userLinkClicked: () => void }> = props => {
const loginUrl = '/oauth2/sign_in?rd=' + encodeURIComponent(`${window.location.origin}${props.routePath}`)
const logoutUrl = '/apiUrl/deconnecter'
@@ -77,7 +60,6 @@ export const Header = defineComponent<Props>(props => {
const navigationModalId = 'headerNavigationModalId'
const searchModalId = 'headerSearchModalId'
- const navigationId = 'headerNavigationId'
const linkClick = () => {
// On ferme la modale
@@ -86,7 +68,7 @@ export const Header = defineComponent<Props>(props => {
const sublinkClick = () => {
// On ferme le menu déroulant d’annuaire
- const navigationElement = document.getElementById(navigationId)
+ const navigationElement = document.getElementById(PAGE_IDS.menu.id)
if (navigationElement) {
const members = dsfr(navigationElement).navigation.members
if (isNotNullNorUndefinedNorEmpty(members)) {
@@ -95,19 +77,6 @@ export const Header = defineComponent<Props>(props => {
}
linkClick()
}
- const linksByRole = computed<Record<Role, (Link | LinkList)[]>>(() => {
- const linkActivites = canReadActivites(props.user) ? [links.ACTIVITES] : []
-
- return {
- super: [links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, ...linkActivites, links.STATISTIQUES, ANNUAIRE, links.JOURNAUX],
- admin: [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, ...linkActivites, links.STATISTIQUES, ANNUAIRE],
- editeur: [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, ...linkActivites, links.STATISTIQUES, ANNUAIRE],
- lecteur: [links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, links.STATISTIQUES, ANNUAIRE],
- entreprise: [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, ...linkActivites, links.STATISTIQUES, ANNUAIRE],
- "bureau d'études": [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.STATISTIQUES, ANNUAIRE],
- defaut: [links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.STATISTIQUES, { label: 'Annuaire', sublinks: [links.ENTREPRISES, links.ADMINISTRATIONS] }],
- }
- })
const modalMenuOpened = ref<boolean>(false)
const modalSearchOpened = ref<boolean>(false)
@@ -126,41 +95,62 @@ export const Header = defineComponent<Props>(props => {
}
return () => (
- <header role="banner" class="fr-header noprint">
+ <header role="banner" class={[fr.cx('fr-header'), 'noprint']} id="header">
<div class="fr-header__body">
- <div class="fr-container">
- <div class="fr-header__body-row">
+ <div class={fr.cx('fr-container')}>
+ <div class={fr.cx('fr-header__body-row')}>
<div class="fr-header__brand fr-enlarge-link">
- <div class="fr-header__brand-top">
- <div class="fr-header__logo">
- <p class="fr-logo">
+ <div class={fr.cx('fr-header__brand-top')}>
+ <div class={fr.cx('fr-header__logo')}>
+ <p class={fr.cx('fr-logo')}>
République
<br />
française
</p>
</div>
- <nav class="fr-header__navbar" role="navigation">
- <button class="fr-btn--search fr-btn" data-fr-opened="false" onClick={openModalSearch} aria-controls={searchModalId} aria-haspopup="dialog" id="button-search" title="Rechercher">
+ <nav class={fr.cx('fr-header__navbar')} role="navigation">
+ <button
+ class={[fr.cx('fr-btn--search'), fr.cx('fr-btn')]}
+ data-fr-opened="false"
+ onClick={openModalSearch}
+ aria-controls={searchModalId}
+ aria-haspopup="dialog"
+ id="button-search"
+ title="Rechercher"
+ >
Rechercher
</button>
- <button class="fr-btn--menu fr-btn" data-fr-opened="false" onClick={openModalMenu} aria-controls={navigationModalId} aria-haspopup="dialog" id="button-menu" title="Menu">
+ <button
+ class={[fr.cx('fr-btn--menu'), fr.cx('fr-btn')]}
+ data-fr-opened="false"
+ onClick={openModalMenu}
+ aria-controls={navigationModalId}
+ aria-haspopup="dialog"
+ id="button-menu"
+ title="Menu"
+ >
Menu
</button>
</nav>
</div>
- <div class="fr-header__service">
+ <div class={fr.cx('fr-header__service')}>
<router-link to={{ name: 'homepage' }} title="Accueil - Camino - République Française">
- <p class="fr-header__service-title">Camino</p>
+ <p class={fr.cx('fr-header__service-title')}>Camino</p>
</router-link>
- <p class="fr-header__service-tagline">Le cadastre minier numérique</p>
+ <p class={fr.cx('fr-header__service-tagline')}>Le cadastre minier numérique</p>
</div>
</div>
- <div class="fr-header__tools">
- <div class="fr-header__tools-links">
+ <div class={fr.cx('fr-header__tools')}>
+ <div class={fr.cx('fr-header__tools-links')}>
<HeaderLinks user={props.user} routePath={props.routePath} userLinkClicked={closeModals} />
</div>
- <div class={`fr-header__search fr-modal ${modalSearchOpened.value ? 'fr-modal--opened' : ''}`} id={searchModalId} aria-labelledby="button-search" aria-label="Recherche dans le site">
- <div class="fr-container">
+ <div
+ class={[fr.cx('fr-header__search'), fr.cx('fr-modal'), modalSearchOpened.value ? fr.cx('fr-modal--opened') : null]}
+ id={searchModalId}
+ aria-labelledby="button-search"
+ aria-label="Recherche dans le site"
+ >
+ <div class={fr.cx('fr-container')}>
<DsfrButtonIcon
icon="fr-icon-close-line"
buttonType="tertiary-no-outline"
@@ -168,17 +158,22 @@ export const Header = defineComponent<Props>(props => {
aria-controls={searchModalId}
title="Fermer la fenêtre de dialogue"
label="Fermer"
- class="fr-btn--close"
+ class={fr.cx('fr-btn--close')}
/>
- <QuickAccessTitre id="search-473-input" onSelectTitre={closeModals} />
+ <QuickAccessTitre id={PAGE_IDS.search.id} onSelectTitre={closeModals} />
</div>
</div>
</div>
</div>
</div>
</div>
- <div class={`fr-header__menu fr-modal ${modalMenuOpened.value ? 'fr-modal--opened' : ''}`} id={navigationModalId} aria-labelledby="button-menu" aria-label="Connexion et menu de navigation">
- <div class="fr-container">
+ <div
+ class={[fr.cx('fr-header__menu'), fr.cx('fr-modal'), modalMenuOpened.value ? fr.cx('fr-modal--opened') : null]}
+ id={navigationModalId}
+ aria-labelledby="button-menu"
+ aria-label="Connexion et menu de navigation"
+ >
+ <div class={fr.cx('fr-container')}>
<DsfrButtonIcon
icon="fr-icon-close-line"
buttonType="tertiary-no-outline"
@@ -186,29 +181,29 @@ export const Header = defineComponent<Props>(props => {
aria-controls={searchModalId}
title="Fermer la fenêtre de dialogue"
label="Fermer"
- class="fr-btn--close"
+ class={fr.cx('fr-btn--close')}
/>
- <div class="fr-header__menu-links">
+ <div class={fr.cx('fr-header__menu-links')}>
<HeaderLinks user={props.user} routePath={props.routePath} userLinkClicked={closeModals} />
</div>
- <nav class="fr-nav" id={navigationId} role="navigation" aria-label="Menu principal">
- <ul class="fr-nav__list">
- {linksByRole.value[props.user?.role ?? 'defaut'].map((link, index) => (
- <li key={link.label} class="fr-nav__item">
+ <nav class={fr.cx('fr-nav')} id={PAGE_IDS.menu.id} role="navigation" aria-label="Menu principal">
+ <ul class={fr.cx('fr-nav__list')}>
+ {linksByRole(props.user)[props.user?.role ?? 'defaut'].map((link, index) => (
+ <li key={link.label} class={fr.cx('fr-nav__item')}>
{isDirectLink(link) ? (
- <router-link class="fr-nav__link" to={{ name: link.path }} target="_self" onClick={linkClick} {...getAriaPage(link)}>
+ <router-link class={fr.cx('fr-nav__link')} to={{ name: link.path }} target="_self" onClick={linkClick} {...getAriaPage(link)}>
{link.label}
</router-link>
) : (
<>
- <button class="fr-nav__btn" aria-expanded="false" aria-controls={`collapse-${index}`} {...getAriaCurrent(link)}>
+ <button class={fr.cx('fr-nav__btn')} aria-expanded="false" aria-controls={`collapse-${index}`} {...getAriaCurrent(link)}>
{link.label}
</button>
- <div class="fr-collapse fr-menu" id={`collapse-${index}`}>
- <ul class="fr-menu__list">
+ <div class={[fr.cx('fr-collapse'), fr.cx('fr-menu')]} id={`collapse-${index}`}>
+ <ul class={fr.cx('fr-menu__list')}>
{link.sublinks.map((sublink, subIndex) => (
<li key={sublink.label}>
- <router-link onClick={sublinkClick} class="fr-nav__link" to={{ name: sublink.path }} target="_self" id={`nav-${index}-${subIndex}`}>
+ <router-link onClick={sublinkClick} class={fr.cx('fr-nav__link')} to={{ name: sublink.path }} target="_self" id={`nav-${index}-${subIndex}`}>
{sublink.label}
</router-link>
</li>
diff --git a/packages/ui/src/components/page/menu.ts b/packages/ui/src/components/page/menu.ts
new file mode 100644
index 000000000..c064da0b1
--- /dev/null
+++ b/packages/ui/src/components/page/menu.ts
@@ -0,0 +1,35 @@
+import { MenuSection } from '@/router'
+import { canReadActivites } from 'camino-common/src/permissions/activites'
+import { Role, User } from 'camino-common/src/roles'
+export type Link = { label: string; path: MenuSection }
+export type LinkList = { label: string; sublinks: Link[] }
+const links = {
+ TITRES_ET_AUTORISATIONS: { label: 'Titres et autorisations', path: 'titres' },
+ DEMARCHES: { label: 'Démarches', path: 'demarches' },
+ TRAVAUX: { label: 'Travaux', path: 'travaux' },
+ ACTIVITES: { label: 'Activités', path: 'activites' },
+ STATISTIQUES: { label: 'Statistiques', path: 'statistiques' },
+ ENTREPRISES: { label: 'Entreprises', path: 'entreprises' },
+ UTILISATEURS: { label: 'Utilisateurs', path: 'utilisateurs' },
+ ADMINISTRATIONS: { label: 'Administrations', path: 'administrations' },
+ JOURNAUX: { label: 'Journaux', path: 'journaux' },
+ TABLEAU_DE_BORD: { label: 'Tableau de bord', path: 'dashboard' },
+} as const satisfies Record<string, Link>
+
+export const isDirectLink = (link: Link | LinkList): link is Link => Object.prototype.hasOwnProperty.call(link, 'path')
+type Annuaire = { label: string; sublinks: Link[] }
+const ANNUAIRE: Annuaire = { label: 'Annuaire', sublinks: [links.ENTREPRISES, links.ADMINISTRATIONS, links.UTILISATEURS] }
+
+export const linksByRole = (user: User): Record<Role, (Link | Annuaire)[]> => {
+ const linkActivites: Link[] = canReadActivites(user) ? [links.ACTIVITES] : []
+
+ return {
+ super: [links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, ...linkActivites, links.STATISTIQUES, ANNUAIRE, links.JOURNAUX],
+ admin: [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, ...linkActivites, links.STATISTIQUES, ANNUAIRE],
+ editeur: [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, ...linkActivites, links.STATISTIQUES, ANNUAIRE],
+ lecteur: [links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.TRAVAUX, links.STATISTIQUES, ANNUAIRE],
+ entreprise: [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, ...linkActivites, links.STATISTIQUES, ANNUAIRE],
+ "bureau d'études": [links.TABLEAU_DE_BORD, links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.STATISTIQUES, ANNUAIRE],
+ defaut: [links.TITRES_ET_AUTORISATIONS, links.DEMARCHES, links.STATISTIQUES, { label: 'Annuaire', sublinks: [links.ENTREPRISES, links.ADMINISTRATIONS] }],
+ }
+}
diff --git a/packages/ui/src/components/page/plan.stories.tsx b/packages/ui/src/components/page/plan.stories.tsx
new file mode 100644
index 000000000..f270556b8
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryFn } from '@storybook/vue3'
+import { testBlankUser } from 'camino-common/src/tests-utils'
+import { PurePlanDuSite } from './plan'
+
+const meta: Meta = {
+ title: 'Pages/Plan',
+ // @ts-ignore @storybook/vue3 n'aime pas les composants tsx
+ component: PurePlanDuSite,
+}
+export default meta
+
+export const Super: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'super' }} />
+export const AdminONF: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'admin', administrationId: 'ope-onf-973-01' }} />
+export const AdminDGTM: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'admin', administrationId: 'dea-guyane-01' }} />
+export const Editeur: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'editeur', administrationId: 'ope-onf-973-01' }} />
+export const Lecteur: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'lecteur', administrationId: 'ope-onf-973-01' }} />
+export const Entreprise: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'entreprise', entrepriseIds: [] }} />
+export const BureauDEtudes: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: "bureau d'études", entrepriseIds: [] }} />
+export const Defaut: StoryFn = () => <PurePlanDuSite user={{ ...testBlankUser, role: 'defaut' }} />
+export const Deconnecte: StoryFn = () => <PurePlanDuSite user={undefined} />
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_AdminDGTM.html b/packages/ui/src/components/page/plan.stories_snapshots_AdminDGTM.html
new file mode 100644
index 000000000..3628eddeb
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_AdminDGTM.html
@@ -0,0 +1,17 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Tableau de bord" aria-label="Tableau de bord">Tableau de bord</a></li>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Travaux" aria-label="Travaux">Travaux</a></li>
+ <li><a href="/mocked-href" title="Activités" aria-label="Activités">Activités</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_AdminONF.html b/packages/ui/src/components/page/plan.stories_snapshots_AdminONF.html
new file mode 100644
index 000000000..5fee88e85
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_AdminONF.html
@@ -0,0 +1,16 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Tableau de bord" aria-label="Tableau de bord">Tableau de bord</a></li>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Travaux" aria-label="Travaux">Travaux</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_BureauDEtudes.html b/packages/ui/src/components/page/plan.stories_snapshots_BureauDEtudes.html
new file mode 100644
index 000000000..5c4f1e614
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_BureauDEtudes.html
@@ -0,0 +1,15 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Tableau de bord" aria-label="Tableau de bord">Tableau de bord</a></li>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_Deconnecte.html b/packages/ui/src/components/page/plan.stories_snapshots_Deconnecte.html
new file mode 100644
index 000000000..b45bbdb08
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_Deconnecte.html
@@ -0,0 +1,13 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_Defaut.html b/packages/ui/src/components/page/plan.stories_snapshots_Defaut.html
new file mode 100644
index 000000000..b45bbdb08
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_Defaut.html
@@ -0,0 +1,13 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_Editeur.html b/packages/ui/src/components/page/plan.stories_snapshots_Editeur.html
new file mode 100644
index 000000000..5fee88e85
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_Editeur.html
@@ -0,0 +1,16 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Tableau de bord" aria-label="Tableau de bord">Tableau de bord</a></li>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Travaux" aria-label="Travaux">Travaux</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_Entreprise.html b/packages/ui/src/components/page/plan.stories_snapshots_Entreprise.html
new file mode 100644
index 000000000..117684552
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_Entreprise.html
@@ -0,0 +1,16 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Tableau de bord" aria-label="Tableau de bord">Tableau de bord</a></li>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Activités" aria-label="Activités">Activités</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_Lecteur.html b/packages/ui/src/components/page/plan.stories_snapshots_Lecteur.html
new file mode 100644
index 000000000..7a7a0f70a
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_Lecteur.html
@@ -0,0 +1,15 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Travaux" aria-label="Travaux">Travaux</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.stories_snapshots_Super.html b/packages/ui/src/components/page/plan.stories_snapshots_Super.html
new file mode 100644
index 000000000..5bfa93a10
--- /dev/null
+++ b/packages/ui/src/components/page/plan.stories_snapshots_Super.html
@@ -0,0 +1,17 @@
+<div>
+ <h1>Plan du site</h1>
+ <ul>
+ <li><a href="/mocked-href" title="Titres et autorisations" aria-label="Titres et autorisations">Titres et autorisations</a></li>
+ <li><a href="/mocked-href" title="Démarches" aria-label="Démarches">Démarches</a></li>
+ <li><a href="/mocked-href" title="Travaux" aria-label="Travaux">Travaux</a></li>
+ <li><a href="/mocked-href" title="Activités" aria-label="Activités">Activités</a></li>
+ <li><a href="/mocked-href" title="Statistiques" aria-label="Statistiques">Statistiques</a></li>
+ <li>Annuaire<ul>
+ <li><a href="/mocked-href" title="Entreprises" aria-label="Entreprises">Entreprises</a></li>
+ <li><a href="/mocked-href" title="Administrations" aria-label="Administrations">Administrations</a></li>
+ <li><a href="/mocked-href" title="Utilisateurs" aria-label="Utilisateurs">Utilisateurs</a></li>
+ </ul>
+ </li>
+ <li><a href="/mocked-href" title="Journaux" aria-label="Journaux">Journaux</a></li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/plan.tsx b/packages/ui/src/components/page/plan.tsx
new file mode 100644
index 000000000..93c231ae6
--- /dev/null
+++ b/packages/ui/src/components/page/plan.tsx
@@ -0,0 +1,47 @@
+import { defineComponent, FunctionalComponent, inject } from 'vue'
+import { User } from 'camino-common/src/roles'
+import { isDirectLink, linksByRole } from './menu'
+import { CaminoRouterLink } from '@/router/camino-router-link'
+import { userKey } from '@/moi'
+
+interface Props {
+ user: User
+}
+
+export const PlanDuSite = defineComponent(() => {
+ const user = inject(userKey)
+
+ return () => <PurePlanDuSite user={user} />
+})
+
+export const PurePlanDuSite: FunctionalComponent<Props> = props => {
+ return (
+ <div>
+ <h1>Plan du site</h1>
+ <ul>
+ {linksByRole(props.user)[props.user?.role ?? 'defaut'].map(link => (
+ <li key={link.label}>
+ {isDirectLink(link) ? (
+ <CaminoRouterLink to={{ name: link.path, params: {} }} isDisabled={false} title={link.label}>
+ {link.label}
+ </CaminoRouterLink>
+ ) : (
+ <>
+ {link.label}
+ <ul>
+ {link.sublinks.map(sublink => (
+ <li key={sublink.label}>
+ <CaminoRouterLink to={{ name: sublink.path, params: {} }} isDisabled={false} title={sublink.label}>
+ {sublink.label}
+ </CaminoRouterLink>
+ </li>
+ ))}
+ </ul>
+ </>
+ )}
+ </li>
+ ))}
+ </ul>
+ </div>
+ )
+}
diff --git a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Empty.html b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Empty.html
index bca3cde18..b968c1b56 100644
--- a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Empty.html
+++ b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Empty.html
@@ -1,6 +1,6 @@
-<div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+<div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="typeahead_id">Rechercher</label>
<div id="typeahead_id_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_id" type="text" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_id" type="text" title="Rechercher un titre" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="typeahead_id-control" aria-activedescendant="typeahead_id-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_id-control" role="listbox"></ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Full.html b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Full.html
index bca3cde18..8608977a5 100644
--- a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Full.html
+++ b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Full.html
@@ -1,6 +1,607 @@
-<div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+<div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="typeahead_id">Rechercher</label>
<div id="typeahead_id_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_id" type="text" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_id" type="text" title="Rechercher un titre" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="typeahead_id-control" aria-activedescendant="typeahead_id-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_id-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_id-control-0">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 0 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-1">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 1 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-2">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 2 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-3">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 3 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-4">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 4 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-5">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 5 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-6">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 6 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-7">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 7 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-8">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 8 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-9">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 9 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-10">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 10 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-11">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 11 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-12">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 12 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-13">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 13 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-14">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 14 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-15">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 15 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-16">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 16 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-17">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 17 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-18">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 18 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-19">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 19 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-20">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 20 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-21">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 21 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-22">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 22 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-23">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 23 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-24">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 24 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-25">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 25 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-26">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 26 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-27">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 27 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-28">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 28 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-29">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 29 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-30">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 30 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-31">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 31 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-32">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 32 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-33">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 33 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-34">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 34 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-35">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 35 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-36">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 36 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-37">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 37 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-38">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 38 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-39">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 39 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-40">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 40 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-41">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 41 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-42">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 42 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-43">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 43 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-44">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 44 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-45">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 45 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-46">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 46 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-47">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 47 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-48">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 48 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-49">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 49 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-50">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 50 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-51">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 51 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-52">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 52 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-53">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 53 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-54">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 54 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-55">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 55 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-56">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 56 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-57">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 57 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-58">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 58 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-59">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 59 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-60">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 60 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-61">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 61 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-62">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 62 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-63">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 63 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-64">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 64 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-65">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 65 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-66">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 66 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-67">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 67 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-68">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 68 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-69">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 69 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-70">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 70 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-71">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 71 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-72">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 72 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-73">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 73 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-74">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 74 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-75">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 75 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-76">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 76 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-77">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 77 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-78">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 78 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-79">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 79 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-80">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 80 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-81">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 81 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-82">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 82 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-83">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 83 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-84">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 84 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-85">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 85 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-86">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 86 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-87">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 87 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-88">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 88 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-89">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 89 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-90">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 90 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-91">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 91 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-92">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 92 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-93">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 93 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-94">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 94 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-95">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 95 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-96">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 96 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-97">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 97 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-98">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 98 - 2023</span><span class="fr-text">Concession</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-99">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 99 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ </ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_FullAlwaysOpen.html b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_FullAlwaysOpen.html
index 3a81976e5..63dfdbf00 100644
--- a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_FullAlwaysOpen.html
+++ b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_FullAlwaysOpen.html
@@ -1,607 +1,607 @@
-<div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+<div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="typeahead_id">Rechercher</label>
<div id="typeahead_id_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_id" type="text" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <div class="_typeahead-list_8eddf1">
- <div class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1">
+ <div class="flex"><input id="typeahead_id" type="text" title="Rechercher un titre" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="typeahead_id-control" aria-activedescendant="typeahead_id-control-0" aria-expanded="true" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="typeahead_id-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="typeahead_id-control-0">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 0 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-1">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 1 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-2">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 2 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-3">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 3 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-4">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 4 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-5">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 5 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-6">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 6 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-7">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 7 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-8">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 8 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-9">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 9 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-10">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 10 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-11">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 11 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-12">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 12 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-13">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 13 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-14">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 14 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-15">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 15 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-16">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 16 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-17">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 17 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-18">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 18 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-19">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 19 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-20">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 20 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-21">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 21 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-22">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 22 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-23">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 23 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-24">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 24 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-25">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 25 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-26">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 26 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-27">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 27 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-28">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 28 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-29">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 29 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-30">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 30 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-31">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 31 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-32">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 32 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-33">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 33 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-34">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 34 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-35">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 35 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-36">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 36 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-37">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 37 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-38">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 38 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-39">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 39 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-40">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 40 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-41">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 41 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-42">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 42 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-43">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 43 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-44">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 44 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-45">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 45 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-46">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 46 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-47">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 47 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-48">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 48 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-49">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 49 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-50">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 50 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-51">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 51 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-52">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 52 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-53">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 53 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-54">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 54 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-55">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 55 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-56">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 56 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-57">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 57 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-58">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 58 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-59">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 59 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-60">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 60 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-61">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 61 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-62">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 62 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-63">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 63 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-64">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 64 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-65">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 65 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-66">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 66 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-67">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 67 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-68">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 68 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-69">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 69 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-70">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 70 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-71">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 71 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-72">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 72 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-73">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 73 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-74">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 74 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-75">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 75 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-76">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 76 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-77">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 77 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-78">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 78 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-79">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 79 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-80">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 80 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-81">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 81 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-82">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 82 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-83">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 83 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-84">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 84 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-85">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 85 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-86">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 86 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-87">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 87 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-88">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 88 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-89">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 89 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-90">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 90 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-91">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 91 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-92">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 92 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-93">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 93 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-94">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 94 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-95">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 95 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-96">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 96 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-97">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 97 - 2023</span><span class="fr-text">Autorisation d'exploitation</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-98">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine hydrocarbures liquides ou gazeux" aria-label="Domaine hydrocarbures liquides ou gazeux" style="min-width: 2rem; color: black;">H</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 98 - 2023</span><span class="fr-text">Concession</span></div>
</div>
- </div>
- <div class="_typeahead-list-item_8eddf1 ">
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-99">
<div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
<p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
<div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Nom du titre 99 - 2023</span><span class="fr-text">Autorisation de recherches</span></div>
</div>
- </div>
- </div>
+ </li>
+ </ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Simple.html b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Simple.html
index bca3cde18..1d4ee46f9 100644
--- a/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Simple.html
+++ b/packages/ui/src/components/page/quick-access-titre.stories_snapshots_Simple.html
@@ -1,6 +1,19 @@
-<div class="fr-search-bar" id="search-473" role="search"><label class="fr-label" for="search-473-input">Rechercher</label>
+<div class="fr-search-bar" id="search-quick-access-titre" role="search"><label class="fr-label" for="typeahead_id">Rechercher</label>
<div id="typeahead_id_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_id" type="text" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="typeahead_id" type="text" title="Rechercher un titre" name="typeahead_id" class="fr-input" placeholder="Rechercher un titre" autocomplete="off" role="combobox" aria-controls="typeahead_id-control" aria-activedescendant="typeahead_id-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_id-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_id-control-0">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">MonTitre<!----></span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_id-control-1">
+ <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left;">
+ <p class="fr-tag fr-tag--md mono" title="Domaine géothermie" aria-label="Domaine géothermie" style="min-width: 2rem; color: black;">G</p>
+ <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">MonSecondTitre<!----></span><span class="fr-text">Autorisation de recherches</span></div>
+ </div>
+ </li>
+ </ul>
</div><button class="fr-btn" title="Rechercher">Rechercher</button>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/page/quick-access-titre.tsx b/packages/ui/src/components/page/quick-access-titre.tsx
index f368f931a..12fe22435 100644
--- a/packages/ui/src/components/page/quick-access-titre.tsx
+++ b/packages/ui/src/components/page/quick-access-titre.tsx
@@ -85,8 +85,8 @@ export const PureQuickAccessTitre = defineComponent<Props>(props => {
const debounce = createDebounce()
return () => (
- <div class="fr-search-bar" id="search-473" role="search">
- <label class="fr-label" for="search-473-input">
+ <div class="fr-search-bar" id="search-quick-access-titre" role="search">
+ <label class="fr-label" for={props.id}>
Rechercher
</label>
<TypeAheadSingle
diff --git a/packages/ui/src/components/statistiques.tsx b/packages/ui/src/components/statistiques.tsx
index 92515158d..bc56317fd 100644
--- a/packages/ui/src/components/statistiques.tsx
+++ b/packages/ui/src/components/statistiques.tsx
@@ -47,5 +47,10 @@ export const Statistiques = defineComponent(() => {
const initTab: TabId = initTabIdParsed.success ? initTabIdParsed.data : 'globales'
routerReplaceTabId(initTab, router)
- return () => <Tabs tabsTitle="Statistiques" tabs={tabs} initTab={initTab} tabClicked={tabId => routerReplaceTabId(tabId, router)} />
+ return () => (
+ <>
+ <h1>Statistiques</h1>
+ <Tabs tabsTitle="Statistiques" tabs={tabs} initTab={initTab} tabClicked={tabId => routerReplaceTabId(tabId, router)} />
+ </>
+ )
})
diff --git a/packages/ui/src/components/statistiques/globales.tsx b/packages/ui/src/components/statistiques/globales.tsx
index f40a022ec..f7e83d1a9 100644
--- a/packages/ui/src/components/statistiques/globales.tsx
+++ b/packages/ui/src/components/statistiques/globales.tsx
@@ -15,10 +15,6 @@ import { CaminoStatistiquesDataGouvId } from 'camino-common/src/static/statistiq
const pieConfiguration = (data: ChartConfiguration<'pie'>['data']): ChartConfiguration<'pie'> => ({
type: 'pie',
data,
- options: {
- locale: 'fr-FR',
- aspectRatio: 1.33,
- },
})
const lineConfiguration = (data: ChartConfiguration<'line'>['data']): ChartConfiguration<'line'> => ({
@@ -60,8 +56,8 @@ const statsLineFormat = ({ stats, labelY }: { stats: QuantiteParMois[]; labelY:
data: [],
fill: 'start',
tension: 0.5,
- backgroundColor: 'rgba(118, 182, 189, 0.2)',
- borderColor: 'rgb(118, 182, 189)',
+ backgroundColor: 'rgb(54, 162, 235, 0.4)',
+ borderColor: 'rgb(54, 162, 235)',
},
],
}
@@ -177,7 +173,7 @@ export const PureGlobales: FunctionalComponent<Props> = props => {
</div>
<div class="fr-col-12 fr-col-md-8 flex" style="justify-content: center">
<div style="width: 70%">
- <ConfigurableChart chartConfiguration={pieConfiguration(utilisateurs)} />
+ <ConfigurableChart chartConfiguration={pieConfiguration(utilisateurs)} ariaHidden={true} />
</div>
</div>
</div>
@@ -194,7 +190,18 @@ export const PureGlobales: FunctionalComponent<Props> = props => {
</div>
<div class="fr-col-12 fr-col-md-8 flex" style="justify-content: center">
<div style="width: 70%">
- <ConfigurableChart chartConfiguration={pieConfiguration(utilisateursAdminChart)} />
+ <ConfigurableChart
+ chartConfiguration={pieConfiguration(utilisateursAdminChart)}
+ a11yDescription={
+ <ul>
+ {utilisateursAdminChart.datasets[0].data.map((utilisateurData, index) => (
+ <li>
+ {utilisateursAdminChart.labels[index]} : {utilisateurData}
+ </li>
+ ))}
+ </ul>
+ }
+ />
</div>
</div>
</div>
@@ -220,6 +227,25 @@ export const PureGlobales: FunctionalComponent<Props> = props => {
labelY: 'titres modifiés',
})
)}
+ a11yDescription={
+ <table>
+ <caption>Nombre de titres modifiés par mois</caption>
+ <thead>
+ <tr>
+ <th>Mois</th>
+ <th>Nombre de titres modifiés</th>
+ </tr>
+ </thead>
+ <tbody>
+ {props.statistiques.titresModifies.map(titre => (
+ <tr>
+ <td>{titre.mois}</td>
+ <td>{titre.quantite}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ }
/>
</div>
</div>
diff --git a/packages/ui/src/components/statistiques/granulats-marins-activite.tsx b/packages/ui/src/components/statistiques/granulats-marins-activite.tsx
index 2654098d3..4c543465d 100644
--- a/packages/ui/src/components/statistiques/granulats-marins-activite.tsx
+++ b/packages/ui/src/components/statistiques/granulats-marins-activite.tsx
@@ -15,7 +15,7 @@ export const GranulatsMarinsActivite: FunctionalComponent<Props> = props => (
<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>
+ <h3 class="text-center">Production nette en volume</h3>
{props.statistiqueGranulatsMarins.activitesDeposesQuantite > 3 ? (
<div>
<p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGranulatsMarins.volume)} m³</p>
@@ -27,7 +27,7 @@ export const GranulatsMarinsActivite: FunctionalComponent<Props> = props => (
)}
</div>
<div class="fr-col-12 fr-col-md-6 fr-mb-3w">
- <h4 class="text-center">Production nette en masse</h4>
+ <h3 class="text-center">Production nette en masse</h3>
{props.statistiqueGranulatsMarins.activitesDeposesQuantite > 3 ? (
<div>
<p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGranulatsMarins.masse)} t</p>
@@ -41,12 +41,12 @@ export const GranulatsMarinsActivite: FunctionalComponent<Props> = props => (
</div>
<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>
+ <h3 class="text-center">Sources des données</h3>
<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="fr-col-12 fr-col-md-6 fr-mb-3w">
- <h4 class="text-center">Taux de collecte</h4>
+ <h3 class="text-center">Taux de collecte</h3>
<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>
</div>
diff --git a/packages/ui/src/components/statistiques/granulats-marins.tsx b/packages/ui/src/components/statistiques/granulats-marins.tsx
index 438f94066..520f132ca 100644
--- a/packages/ui/src/components/statistiques/granulats-marins.tsx
+++ b/packages/ui/src/components/statistiques/granulats-marins.tsx
@@ -11,6 +11,7 @@ import styles from './statistiques.module.css'
import { DsfrSelect } from '../_ui/dsfr-select'
import { isNonEmptyArray, map } from 'camino-common/src/typescript-tools'
import { DsfrSeparator } from '../_ui/dsfr-separator'
+import { CHART_COLORS } from '../_charts/utils'
const ids = ['titresPrw', 'titresPxw', 'titresCxw', 'concessionsValides'] as const
@@ -68,17 +69,16 @@ const statsBarFormat = ({
label: labelLine,
data: [],
yAxisID: 'line',
- fill: 'start',
tension: 0.5,
- backgroundColor: 'rgba(55, 111, 170, 0.2)',
- borderColor: 'rgb(55, 111, 170)',
+ backgroundColor: CHART_COLORS.orange,
+ borderColor: CHART_COLORS.orange,
},
{
type: 'bar',
label: labelBar,
yAxisID: 'bar',
data: [],
- backgroundColor: 'rgb(118, 182, 189)',
+ backgroundColor: CHART_COLORS.blue,
},
],
}
@@ -369,6 +369,8 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
}),
Math.max(...statsAnneesAfter2010.map(annee => annee.volume))
)}
+ description="Production de granulats marins par année"
+ a11yDescription="autoyearlytable"
/>
)
}}
@@ -394,7 +396,7 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
const anneesLabel = map(annees, annee => ({ id: annee.id, label: annee.nom }))
return (
<>
- <DsfrSelect legend={{ main: 'Sélectionner une année' }} items={anneesLabel} initialValue={anneeActive.value} valueChanged={anneeSelect} />
+ <DsfrSelect 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} />
</>
)
@@ -435,6 +437,8 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
}),
suggestedMaxTitres('titresPrw', item.raw.annees)
)}
+ description="Nombre de permis exclusifs de recherche par année"
+ a11yDescription="autoyearlytable"
/>
)}
/>
@@ -470,6 +474,8 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
}),
suggestedMaxTitres('titresPxw', raw.annees)
)}
+ description="Nombre de permis d'exploitation par année"
+ a11yDescription="autoyearlytable"
/>
</div>
</div>
@@ -507,6 +513,8 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
}),
suggestedMaxTitres('titresCxw', item.raw.annees)
)}
+ description="Nombre de concessions octroyées par année"
+ a11yDescription="autoyearlytable"
/>
)}
/>
@@ -537,6 +545,8 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
}),
suggestedMaxTitres('concessionsValides', item.raw.annees)
)}
+ description="Nombre de concessions valides par année"
+ a11yDescription="autoyearlytable"
/>
)}
/>
diff --git a/packages/ui/src/components/statistiques/guyane-activite.tsx b/packages/ui/src/components/statistiques/guyane-activite.tsx
index 510ee5c79..aeace94fc 100644
--- a/packages/ui/src/components/statistiques/guyane-activite.tsx
+++ b/packages/ui/src/components/statistiques/guyane-activite.tsx
@@ -13,25 +13,25 @@ export const GuyaneActivite: FunctionalComponent<Props> = props => (
<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>
+ <h3 class="text-center">Production d'or nette</h3>
<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="fr-col-12 fr-col-md-4 fr-mb-3w">
- <h4 class="text-center">Energie consommée</h4>
+ <h3 class="text-center">Energie consommée</h3>
<p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.carburantConventionnel + props.statistiqueGuyane.carburantDetaxe)} kl</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="fr-col-12 fr-col-md-4 fr-mb-3w">
- <h4 class="text-center">Mercure collecté</h4>
+ <h3 class="text-center">Mercure collecté</h3>
<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="fr-grid-row">
<div class="fr-col-12 fr-col-md-6 fr-mb-3w">
- <h4 class="text-center">Protection de l'environnement</h4>
+ <h3 class="text-center">Protection de l'environnement</h3>
<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>
<p>
@@ -39,19 +39,19 @@ export const GuyaneActivite: FunctionalComponent<Props> = props => (
</p>
</div>
<div class="fr-col-12 fr-col-md-6 fr-mb-3w">
- <h4 class="text-center">Emplois</h4>
+ <h3 class="text-center">Emplois</h3>
<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="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
- <h4 class="text-center">Sources des données</h4>
+ <h3 class="text-center">Sources des données</h3>
<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="fr-col-12 fr-col-md-6">
- <h4 class="text-center">Taux de collecte</h4>
+ <h3 class="text-center">Taux de collecte</h3>
<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>
</div>
diff --git a/packages/ui/src/components/statistiques/guyane.tsx b/packages/ui/src/components/statistiques/guyane.tsx
index 558a5cdbb..17c1ac76e 100644
--- a/packages/ui/src/components/statistiques/guyane.tsx
+++ b/packages/ui/src/components/statistiques/guyane.tsx
@@ -70,28 +70,28 @@ const armChartConfiguration = (data: StatistiquesGuyaneData): ChartConfiguration
label: "Demandes d'octroi ARM déposées",
yAxisID: 'demandes',
data: annees.map(annee => data.arm.depot[annee] ?? 0),
- backgroundColor: CHART_COLORS.green,
+ backgroundColor: CHART_COLORS.blue,
},
{
type: 'bar',
label: "Demandes d'ARM octroyées",
yAxisID: 'demandes',
data: annees.map(annee => data.arm.octroiEtProlongation[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.yellow,
},
{
type: 'bar',
label: "Demandes d'octroi d'ARM refusées",
yAxisID: 'demandes',
data: annees.map(annee => data.arm.refusees[annee] ?? 0),
- backgroundColor: CHART_COLORS.purple,
+ backgroundColor: CHART_COLORS.red,
},
{
type: 'line',
label: 'Surface cumulée des autorisations de recherche (ha)',
yAxisID: 'surface',
data: annees.map(annee => data.arm.surface[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
},
],
}
@@ -109,28 +109,28 @@ const prmChartConfiguration = (data: StatistiquesGuyaneData): ChartConfiguration
label: 'Demandes de PER déposées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.prm.depot[annee] ?? 0),
- backgroundColor: CHART_COLORS.green,
+ backgroundColor: CHART_COLORS.blue,
},
{
type: 'bar',
label: 'Demandes de PER octroyées et prolongées',
yAxisID: 'demandes',
data: annees.map(annee => data.prm.octroiEtProlongation[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.yellow,
},
{
type: 'bar',
label: 'Demandes de PER refusées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.prm.refusees[annee] ?? 0),
- backgroundColor: CHART_COLORS.purple,
+ backgroundColor: CHART_COLORS.red,
},
{
type: 'line',
label: 'Surface cumulée des permis de recherche (ha) accordés',
yAxisID: 'surface',
data: annees.map(annee => data.prm.surface[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
},
],
}
@@ -148,28 +148,28 @@ const axmChartConfiguration = (data: StatistiquesGuyaneData): ChartConfiguration
label: "Demandes d'AEX déposées (octroi et prolongation)",
yAxisID: 'demandes',
data: annees.map(annee => data.axm.depot[annee] ?? 0),
- backgroundColor: CHART_COLORS.green,
+ backgroundColor: CHART_COLORS.blue,
},
{
type: 'bar',
label: "Demandes d'AEX octroyées et prolongées",
yAxisID: 'demandes',
data: annees.map(annee => data.axm.octroiEtProlongation[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.yellow,
},
{
type: 'bar',
label: "Demandes d'AEX refusées (octroi et prolongation)",
yAxisID: 'demandes',
data: annees.map(annee => data.axm.refusees[annee] ?? 0),
- backgroundColor: CHART_COLORS.purple,
+ backgroundColor: CHART_COLORS.red,
},
{
type: 'line',
label: "Surface cumulée des autorisations d'exploitation (ha) accordés",
yAxisID: 'surface',
data: annees.map(annee => data.axm.surface[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
},
],
}
@@ -187,28 +187,28 @@ const cxmChartConfiguration = (data: StatistiquesGuyaneData): ChartConfiguration
label: 'Demandes de concessions déposées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.cxm.depot[annee] ?? 0),
- backgroundColor: CHART_COLORS.green,
+ backgroundColor: CHART_COLORS.blue,
},
{
type: 'bar',
label: 'Demandes de concessions octroyées et prolongées',
yAxisID: 'demandes',
data: annees.map(annee => data.cxm.octroiEtProlongation[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.yellow,
},
{
type: 'bar',
label: 'Demandes de concessions refusées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.cxm.refusees[annee] ?? 0),
- backgroundColor: CHART_COLORS.purple,
+ backgroundColor: CHART_COLORS.red,
},
{
type: 'line',
label: 'Surface cumulée des concessions (ha) accordés',
yAxisID: 'surface',
data: annees.map(annee => data.cxm.surface[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
},
],
}
@@ -434,22 +434,38 @@ export const PureGuyane = defineComponent<Props>(props => {
<div class="fr-mb-3w">
<h3>Autorisations de recherche</h3>
<hr />
- <LoadingElement data={data.value} renderItem={item => <ConfigurableChart chartConfiguration={armChartConfiguration(item.data)} />} />
+ <LoadingElement
+ data={data.value}
+ renderItem={item => (
+ <ConfigurableChart chartConfiguration={armChartConfiguration(item.data)} description="Nombre d'autorisations de recherche par année" a11yDescription="autoyearlytable" />
+ )}
+ />
</div>
<div class="fr-mb-3w">
<h3>Permis de recherches</h3>
<hr />
- <LoadingElement data={data.value} renderItem={item => <ConfigurableChart chartConfiguration={prmChartConfiguration(item.data)} />} />
+ <LoadingElement
+ data={data.value}
+ renderItem={item => <ConfigurableChart chartConfiguration={prmChartConfiguration(item.data)} description="Nombre de permis de recherches par année" a11yDescription="autoyearlytable" />}
+ />
</div>
<div class="fr-mb-3w">
<h3>Autorisations d'exploitation</h3>
<hr />
- <LoadingElement data={data.value} renderItem={item => <ConfigurableChart chartConfiguration={axmChartConfiguration(item.data)} />} />
+ <LoadingElement
+ data={data.value}
+ renderItem={item => (
+ <ConfigurableChart chartConfiguration={axmChartConfiguration(item.data)} description="Nombre d'autorisations d\'exploitation par année" a11yDescription="autoyearlytable" />
+ )}
+ />
</div>
<div class="fr-mb-3w">
<h3>Concessions</h3>
<hr />
- <LoadingElement data={data.value} renderItem={item => <ConfigurableChart chartConfiguration={cxmChartConfiguration(item.data)} />} />
+ <LoadingElement
+ data={data.value}
+ renderItem={item => <ConfigurableChart chartConfiguration={cxmChartConfiguration(item.data)} description="Nombre de concessions par année" a11yDescription="autoyearlytable" />}
+ />
</div>
</div>
</div>
diff --git a/packages/ui/src/components/statistiques/mineraux-metaux-metropole.tsx b/packages/ui/src/components/statistiques/mineraux-metaux-metropole.tsx
index 251a8e33e..0b936b385 100644
--- a/packages/ui/src/components/statistiques/mineraux-metaux-metropole.tsx
+++ b/packages/ui/src/components/statistiques/mineraux-metaux-metropole.tsx
@@ -25,21 +25,21 @@ const bauxiteChartConfiguration = (data: StatistiquesMinerauxMetauxMetropole): C
const chartData: ChartData = {
labels: annees,
datasets: [
- {
- type: 'line',
- yAxisID: 'fiscalite',
- label: 'Fiscalité',
- backgroundColor: CHART_COLORS.blue,
- borderColor: CHART_COLORS.blue,
- borderDash: [5, 5],
- data: annees.map(annee => data.fiscaliteParSubstanceParAnnee[SUBSTANCES_FISCALES_IDS.bauxite]?.[annee] ?? Number.NaN),
- },
{
type: 'bar',
yAxisID: 'production',
label: 'Production',
data: annees.map(annee => data.substances.aloh[annee] ?? 0),
- backgroundColor: 'rgb(118, 182, 189)',
+ backgroundColor: CHART_COLORS.blue,
+ },
+ {
+ type: 'line',
+ yAxisID: 'fiscalite',
+ label: 'Fiscalité',
+ backgroundColor: CHART_COLORS.orange,
+ borderColor: CHART_COLORS.orange,
+ borderDash: [5, 5],
+ data: annees.map(annee => data.fiscaliteParSubstanceParAnnee[SUBSTANCES_FISCALES_IDS.bauxite]?.[annee] ?? null),
},
],
}
@@ -112,8 +112,8 @@ const selsChartConfiguration = (data: StatistiquesMinerauxMetauxMetropole): Char
type: 'line',
yAxisID: 'fiscalite',
label: 'Fiscalité',
- backgroundColor: CHART_COLORS.blue,
- borderColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
+ borderColor: CHART_COLORS.black,
borderDash: [5, 5],
data: annees.map(
annee =>
@@ -178,28 +178,28 @@ const perChartConfiguration = (data: StatistiquesMinerauxMetauxMetropole): Chart
label: 'Demandes de PER déposées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.prm.depot[annee] ?? 0),
- backgroundColor: CHART_COLORS.green,
+ backgroundColor: CHART_COLORS.blue,
},
{
type: 'bar',
label: 'Demandes de PER octroyées et prolongées',
yAxisID: 'demandes',
data: annees.map(annee => data.prm.octroiEtProlongation[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.yellow,
},
{
type: 'bar',
label: 'Demandes de PER refusées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.prm.refusees[annee] ?? 0),
- backgroundColor: CHART_COLORS.purple,
+ backgroundColor: CHART_COLORS.red,
},
{
type: 'line',
label: 'Surface cumulée des permis de recherche (ha) accordés',
yAxisID: 'surface',
data: annees.map(annee => data.prm.surface[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
},
],
}
@@ -247,28 +247,28 @@ const concessionChartConfiguration = (data: StatistiquesMinerauxMetauxMetropole)
label: 'Demandes de concessions déposées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.cxm.depot[annee] ?? 0),
- backgroundColor: CHART_COLORS.green,
+ backgroundColor: CHART_COLORS.blue,
},
{
type: 'bar',
label: 'Demandes de concessions octroyées et prolongées',
yAxisID: 'demandes',
data: annees.map(annee => data.cxm.octroiEtProlongation[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.yellow,
},
{
type: 'bar',
label: 'Demandes de concessions refusées (octroi et prolongation)',
yAxisID: 'demandes',
data: annees.map(annee => data.cxm.refusees[annee] ?? 0),
- backgroundColor: CHART_COLORS.purple,
+ backgroundColor: CHART_COLORS.red,
},
{
type: 'line',
label: 'Surface cumulée des concessions (ha) accordées',
yAxisID: 'surface',
data: annees.map(annee => data.cxm.surface[annee] ?? 0),
- backgroundColor: CHART_COLORS.blue,
+ backgroundColor: CHART_COLORS.black,
},
],
}
@@ -488,11 +488,16 @@ export const PureMinerauxMetauxMetropole = defineComponent<Props>(props => {
<div class={styles['grid-container']}>
<div style="grid-column-end: span 2">
<h3>Bauxite</h3>
- <ChartWithExport data={data.value} getConfiguration={item => bauxiteChartConfiguration(item)} />
+ <ChartWithExport data={data.value} getConfiguration={item => bauxiteChartConfiguration(item)} a11yDescription="autoyearlytable" description="Bauxite" />
</div>
<div style="grid-column-end: span 2">
<h3>Sels (sel de sodium, sel de potassium, sel gemme…)</h3>
- <ChartWithExport data={data.value} getConfiguration={item => selsChartConfiguration(item)} />
+ <ChartWithExport
+ data={data.value}
+ getConfiguration={item => selsChartConfiguration(item)}
+ a11yDescription="autoyearlytable"
+ description="Sels (sel de sodium, sel de potassium, sel gemme…)"
+ />
</div>
<div style="grid-column-end: span 2">
@@ -513,12 +518,12 @@ export const PureMinerauxMetauxMetropole = defineComponent<Props>(props => {
<div class="fr-mb-3w">
<h3>Permis Exclusif de Recherche (PER)</h3>
<hr />
- <ChartWithExport data={data.value} getConfiguration={item => perChartConfiguration(item)} />
+ <ChartWithExport data={data.value} getConfiguration={item => perChartConfiguration(item)} a11yDescription="autoyearlytable" description="Permis Exclusif de Recherche (PER)" />
</div>
<div class="fr-mb-3w">
<h3>Concession</h3>
<hr />
- <ChartWithExport data={data.value} getConfiguration={item => concessionChartConfiguration(item)} />
+ <ChartWithExport data={data.value} getConfiguration={item => concessionChartConfiguration(item)} a11yDescription="autoyearlytable" description="Concession" />
</div>
</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 f67e7dab6..5749e5f08 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_DefaultUserSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_DefaultUserSuper.html
@@ -2,7 +2,7 @@
<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="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
<option value="c">carrières</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 414bb2737..30cc7915c 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_DisplayErrorMessageUserSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_DisplayErrorMessageUserSuper.html
@@ -2,7 +2,7 @@
<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="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
<option value="c">carrières</option>
@@ -15,7 +15,7 @@
<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="select_670">Type
<!---->
</label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ax">
<option value="ap">autorisation de prospections préalables</option>
@@ -27,7 +27,9 @@
<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="input_74">Nom du titre
+ <!---->
+ <!---->
<!---->
</label><input class="fr-input" name="input_74" id="input_74" required="" type="text" value="Titre full">
<!---->
@@ -50,7 +52,7 @@
</select>
</div>
<div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
- <!----><input class="fr-input" name="input_967" id="input_967" type="text" value="REF">
+ <!----><input class="fr-input" name="input_967" id="input_967" required="" type="text" value="REF">
<!---->
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 1" aria-label="Supprimer la référence 1" type="button">
<!---->
@@ -59,8 +61,19 @@
</div>
<div class="fr-mt-3w"><label class="fr-label fr-mb-1w">Titre à l’origine de cette nouvelle demande</label>
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" value="Affluent Crique Saint Bernard"></div>
- <!---->
+ <div class="flex"><input id="titre-link-typeahead" type="text" title="Lier un titre" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value="Affluent Crique Saint Bernard"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Abttis Coucou</span><span class="ml-m" style="margin-left: auto;">2016-10-28 - 2017-03-17</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-1">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
</div>
<div style="display: flex; align-items: center;" class="fr-mt-3w"><button class="fr-btn fr-btn--primary fr-btn--md fr-mr-1w" title="Enregistrer" aria-label="Enregistrer" type="submit">Enregistrer</button>
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 51c998980..480b95961 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_FullEntreprise.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_FullEntreprise.html
@@ -1,26 +1,28 @@
<div>
<h1>Demande de titre</h1>
<form>
- <div class="fr-mb-3w"><label class="fr-label fr-mb-1w" for="input_entreprise">Entreprise *</label>
+ <div class="fr-mb-3w"><label class="fr-label fr-mb-1w" for="input_entreprise">Entreprise</label>
<div id="input_entreprise_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="input_entreprise" type="text" name="input_entreprise" class="fr-input" placeholder="" autocomplete="off" value="entreprise 1"></div>
- <!---->
+ <div class="flex"><input id="input_entreprise" type="text" title="" name="input_entreprise" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="input_entreprise-control" aria-activedescendant="input_entreprise-control" aria-expanded="false" aria-autocomplete="list" value="entreprise 1"></div>
+ <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="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
<option selected="" value="m">minéraux et métaux</option>
<option disabled="" hidden="" value="">Selectionnez une option</option>
</select></div>
- <div class="fr-select-group"><label class="fr-label" for="select_670">Type *
+ <div class="fr-select-group"><label class="fr-label" for="select_670">Type
<!---->
</label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="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="input_74">Nom du titre
+ <!---->
+ <!---->
<!---->
</label><input class="fr-input" name="input_74" id="input_74" required="" type="text" value="Titre full">
<!---->
@@ -28,8 +30,19 @@
<!---->
<div class="fr-mt-3w"><label class="fr-label fr-mb-1w">Titre à l’origine de cette nouvelle demande</label>
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" value="Affluent Crique Saint Bernard"></div>
- <!---->
+ <div class="flex"><input id="titre-link-typeahead" type="text" title="Lier un titre" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value="Affluent Crique Saint Bernard"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Abttis Coucou</span><span class="ml-m" style="margin-left: auto;">2016-10-28 - 2017-03-17</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-1">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
</div>
<div style="display: flex; align-items: center;" class="fr-mt-3w"><button class="fr-btn fr-btn--primary fr-btn--md fr-mr-1w" title="Enregistrer" aria-label="Enregistrer" type="submit">Enregistrer</button>
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 414bb2737..30cc7915c 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_FullSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_FullSuper.html
@@ -2,7 +2,7 @@
<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="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
<option value="c">carrières</option>
@@ -15,7 +15,7 @@
<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="select_670">Type
<!---->
</label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ax">
<option value="ap">autorisation de prospections préalables</option>
@@ -27,7 +27,9 @@
<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="input_74">Nom du titre
+ <!---->
+ <!---->
<!---->
</label><input class="fr-input" name="input_74" id="input_74" required="" type="text" value="Titre full">
<!---->
@@ -50,7 +52,7 @@
</select>
</div>
<div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
- <!----><input class="fr-input" name="input_967" id="input_967" type="text" value="REF">
+ <!----><input class="fr-input" name="input_967" id="input_967" required="" type="text" value="REF">
<!---->
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 1" aria-label="Supprimer la référence 1" type="button">
<!---->
@@ -59,8 +61,19 @@
</div>
<div class="fr-mt-3w"><label class="fr-label fr-mb-1w">Titre à l’origine de cette nouvelle demande</label>
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" value="Affluent Crique Saint Bernard"></div>
- <!---->
+ <div class="flex"><input id="titre-link-typeahead" type="text" title="Lier un titre" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value="Affluent Crique Saint Bernard"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Abttis Coucou</span><span class="ml-m" style="margin-left: auto;">2016-10-28 - 2017-03-17</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-1">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
</div>
<div style="display: flex; align-items: center;" class="fr-mt-3w"><button class="fr-btn fr-btn--primary fr-btn--md fr-mr-1w" title="Enregistrer" aria-label="Enregistrer" type="submit">Enregistrer</button>
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 d7705dc80..e232c2a04 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserEntreprise.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserEntreprise.html
@@ -1,19 +1,19 @@
<div>
<h1>Demande de titre</h1>
<form>
- <div class="fr-mb-3w"><label class="fr-label fr-mb-1w" for="input_entreprise">Entreprise *</label>
+ <div class="fr-mb-3w"><label class="fr-label fr-mb-1w" for="input_entreprise">Entreprise</label>
<div id="input_entreprise_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="input_entreprise" type="text" name="input_entreprise" class="fr-input" placeholder="" autocomplete="off" value="entreprise 1"></div>
- <!---->
+ <div class="flex"><input id="input_entreprise" type="text" title="" name="input_entreprise" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="input_entreprise-control" aria-activedescendant="input_entreprise-control" aria-expanded="false" aria-autocomplete="list" value="entreprise 1"></div>
+ <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="select_670">Domaine
<!---->
</label><select class="fr-select" id="select_670" aria-label="Domaine" name="select_670" value="m">
<option value="m" selected="">minéraux et métaux</option>
<option disabled="" hidden="" value="">Selectionnez une option</option>
</select></div>
- <div class="fr-select-group"><label class="fr-label" for="select_74">Type *
+ <div class="fr-select-group"><label class="fr-label" for="select_74">Type
<!---->
</label><select class="fr-select" id="select_74" aria-label="Type" name="select_74">
<option value="ar">autorisation de recherches</option>
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 f67e7dab6..5749e5f08 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserSuper.html
@@ -2,7 +2,7 @@
<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="select_271">Domaine
<!---->
</label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
<option value="c">carrières</option>
diff --git a/packages/ui/src/components/titre-creation.tsx b/packages/ui/src/components/titre-creation.tsx
index 4a0ee4f74..842498b5b 100644
--- a/packages/ui/src/components/titre-creation.tsx
+++ b/packages/ui/src/components/titre-creation.tsx
@@ -192,7 +192,7 @@ export const PureTitreCreation = defineComponent<Props>(props => {
{isNonEmptyArray(entreprises) ? (
<div class="fr-mb-3w">
<label class="fr-label fr-mb-1w" for="input_entreprise">
- Entreprise *
+ Entreprise
</label>
<AutocompleteEntrepriseSingle initialValue={titreDemande.value.entrepriseId} items={entreprises} onUpdate={entrepriseUpdate} id="input_entreprise" />
</div>
diff --git a/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html b/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html
index 778bb5dbd..4f466c68a 100644
--- a/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">ONF : AR2006060</div>
@@ -33,7 +33,12 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 28-11-2006" aria-label="Voir la phase Octroi du 28-11-2006" aria-current="page" tab-index="-1">Voir la phase Octroi du 28-11-2006</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -43,14 +48,14 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
</div>
</div>
@@ -131,8 +136,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 / UTM zone 22N - (2972)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -141,7 +216,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -229,7 +304,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;">Signature de l'autorisation de recherche minière</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Signature de l'autorisation de recherche minière</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -293,8 +368,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 / UTM zone 22N - (2972)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -303,7 +448,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -388,7 +533,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écision de l'Office national des forêts</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'Office national des forêts</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -414,7 +559,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;">Enregistrement de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Enregistrement de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html b/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html
index 89a8e2e46..15bad6124 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Permis exclusif de recherches</h3>
+ <p class="fr-h3 fr-m-0">Permis exclusif de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEAL : 22/2018</div>
@@ -33,7 +33,16 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 11-09-2018" aria-label="Voir la phase Octroi du 11-09-2018" tab-index="-1">Voir la phase Octroi du 11-09-2018</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 1 du 11-09-2021" aria-label="Voir la phase Prolongation 1 du 11-09-2021" aria-current="page" tab-index="-1">Voir la phase Prolongation 1 du 11-09-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation 2 du 2023-10-30 lié à la phase Prolongation 1" aria-label="Voir l'événement Prolongation 2 du 2023-10-30 lié à la phase Prolongation 1" tab-index="-1">Voir l'événement Prolongation 2 du 30-10-2023 lié à la phase Prolongation 1</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -47,9 +56,9 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" aria-current="page" style="min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="_event_b2e482" aria-label="Prolongation 2" aria-describedby="timeline-event-m-pr-basse-mana-2018-pr201">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" aria-current="page" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_event_b2e482" aria-label="Prolongation 2" aria-describedby="timeline-event-m-pr-basse-mana-2018-pr201">
<!---->
</a></a></div>
<!---->
@@ -58,10 +67,10 @@
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1" aria-current="page">Prolongation 1</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1" aria-current="page">Prolongation 1</a></div>
</div>
</div>
</div>
@@ -142,8 +151,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 / UTM zone 22N - (2972)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -152,7 +231,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -240,7 +319,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;">Publication de décision au recueil des actes administratifs</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au recueil des actes administratifs</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -266,7 +345,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -291,7 +370,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/Texte 3 sur 160" title="Légifrance - Lien externe">Texte 3 sur 160</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/Texte 3 sur 160" title="Numéro JORF Légifrance - Lien externe">Texte 3 sur 160</a></p>
</div>
</div>
<!---->
@@ -330,7 +409,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -369,7 +448,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;">Participation du public</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Participation du public</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -407,7 +486,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;">Enregistrement de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Enregistrement de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -433,7 +512,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -488,8 +567,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 / UTM zone 22N - (2972)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -498,7 +647,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html b/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html
index 8b84651cc..9a1488ed0 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Permis exclusif de recherches</h3>
+ <p class="fr-h3 fr-m-0">Permis exclusif de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEAL : 21/2001</div>
@@ -33,7 +33,22 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-11-2001" aria-label="Voir la phase Octroi du 01-11-2001" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-11-2001</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 1 du 01-11-2006" aria-label="Voir la phase Prolongation 1 du 01-11-2006" tab-index="-1">Voir la phase Prolongation 1 du 01-11-2006</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 31-10-2011" aria-label="Voir la phase Prolongation 2 du 31-10-2011" tab-index="-1">Voir la phase Prolongation 2 du 31-10-2011</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Déclaration d'arrêt définitif des travaux du 2012-07-23 lié à la phase Prolongation 2" aria-label="Voir l'événement Déclaration d'arrêt définitif des travaux du 2012-07-23 lié à la phase Prolongation 2" tab-index="-1">Voir l'événement Déclaration d'arrêt définitif des travaux du 23-07-2012 lié à la phase Prolongation 2</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Demande de titre d'exploitation du 31-10-2016" aria-label="Voir la phase Demande de titre d'exploitation du 31-10-2016" tab-index="-1">Voir la phase Demande de titre d'exploitation du 31-10-2016</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -55,32 +70,32 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"><a href="/mocked-href" title="Déclaration d'arrêt définitif des travaux" aria-label="Déclaration d'arrêt définitif des travaux" aria-describedby="timeline-event-m-pr-bon-espoir-2001-dam01"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Déclaration d'arrêt définitif des travaux" aria-label="Déclaration d'arrêt définitif des travaux" aria-describedby="timeline-event-m-pr-bon-espoir-2001-dam01"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Demande de titre d'exploitation" class="_phase_b2e482" aria-label="Demande de titre d'exploitation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Demande de titre d'exploitation" class="_phase_b2e482" aria-label="Demande de titre d'exploitation" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1">Prolongation 1</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1">Prolongation 1</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Demande de titre d'exploitation" class="fr-link" aria-label="Demande de titre d'exploitation">Demande de titre d'exploitation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Demande de titre d'exploitation" class="fr-link" aria-label="Demande de titre d'exploitation">Demande de titre d'exploitation</a></div>
</div>
</div>
</div>
@@ -158,8 +173,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -168,7 +253,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -290,7 +375,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -348,7 +433,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000774145" title="Légifrance - Lien externe">JORFTEXT000000774145</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000774145" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000000774145</a></p>
</div>
</div>
<div>
@@ -374,8 +459,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -384,7 +539,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -503,7 +658,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html b/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html
index d7c98859f..1656d7a95 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Permis exclusif de recherches</h3>
+ <p class="fr-h3 fr-m-0">Permis exclusif de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEAL : 21/2001</div>
@@ -33,7 +33,22 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-11-2001" aria-label="Voir la phase Octroi du 01-11-2001" tab-index="-1">Voir la phase Octroi du 01-11-2001</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 1 du 01-11-2006" aria-label="Voir la phase Prolongation 1 du 01-11-2006" tab-index="-1">Voir la phase Prolongation 1 du 01-11-2006</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 31-10-2011" aria-label="Voir la phase Prolongation 2 du 31-10-2011" aria-current="page" tab-index="-1">Voir la phase Prolongation 2 du 31-10-2011</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Déclaration d'arrêt définitif des travaux du 2012-07-23 lié à la phase Prolongation 2" aria-label="Voir l'événement Déclaration d'arrêt définitif des travaux du 2012-07-23 lié à la phase Prolongation 2" tab-index="-1">Voir l'événement Déclaration d'arrêt définitif des travaux du 23-07-2012 lié à la phase Prolongation 2</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Demande de titre d'exploitation du 31-10-2016" aria-label="Voir la phase Demande de titre d'exploitation du 31-10-2016" tab-index="-1">Voir la phase Demande de titre d'exploitation du 31-10-2016</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -55,32 +70,32 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" aria-current="page" style="min-width: 200px;"><a href="/mocked-href" title="Déclaration d'arrêt définitif des travaux" aria-label="Déclaration d'arrêt définitif des travaux" aria-describedby="timeline-event-m-pr-bon-espoir-2001-dam01"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" aria-current="page" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Déclaration d'arrêt définitif des travaux" aria-label="Déclaration d'arrêt définitif des travaux" aria-describedby="timeline-event-m-pr-bon-espoir-2001-dam01"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Demande de titre d'exploitation" class="_phase_b2e482" aria-label="Demande de titre d'exploitation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Demande de titre d'exploitation" class="_phase_b2e482" aria-label="Demande de titre d'exploitation" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1">Prolongation 1</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1">Prolongation 1</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2" aria-current="page">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2" aria-current="page">Prolongation 2</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Demande de titre d'exploitation" class="fr-link" aria-label="Demande de titre d'exploitation">Demande de titre d'exploitation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Demande de titre d'exploitation" class="fr-link" aria-label="Demande de titre d'exploitation">Demande de titre d'exploitation</a></div>
</div>
</div>
</div>
@@ -165,8 +180,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -175,7 +260,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -273,7 +358,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -335,7 +420,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000031053068" title="Légifrance - Lien externe">JORFTEXT000031053068</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000031053068" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000031053068</a></p>
</div>
</div>
<div>
@@ -361,7 +446,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -435,7 +520,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;">Enregistrement de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Enregistrement de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -461,7 +546,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/titre.stories_snapshots_BonEspoirTravaux.html b/packages/ui/src/components/titre.stories_snapshots_BonEspoirTravaux.html
index fb054b06f..49ba2160c 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BonEspoirTravaux.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BonEspoirTravaux.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Permis exclusif de recherches</h3>
+ <p class="fr-h3 fr-m-0">Permis exclusif de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEAL : 21/2001</div>
@@ -33,7 +33,22 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-11-2001" aria-label="Voir la phase Octroi du 01-11-2001" tab-index="-1">Voir la phase Octroi du 01-11-2001</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 1 du 01-11-2006" aria-label="Voir la phase Prolongation 1 du 01-11-2006" tab-index="-1">Voir la phase Prolongation 1 du 01-11-2006</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 31-10-2011" aria-label="Voir la phase Prolongation 2 du 31-10-2011" tab-index="-1">Voir la phase Prolongation 2 du 31-10-2011</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Déclaration d'arrêt définitif des travaux du 2012-07-23 lié à la phase Prolongation 2" aria-label="Voir l'événement Déclaration d'arrêt définitif des travaux du 2012-07-23 lié à la phase Prolongation 2" aria-current="page" tab-index="-1">Voir l'événement Déclaration d'arrêt définitif des travaux du 23-07-2012 lié à la phase Prolongation 2</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Demande de titre d'exploitation du 31-10-2016" aria-label="Voir la phase Demande de titre d'exploitation du 31-10-2016" tab-index="-1">Voir la phase Demande de titre d'exploitation du 31-10-2016</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -55,32 +70,32 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="_phase_b2e482" aria-label="Prolongation 1" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"><a href="/mocked-href" title="Déclaration d'arrêt définitif des travaux" aria-label="Déclaration d'arrêt définitif des travaux" aria-describedby="timeline-event-m-pr-bon-espoir-2001-dam01" aria-current="page"><svg class="_travaux-icone_a26566 _selected_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Déclaration d'arrêt définitif des travaux" aria-label="Déclaration d'arrêt définitif des travaux" aria-describedby="timeline-event-m-pr-bon-espoir-2001-dam01" aria-current="page"><svg class="_travaux-icone_a26566 _selected_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Demande de titre d'exploitation" class="_phase_b2e482" aria-label="Demande de titre d'exploitation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Demande de titre d'exploitation" class="_phase_b2e482" aria-label="Demande de titre d'exploitation" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1">Prolongation 1</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="fr-link" aria-label="Prolongation 1">Prolongation 1</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Demande de titre d'exploitation" class="fr-link" aria-label="Demande de titre d'exploitation">Demande de titre d'exploitation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Demande de titre d'exploitation" class="fr-link" aria-label="Demande de titre d'exploitation">Demande de titre d'exploitation</a></div>
</div>
</div>
</div>
@@ -133,7 +148,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;">Arrêté de second donner acte</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Arrêté de second donner acte</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -181,7 +196,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;">Arrêté préfectoral de premier donner acte (DADT)</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Arrêté préfectoral de premier donner acte (DADT)</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -235,7 +250,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éclaration d'arrêt définitif de travaux (DADT)</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Déclaration d'arrêt définitif de travaux (DADT)</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -261,7 +276,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;">Recevabilité de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Recevabilité de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html b/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html
index 135234665..01453b4a0 100644
--- a/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html
+++ b/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--primary fr-btn--md fr-ml-2w" title="S’abonner" aria-label="S’abonner" type="button" style="margin-right: 0px;">S’abonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Concession</h3>
+ <p class="fr-h3 fr-m-0">Concession</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEB : 2013-0224-MI</div>
@@ -34,7 +34,13 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-09-1988" aria-label="Voir la phase Octroi du 01-09-1988" tab-index="-1">Voir la phase Octroi du 01-09-1988</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 06-06-2000" aria-label="Voir la phase Mutation du 06-06-2000" aria-current="page" tab-index="-1">Voir la phase Mutation du 06-06-2000</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 405px;" class="_datesContainer_b2e482">
@@ -44,15 +50,15 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" aria-current="page" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation" aria-current="page">Mutation (06-06-2000)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation" aria-current="page">Mutation (06-06-2000)</a></div>
</div>
</div>
</div>
@@ -126,8 +132,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_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_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -136,7 +212,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -205,7 +281,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -239,7 +315,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000765254" title="Légifrance - Lien externe">JORFTEXT000000765254</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000765254" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000000765254</a></p>
</div>
</div>
<div>
@@ -265,7 +341,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html
index e90e26aaa..547cb0895 100644
--- a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html
@@ -10,7 +10,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Concession</h3>
+ <p class="fr-h3 fr-m-0">Concession</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEB : 2013-0224-MI</div>
@@ -35,7 +35,13 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-09-1988" aria-label="Voir la phase Octroi du 01-09-1988" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-09-1988</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 06-06-2000" aria-label="Voir la phase Mutation du 06-06-2000" tab-index="-1">Voir la phase Mutation du 06-06-2000</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 405px;" class="_datesContainer_b2e482">
@@ -45,15 +51,15 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (06-06-2000)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (06-06-2000)</a></div>
</div>
</div>
</div>
@@ -126,8 +132,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_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_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -136,7 +212,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -205,7 +281,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -251,7 +327,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000681488" title="Légifrance - Lien externe">JORFTEXT000000681488</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000681488" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000000681488</a></p>
</div>
</div>
<div>
@@ -277,8 +353,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_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_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -287,7 +433,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -354,7 +500,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -411,8 +557,78 @@
<div id="tabpanel-points-967-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-967" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_25_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_25" type="text" name="typeahead_25" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_25" type="text" title="" name="typeahead_25" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_25-control" aria-activedescendant="typeahead_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_25-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -421,7 +637,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html
index c186c4384..f1a21e4e3 100644
--- a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html
+++ b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Concession</h3>
+ <p class="fr-h3 fr-m-0">Concession</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEB : 2013-0224-MI</div>
@@ -35,7 +35,13 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-09-1988" aria-label="Voir la phase Octroi du 01-09-1988" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-09-1988</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 06-06-2000" aria-label="Voir la phase Mutation du 06-06-2000" tab-index="-1">Voir la phase Mutation du 06-06-2000</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 405px;" class="_datesContainer_b2e482">
@@ -45,15 +51,15 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (06-06-2000)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (06-06-2000)</a></div>
</div>
</div>
</div>
@@ -126,8 +132,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_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_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -136,7 +212,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -206,7 +282,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -250,7 +326,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000681488" title="Légifrance - Lien externe">JORFTEXT000000681488</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000000681488" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000000681488</a></p>
</div>
</div>
<div>
@@ -276,8 +352,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_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_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -286,7 +432,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -353,7 +499,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -408,8 +554,78 @@
<div id="tabpanel-points-967-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-967" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_25_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_25" type="text" name="typeahead_25" disabled="" class="fr-input" placeholder="" autocomplete="off" value="NTF (Paris) / Lambert zone I - (27571)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_25" type="text" title="" name="typeahead_25" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_25-control" aria-activedescendant="typeahead_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_25-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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_25-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -418,7 +634,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html b/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html
index 1b2ebbe92..fbe046c10 100644
--- a/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">PTMG : 2022-032</div>
@@ -33,7 +33,12 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 19-09-2023" aria-label="Voir la phase Octroi du 19-09-2023" aria-current="page" tab-index="-1">Voir la phase Octroi du 19-09-2023</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -43,14 +48,14 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
</div>
</div>
@@ -133,8 +138,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 / UTM zone 22N - (2972)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -143,7 +218,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -254,7 +329,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;">Signature de l'autorisation de recherche minière</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Signature de l'autorisation de recherche minière</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -282,7 +357,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;">Avis de la commission des autorisations de recherches minières (CARM)</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Avis de la commission des autorisations de recherches minières (CARM)</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -310,7 +385,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;">Saisine de la commission des autorisations de recherches minières (CARM)</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Saisine de la commission des autorisations de recherches minières (CARM)</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -338,7 +413,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;">Récépissé de déclaration loi sur l'eau</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Récépissé de déclaration loi sur l'eau</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -379,7 +454,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;">Recevabilité de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Recevabilité de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -407,7 +482,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;">Enregistrement de la demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Enregistrement de la demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -435,7 +510,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -507,8 +582,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="RGFG95 / UTM zone 22N - (2972)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -517,7 +662,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -626,7 +771,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écision de la mission autorité environnementale (examen au cas par cas du projet)</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de la mission autorité environnementale (examen au cas par cas du projet)</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
diff --git a/packages/ui/src/components/titre.stories_snapshots_Empty.html b/packages/ui/src/components/titre.stories_snapshots_Empty.html
index 06a6a2f6f..d8da15f47 100644
--- a/packages/ui/src/components/titre.stories_snapshots_Empty.html
+++ b/packages/ui/src/components/titre.stories_snapshots_Empty.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<!---->
diff --git a/packages/ui/src/components/titre.stories_snapshots_Full.html b/packages/ui/src/components/titre.stories_snapshots_Full.html
index f71789a20..7f8ed2e15 100644
--- a/packages/ui/src/components/titre.stories_snapshots_Full.html
+++ b/packages/ui/src/components/titre.stories_snapshots_Full.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">Ifremer : Duo</div>
@@ -94,8 +94,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -104,7 +174,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -177,7 +247,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -225,8 +295,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -235,7 +375,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html b/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html
index cf3085f0a..878dbc95d 100644
--- a/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html
+++ b/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html
@@ -9,7 +9,7 @@
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Concession</h3>
+ <p class="fr-h3 fr-m-0">Concession</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">DEB : 2013-0275-MI</div>
@@ -33,7 +33,22 @@
<!---->
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 24-01-1968" aria-label="Voir la phase Octroi du 24-01-1968" tab-index="-1">Voir la phase Octroi du 24-01-1968</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 19-11-1970" aria-label="Voir la phase Mutation du 19-11-1970" tab-index="-1">Voir la phase Mutation du 19-11-1970</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 27-11-1975" aria-label="Voir la phase Mutation du 27-11-1975" tab-index="-1">Voir la phase Mutation du 27-11-1975</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Extension de périmètre du 13-09-1981" aria-label="Voir la phase Extension de périmètre du 13-09-1981" tab-index="-1">Voir la phase Extension de périmètre du 13-09-1981</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 06-10-2000" aria-label="Voir la phase Mutation du 06-10-2000" tab-index="-1">Voir la phase Mutation du 06-10-2000</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 08-01-2003" aria-label="Voir la phase Mutation du 08-01-2003" tab-index="-1">Voir la phase Mutation du 08-01-2003</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 28-02-2004" aria-label="Voir la phase Mutation du 28-02-2004" tab-index="-1">Voir la phase Mutation du 28-02-2004</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation du 01-03-2024" aria-label="Voir la phase Prolongation du 01-03-2024" tab-index="-1">Voir la phase Prolongation du 01-03-2024</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Extension de périmètre du 01-03-2024" aria-label="Voir la phase Extension de périmètre du 01-03-2024" aria-current="page" tab-index="-1">Voir la phase Extension de périmètre du 01-03-2024</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 1415px;" class="_datesContainer_b2e482">
@@ -47,26 +62,26 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a href="/mocked-href" title="Extension de périmètre" class="_phase_b2e482" aria-label="Extension de périmètre" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Extension de périmètre" class="_phase_b2e482" aria-label="Extension de périmètre" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"></a><a href="/mocked-href" title="Extension de périmètre" class="_phase_b2e482" aria-label="Extension de périmètre" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Extension de périmètre" class="_phase_b2e482" aria-label="Extension de périmètre" aria-current="page" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (19-11-1970)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (27-11-1975)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Extension de périmètre" class="fr-link" aria-label="Extension de périmètre">Extension de périmètre (13-09-1981)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (06-10-2000)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (08-01-2003)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (28-02-2004)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (19-11-1970)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (27-11-1975)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Extension de périmètre" class="fr-link" aria-label="Extension de périmètre">Extension de périmètre (13-09-1981)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (06-10-2000)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (08-01-2003)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (28-02-2004)</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Extension de périmètre" class="fr-link" aria-label="Extension de périmètre" aria-current="page">Extension de périmètre (01-03-2024)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Extension de périmètre" class="fr-link" aria-label="Extension de périmètre" aria-current="page">Extension de périmètre (01-03-2024)</a></div>
</div>
</div>
</div>
@@ -139,8 +154,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -149,7 +234,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -303,7 +388,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;">Publication de décision au JORF</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Publication de décision au JORF</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -328,7 +413,7 @@
<div>
<div class="fr-text--sm fr-mb-0">Numéro JORF</div>
<div class="fr-text--md fr-mb-0" style="font-weight: 500;">
- <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000049219226" title="Légifrance - Lien externe">JORFTEXT000049219226</a></p>
+ <p><a target="_blank" rel="noopener noreferrer" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000049219226" title="Numéro JORF Légifrance - Lien externe">JORFTEXT000049219226</a></p>
</div>
</div>
<div>
@@ -354,7 +439,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écision de l'autorité administrative</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Décision de l'autorité administrative</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -407,8 +492,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -417,7 +572,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html
index f71789a20..7f8ed2e15 100644
--- a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html
+++ b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">Ifremer : Duo</div>
@@ -94,8 +94,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -104,7 +174,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -177,7 +247,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -225,8 +295,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -235,7 +375,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html
index b51ebcf41..a60416ac5 100644
--- a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html
+++ b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<div class="fr-mt-2w">Références<div style="font-weight: 500;">Ifremer : Duo</div>
@@ -95,8 +95,78 @@
<div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_670_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_670" type="text" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_670" type="text" title="" name="typeahead_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_670-control" aria-activedescendant="typeahead_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_670-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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_670-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -105,7 +175,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
@@ -178,7 +248,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;">Demande</div>
+ <h4 class="fr-text--lg fr-mb-0" style="font-weight: 500;">Demande</h4>
<!---->
</div>
<div style="display: flex; gap: 0.25rem;">
@@ -226,8 +296,78 @@
<div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
<div style="display: flex; flex-direction: column;">
<div id="typeahead_878_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="typeahead_878" type="text" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" value="WGS84 - (4326)"></div>
- <!---->
+ <div class="flex"><input id="typeahead_878" type="text" title="" name="typeahead_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_878-control" aria-activedescendant="typeahead_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_878-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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_878-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>
</div>
<div style="display: flex; flex-direction: column;">
<div class="fr-mb-1w">
@@ -236,7 +376,7 @@
<div class="fr-table__container">
<div class="fr-table__content">
<table style="display: table; width: 100%;">
- <caption></caption>
+ <caption>Points</caption>
<thead>
<tr>
<th scope="col">Nom du point</th>
diff --git a/packages/ui/src/components/titre.stories_snapshots_WithDoublon.html b/packages/ui/src/components/titre.stories_snapshots_WithDoublon.html
index f9c3048f4..f51d4e3c7 100644
--- a/packages/ui/src/components/titre.stories_snapshots_WithDoublon.html
+++ b/packages/ui/src/components/titre.stories_snapshots_WithDoublon.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation de recherches</h3>
+ <p class="fr-h3 fr-m-0">Autorisation de recherches</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<!---->
diff --git a/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAmont.html b/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAmont.html
index 09dd8af9a..6679f66ae 100644
--- a/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAmont.html
+++ b/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAmont.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation d'exploitation</h3>
+ <p class="fr-h3 fr-m-0">Autorisation d'exploitation</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<!---->
diff --git a/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAval.html b/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAval.html
index 2e61c7f12..d748d1ed9 100644
--- a/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAval.html
+++ b/packages/ui/src/components/titre.stories_snapshots_WithLinkableTitreAval.html
@@ -10,7 +10,7 @@
</button><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Se désabonner" aria-label="Se désabonner" type="button" style="margin-right: 0px;">Se désabonner</button></div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">Autorisation d'exploitation</h3>
+ <p class="fr-h3 fr-m-0">Autorisation d'exploitation</p>
<p class="fr-tag fr-tag--md mono fr-ml-2w" title="Domaine minéraux et métaux" aria-label="Domaine minéraux et métaux" style="min-width: 2rem; color: black;">M</p>
</div>
<!---->
diff --git a/packages/ui/src/components/titre.tsx b/packages/ui/src/components/titre.tsx
index 59f195b2f..93f2cea3d 100644
--- a/packages/ui/src/components/titre.tsx
+++ b/packages/ui/src/components/titre.tsx
@@ -389,7 +389,7 @@ export const PureTitre = defineComponent<Props>(props => {
</div>
</div>
<div class="fr-grid-row fr-grid-row--middle fr-mt-1w">
- <h3 class="fr-m-0">{capitalize(TitresTypesTypes[TitresTypes[titre.titre_type_id].typeId].nom)}</h3>
+ <p class="fr-h3 fr-m-0">{capitalize(TitresTypesTypes[TitresTypes[titre.titre_type_id].typeId].nom)}</p>
<Domaine class="fr-ml-2w" domaineId={TitresTypes[titre.titre_type_id].domaineId} />
</div>
{titre.references.length > 0 ? (
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 14de2cf93..e53b2733a 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,7 +10,7 @@
<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="select_271">Type de la démarche
<!---->
</label><select class="fr-select" id="select_271" aria-label="Type de la démarche" name="select_271">
<option value="oct">octroi</option>
@@ -19,7 +19,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="text" value="">
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 7462287fa..80c0a5331 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,7 +10,7 @@
<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="select_271">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">
<option value="amo">amodiation</option>
@@ -24,7 +24,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="text" value="">
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 abca477f4..864da9146 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,7 +10,7 @@
<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="select_271">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">
<option selected="" value="amo">amodiation</option>
@@ -24,7 +24,7 @@
<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
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description (optionnel)
<!---->
<!---->
</label><input class="fr-input" name="input_670" id="input_670" type="text" value="description">
diff --git a/packages/ui/src/components/titre/demarche-edit-popup.tsx b/packages/ui/src/components/titre/demarche-edit-popup.tsx
index a3b2c6fbc..d205d893f 100644
--- a/packages/ui/src/components/titre/demarche-edit-popup.tsx
+++ b/packages/ui/src/components/titre/demarche-edit-popup.tsx
@@ -55,7 +55,7 @@ export const DemarcheEditPopup = defineComponent<Props>(props => {
{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} />
) : null}
- <DsfrInput legend={{ main: 'Description' }} type={{ type: 'text' }} valueChanged={descriptionChange} initialValue={description.value} />
+ <DsfrInput 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/edit-popup.stories_snapshots_DefaultNoReference.html b/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html
index de5a34bfb..1bafa2e15 100644
--- a/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html
+++ b/packages/ui/src/components/titre/edit-popup.stories_snapshots_DefaultNoReference.html
@@ -10,7 +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 du titre</h1>
<div class="fr-container">
<form>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom *
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom
+ <!---->
+ <!---->
<!---->
</label><input class="fr-input" name="titre_nom" id="titre_nom" required="" type="text" value="Nom du titre">
<!---->
diff --git a/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html b/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html
index 4747b41bf..d54278d10 100644
--- a/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html
+++ b/packages/ui/src/components/titre/edit-popup.stories_snapshots_OneReference.html
@@ -10,7 +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 du titre</h1>
<div class="fr-container">
<form>
- <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom *
+ <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom
+ <!---->
+ <!---->
<!---->
</label><input class="fr-input" name="titre_nom" id="titre_nom" required="" type="text" value="Nom du titre">
<!---->
@@ -33,7 +35,7 @@
</select>
</div>
<div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
- <!----><input class="fr-input" name="input_670" id="input_670" type="text" value="Valeur">
+ <!----><input class="fr-input" name="input_670" id="input_670" required="" type="text" value="Valeur">
<!---->
</div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 1" aria-label="Supprimer la référence 1" type="button">
<!---->
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 da0b8eb76..fc2fe6d9d 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
@@ -2,13 +2,13 @@
<div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> > </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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2024-10-16">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
<!---->
</div><span>Pour la demande Pivot du titulaire Titulaire 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
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Décision (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -24,7 +24,7 @@
</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 ?
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Quel périmètre acceptez-vous ? (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
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 a65638cef..45e8ae7c7 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
@@ -2,9 +2,9 @@
<div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> > </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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2024-10-16">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
<!---->
</div>
<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
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 a3881a910..983dde911 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
@@ -2,13 +2,13 @@
<div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> > </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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2024-10-16">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
<!---->
</div><span>Pour la demande Pivot du titulaire Titulaire 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
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Décision (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -24,7 +24,7 @@
</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 ?
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Quel périmètre acceptez-vous ? (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
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 a3881a910..983dde911 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
@@ -2,13 +2,13 @@
<div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> > </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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2024-10-16">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
<!---->
</div><span>Pour la demande Pivot du titulaire Titulaire 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
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Décision (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
@@ -24,7 +24,7 @@
</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 ?
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Quel périmètre acceptez-vous ? (optionnel)
<!---->
</legend>
<div class="fr-fieldset__element">
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 568b0d5e6..a38fcfc4e 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
@@ -2,14 +2,14 @@
<div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> > </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
+ <!----><span class="fr-hint-text">au format jj/mm/yyyy</span>
<!---->
- <!---->
- </label><input class="fr-input" name="input_271" id="input_271" type="date" value="2024-10-16">
+ </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
<!---->
</div>
<div class=" undefined" style="display: flex; justify-content: center;">
<!---->
- <div class="fr-alert fr-alert--error fr-alert--sm">
+ <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
<p>Message d'erreur</p>
</div>
<!---->
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 4848e0c09..fdafd7eab 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,7 @@ export const ResultatMiseEnConcurrence = defineComponent<Props>(props => {
<h1 class="fr-mt-4w">{capitalize(EtapesTypes[ETAPES_TYPES.resultatMiseEnConcurrence].nom)}</h1>
- <DsfrInput class="fr-pb-2w" legend={{ main: 'Date' }} type={{ type: 'date' }} initialValue={date.value} valueChanged={(newDate: CaminoDate | null) => setDate(newDate)} />
+ <DsfrInput 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={() => (
diff --git a/packages/ui/src/components/titre/titre-timeline.module.css b/packages/ui/src/components/titre/titre-timeline.module.css
index 056ac8fed..d296ca788 100644
--- a/packages/ui/src/components/titre/titre-timeline.module.css
+++ b/packages/ui/src/components/titre/titre-timeline.module.css
@@ -1,3 +1,24 @@
+.hidden {
+ position: absolute;
+ list-style: none;
+ height: 1px;
+ overflow: hidden;
+ word-wrap: normal !important;
+ clip-path: inset(50%);
+ clip: rect(1px, 1px, 1px, 1px);
+ margin: -1px;
+}
+
+.hidden:has(a:focus) {
+ position: relative;
+ height: auto;
+ width: auto;
+ overflow: initial;
+ margin: 0;
+ clip: unset;
+ clip-path: unset;
+}
+
.datesContainer {
display: flex;
flex-direction: row;
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_BigExample.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_BigExample.html
index 9ab6284f3..7c81fcc78 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_BigExample.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_BigExample.html
@@ -1,6 +1,25 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2020" aria-label="Voir la phase Octroi du 01-01-2020" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-01-2020</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation 2 du 2020-01-02 lié à la phase Octroi" aria-label="Voir l'événement Prolongation 2 du 2020-01-02 lié à la phase Octroi" tab-index="-1">Voir l'événement Prolongation 2 du 02-01-2020 lié à la phase Octroi</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Autorisation d'ouverture de travaux du 2020-01-03 lié à la phase Octroi" aria-label="Voir l'événement Autorisation d'ouverture de travaux du 2020-01-03 lié à la phase Octroi" tab-index="-1">Voir l'événement Autorisation d'ouverture de travaux du 03-01-2020 lié à la phase Octroi</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 01-01-2021" aria-label="Voir la phase Mutation du 01-01-2021" tab-index="-1">Voir la phase Mutation du 01-01-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation du 2021-02-01 lié à la phase Mutation" aria-label="Voir l'événement Prolongation du 2021-02-01 lié à la phase Mutation" tab-index="-1">Voir l'événement Prolongation du 01-02-2021 lié à la phase Mutation</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 01-06-2021" aria-label="Voir la phase Mutation du 01-06-2021" tab-index="-1">Voir la phase Mutation du 01-06-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Autorisation d'ouverture de travaux du 2021-06-02 lié à la phase Mutation" aria-label="Voir l'événement Autorisation d'ouverture de travaux du 2021-06-02 lié à la phase Mutation" tab-index="-1">Voir l'événement Autorisation d'ouverture de travaux du 02-06-2021 lié à la phase Mutation</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation du 01-01-2030" aria-label="Voir la phase Prolongation du 01-01-2030" tab-index="-1">Voir la phase Prolongation du 01-01-2030</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation 1 du 2040-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Prolongation 1 du 2040-01-01 lié à la phase Prolongation" tab-index="-1">Voir l'événement Prolongation 1 du 01-01-2040 lié à la phase Prolongation</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 01-06-2043" aria-label="Voir la phase Mutation du 01-06-2043" tab-index="-1">Voir la phase Mutation du 01-06-2043</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 01-01-2050" aria-label="Voir la phase Prolongation 2 du 01-01-2050" tab-index="-1">Voir la phase Prolongation 2 du 01-01-2050</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 607px;" class="_datesContainer_b2e482">
@@ -18,39 +37,39 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="_event_b2e482" aria-label="Prolongation 2" aria-describedby="timeline-event-slug-demarche8">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_event_b2e482" aria-label="Prolongation 2" aria-describedby="timeline-event-slug-demarche8">
<!---->
- </a><a href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux2"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ </a><a tabindex="-1" href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux2"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
- </svg></a></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="_event_b2e482" aria-label="Prolongation" aria-describedby="timeline-event-slug-demarche9">
+ </svg></a></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_event_b2e482" aria-label="Prolongation" aria-describedby="timeline-event-slug-demarche9">
<!---->
- </a></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"><a href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ </a></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a href="/mocked-href" title="Prolongation 1" class="_event_b2e482" aria-label="Prolongation 1" aria-describedby="timeline-event-slug-demarche10">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="_event_b2e482" aria-label="Prolongation 1" aria-describedby="timeline-event-slug-demarche10">
<!---->
- </a></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
+ </a></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-01-2021)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-06-2021)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-01-2021)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-06-2021)</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-06-2043)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-06-2043)</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_Default.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_Default.html
index ec631ffdd..db6fbfe68 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_Default.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_Default.html
@@ -1,6 +1,19 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2019" aria-label="Voir la phase Octroi du 01-01-2019" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-01-2019</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation du 01-01-2021" aria-label="Voir la phase Prolongation du 01-01-2021" tab-index="-1">Voir la phase Prolongation du 01-01-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Mutation du 2022-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Mutation du 2022-01-01 lié à la phase Prolongation" tab-index="-1">Voir l'événement Mutation du 01-01-2022 lié à la phase Prolongation</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Autorisation d'ouverture de travaux du 2022-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Autorisation d'ouverture de travaux du 2022-01-01 lié à la phase Prolongation" tab-index="-1">Voir l'événement Autorisation d'ouverture de travaux du 01-01-2022 lié à la phase Prolongation</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 01-01-2024" aria-label="Voir la phase Prolongation 2 du 01-01-2024" tab-index="-1">Voir la phase Prolongation 2 du 01-01-2024</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -18,29 +31,29 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a href="/mocked-href" title="Mutation" class="_event_b2e482" aria-label="Mutation" aria-describedby="timeline-event-slug-demarche4">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="_event_b2e482" aria-label="Mutation" aria-describedby="timeline-event-slug-demarche4">
<!---->
- </a><a href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ </a><a tabindex="-1" href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithEventSelected.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithEventSelected.html
index ac2278858..0ec5cfa03 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithEventSelected.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithEventSelected.html
@@ -1,6 +1,19 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2019" aria-label="Voir la phase Octroi du 01-01-2019" tab-index="-1">Voir la phase Octroi du 01-01-2019</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation du 01-01-2021" aria-label="Voir la phase Prolongation du 01-01-2021" tab-index="-1">Voir la phase Prolongation du 01-01-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Mutation du 2022-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Mutation du 2022-01-01 lié à la phase Prolongation" aria-current="page" tab-index="-1">Voir l'événement Mutation du 01-01-2022 lié à la phase Prolongation</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Autorisation d'ouverture de travaux du 2022-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Autorisation d'ouverture de travaux du 2022-01-01 lié à la phase Prolongation" tab-index="-1">Voir l'événement Autorisation d'ouverture de travaux du 01-01-2022 lié à la phase Prolongation</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 01-01-2024" aria-label="Voir la phase Prolongation 2 du 01-01-2024" tab-index="-1">Voir la phase Prolongation 2 du 01-01-2024</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -18,29 +31,29 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a href="/mocked-href" title="Mutation" class="_event_b2e482" aria-label="Mutation" aria-describedby="timeline-event-slug-demarche4" aria-current="page">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="_event_b2e482" aria-label="Mutation" aria-describedby="timeline-event-slug-demarche4" aria-current="page">
<!---->
- </a><a href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ </a><a tabindex="-1" href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1"><svg class="_travaux-icone_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithTravauxSelected.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithTravauxSelected.html
index a12c82482..152bae5ce 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithTravauxSelected.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_DefaultWithTravauxSelected.html
@@ -1,6 +1,19 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2019" aria-label="Voir la phase Octroi du 01-01-2019" tab-index="-1">Voir la phase Octroi du 01-01-2019</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation du 01-01-2021" aria-label="Voir la phase Prolongation du 01-01-2021" tab-index="-1">Voir la phase Prolongation du 01-01-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Mutation du 2022-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Mutation du 2022-01-01 lié à la phase Prolongation" tab-index="-1">Voir l'événement Mutation du 01-01-2022 lié à la phase Prolongation</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Autorisation d'ouverture de travaux du 2022-01-01 lié à la phase Prolongation" aria-label="Voir l'événement Autorisation d'ouverture de travaux du 2022-01-01 lié à la phase Prolongation" aria-current="page" tab-index="-1">Voir l'événement Autorisation d'ouverture de travaux du 01-01-2022 lié à la phase Prolongation</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Prolongation 2 du 01-01-2024" aria-label="Voir la phase Prolongation 2 du 01-01-2024" tab-index="-1">Voir la phase Prolongation 2 du 01-01-2024</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -18,29 +31,29 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a href="/mocked-href" title="Mutation" class="_event_b2e482" aria-label="Mutation" aria-describedby="timeline-event-slug-demarche4">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_phase_b2e482" aria-label="Prolongation" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="_event_b2e482" aria-label="Mutation" aria-describedby="timeline-event-slug-demarche4">
<!---->
- </a><a href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1" aria-current="page"><svg class="_travaux-icone_a26566 _selected_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ </a><a tabindex="-1" href="/mocked-href" title="Autorisation d'ouverture de travaux" aria-label="Autorisation d'ouverture de travaux" aria-describedby="timeline-event-slug-travaux1" aria-current="page"><svg class="_travaux-icone_a26566 _selected_a26566" width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" fill="none"></path>
<path d="M0.647766 17.0224L2.06999 17.0223L6.7467 0.275378C6.79229 0.110124 7.12833 0 7.29173 0H9.62077V0.00185531C9.78417 0.00185531 10.048 0.110124 10.0938 0.275378L14.7759 17.0223H16.2624C16.6195 17.0223 16.9103 17.2312 16.9103 17.4858V18.5364C16.9103 18.791 16.6177 19 16.2624 19L0.647905 18.9999C0.290774 18.9999 0 18.7909 0 18.5363V17.4857C0 17.2293 0.292467 17.0224 0.647766 17.0224ZM6.96092 2.97703H9.9531L9.33753 0.746577H7.57446L6.96092 2.97703ZM11.0113 6.82042H5.90076L5.0896 9.76317H11.8261L11.0113 6.82042ZM12.8844 13.6065H4.02757L3.08523 17.0224H13.8267L12.8844 13.6065Z" stroke="black"></path>
</svg></a></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_phase_b2e482" aria-label="Prolongation 2" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="fr-link" aria-label="Prolongation">Prolongation</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="fr-link" aria-label="Prolongation 2">Prolongation 2</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_MultipleUnorderedDemarchesWithoutPhase.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_MultipleUnorderedDemarchesWithoutPhase.html
index d251a402f..d800809d1 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_MultipleUnorderedDemarchesWithoutPhase.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_MultipleUnorderedDemarchesWithoutPhase.html
@@ -1,6 +1,14 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2019" aria-label="Voir la phase Octroi du 01-01-2019" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-01-2019</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation du 2019-02-01 lié à la phase Octroi" aria-label="Voir l'événement Prolongation du 2019-02-01 lié à la phase Octroi" tab-index="-1">Voir l'événement Prolongation du 01-02-2019 lié à la phase Octroi</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation 1 du 2020-01-01 lié à la phase Octroi" aria-label="Voir l'événement Prolongation 1 du 2020-01-01 lié à la phase Octroi" tab-index="-1">Voir l'événement Prolongation 1 du 01-01-2020 lié à la phase Octroi</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir l'événement Prolongation 2 du 2020-01-02 lié à la phase Octroi" aria-label="Voir l'événement Prolongation 2 du 2020-01-02 lié à la phase Octroi" tab-index="-1">Voir l'événement Prolongation 2 du 02-01-2020 lié à la phase Octroi</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -10,11 +18,11 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"><a href="/mocked-href" title="Prolongation" class="_event_b2e482" aria-label="Prolongation" aria-describedby="timeline-event-slug-demarche5">
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Prolongation" class="_event_b2e482" aria-label="Prolongation" aria-describedby="timeline-event-slug-demarche5">
<!---->
- </a><a href="/mocked-href" title="Prolongation 1" class="_event_b2e482" aria-label="Prolongation 1" aria-describedby="timeline-event-slug-demarche6">
+ </a><a tabindex="-1" href="/mocked-href" title="Prolongation 1" class="_event_b2e482" aria-label="Prolongation 1" aria-describedby="timeline-event-slug-demarche6">
<!---->
- </a><a href="/mocked-href" title="Prolongation 2" class="_event_b2e482" aria-label="Prolongation 2" aria-describedby="timeline-event-slug-demarche6">
+ </a><a tabindex="-1" href="/mocked-href" title="Prolongation 2" class="_event_b2e482" aria-label="Prolongation 2" aria-describedby="timeline-event-slug-demarche6">
<!---->
</a></a></div>
<!---->
@@ -23,7 +31,7 @@
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_OnePhaseMultipleAlterations.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_OnePhaseMultipleAlterations.html
index bf6ee8965..927dd6da9 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_OnePhaseMultipleAlterations.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_OnePhaseMultipleAlterations.html
@@ -1,6 +1,13 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2020" aria-label="Voir la phase Octroi du 01-01-2020" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-01-2020</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 01-01-2021" aria-label="Voir la phase Mutation du 01-01-2021" tab-index="-1">Voir la phase Mutation du 01-01-2021</a></li>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Mutation du 01-06-2021" aria-label="Voir la phase Mutation du 01-06-2021" tab-index="-1">Voir la phase Mutation du 01-06-2021</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 607px;" class="_datesContainer_b2e482">
@@ -10,16 +17,16 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a><a tabindex="-1" href="/mocked-href" title="Mutation" class="_phase_b2e482" aria-label="Mutation" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-01-2021)</a></div>
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-06-2021)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-01-2021)</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Mutation" class="fr-link" aria-label="Mutation">Mutation (01-06-2021)</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_SimpleOnePhase.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_SimpleOnePhase.html
index bee045714..8cfd8239b 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_SimpleOnePhase.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_SimpleOnePhase.html
@@ -1,6 +1,11 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2019" aria-label="Voir la phase Octroi du 01-01-2019" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-01-2019</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -10,14 +15,14 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_TwoPhases.html b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_TwoPhases.html
index 7b22780a0..0cffc037c 100644
--- a/packages/ui/src/components/titre/titre-timeline.stories_snapshots_TwoPhases.html
+++ b/packages/ui/src/components/titre/titre-timeline.stories_snapshots_TwoPhases.html
@@ -1,6 +1,14 @@
<div>
<h2>Phases</h2>
- <div style="overflow-x: auto;">
+ <ul>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2019" aria-label="Voir la phase Octroi du 01-01-2019" aria-current="page" tab-index="-1">Voir la phase Octroi du 01-01-2019</a></li>
+ </div>
+ <div>
+ <li class="_hidden_b2e482"><a href="/mocked-href" title="Voir la phase Octroi du 01-01-2021" aria-label="Voir la phase Octroi du 01-01-2021" tab-index="-1">Voir la phase Octroi du 01-01-2021</a></li>
+ </div>
+ </ul>
+ <div style="overflow-x: auto;" aria-hidden="true" tabindex="-1">
<div class="fr-mx-4w">
<div style="display: flex; gap: 14px;">
<div style="flex: 1; min-width: 203px;" class="_datesContainer_b2e482">
@@ -14,19 +22,19 @@
</div>
<div style="display: flex; width: 100%;">
<div style="display: flex; gap: 5px; position: relative; height: 20px; flex: 1;">
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" aria-current="page" style="min-width: 200px;"></a></div>
<div style="border: 2px solid black;"></div>
- <div class="_phasesContainer_b2e482" style="flex: 1;"><a href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
+ <div class="_phasesContainer_b2e482" style="flex: 1;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="_phase_b2e482" aria-label="Octroi" style="min-width: 200px;"></a></div>
<!---->
</div>
<div style="border-width: 0px 4px 4px 0px; padding: 8px; display: inline-block; transform: rotate(-45deg); margin-left: -20px;"></div>
</div>
<div class="fr-pt-1w" style="display: flex; column-gap: 14px;">
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi" aria-current="page">Octroi</a></div>
</div>
<div style="flex: 1;" class="_datesContainer_b2e482">
- <div style="flex: 1; min-width: 200px;"><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
+ <div style="flex: 1; min-width: 200px;"><a tabindex="-1" href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
</div>
</div>
</div>
diff --git a/packages/ui/src/components/titre/titre-timeline.tsx b/packages/ui/src/components/titre/titre-timeline.tsx
index 8e2555244..42eb24cd2 100644
--- a/packages/ui/src/components/titre/titre-timeline.tsx
+++ b/packages/ui/src/components/titre/titre-timeline.tsx
@@ -64,7 +64,42 @@ export const TitreTimeline: FunctionalComponent<Props> = props => {
<>
<div>
<h2>Phases</h2>
- <div style={{ overflowX: 'auto' }}>
+ <ul>
+ {props.phasesWithAlterations.map((phaseWithAlterations, phaseIndex) => (
+ <div key={phaseIndex}>
+ {phaseWithAlterations.map((demarche, demarcheIndex) => (
+ <Fragment key={demarche.slug}>
+ <li class={style.hidden}>
+ <CaminoRouterLink
+ {...getAriaCurrent(demarche.slug, props.currentDemarcheSlug)}
+ tab-index={-1}
+ to={{ name: 'titre', params: { id: props.titreSlug }, query: { demarcheSlug: demarche.slug } }}
+ isDisabled={false}
+ title={`Voir la phase ${capitalize(DemarchesTypes[demarche.demarche_type_id].nom)} du ${datePhasesWithAlterations[phaseIndex][demarcheIndex]}`}
+ >
+ Voir la phase {capitalize(DemarchesTypes[demarche.demarche_type_id].nom)} du {datePhasesWithAlterations[phaseIndex][demarcheIndex]}
+ </CaminoRouterLink>
+ </li>
+ {demarche.events.map(event => (
+ <li class={style.hidden}>
+ <CaminoRouterLink
+ {...getAriaCurrent(event.slug, props.currentDemarcheSlug)}
+ tab-index={-1}
+ to={{ name: 'titre', params: { id: props.titreSlug }, query: { demarcheSlug: event.slug } }}
+ isDisabled={false}
+ title={`Voir l'événement ${capitalize(DemarchesTypes[event.demarche_type_id].nom)} du ${event.first_etape_date} lié à la phase ${capitalize(DemarchesTypes[demarche.demarche_type_id].nom)}`}
+ >
+ Voir l'événement {capitalize(DemarchesTypes[event.demarche_type_id].nom)} du {dateFormat(event.first_etape_date)} lié à la phase{' '}
+ {capitalize(DemarchesTypes[demarche.demarche_type_id].nom)}
+ </CaminoRouterLink>
+ </li>
+ ))}
+ </Fragment>
+ ))}
+ </div>
+ ))}
+ </ul>
+ <div style={{ overflowX: 'auto' }} aria-hidden="true" tabindex={-1}>
<div class="fr-mx-4w">
<div style={{ display: 'flex', gap: '14px' }}>
{datePhasesWithAlterations.map((datePhases, i) => (
@@ -141,6 +176,7 @@ export const TitreTimeline: FunctionalComponent<Props> = props => {
<div style={{ flex: 1, minWidth: `${minWidth}px` }}>
<CaminoRouterLink
{...getAriaCurrent(demarche.slug, props.currentDemarcheSlug)}
+ tabindex={-1}
key={demarche.slug}
to={{ name: 'titre', params: { id: props.titreSlug }, query: { demarcheSlug: demarche.slug } }}
isDisabled={false}
@@ -196,6 +232,7 @@ const DemarchePhase = defineComponent<{
{...getAriaCurrent(props.phase.slug, props.currentDemarcheSlug)}
to={{ name: 'titre', params: { id: props.titreSlug }, query: { demarcheSlug: props.phase.slug } }}
isDisabled={false}
+ tabindex={-1}
title={capitalize(DemarchesTypes[props.phase.demarche_type_id].nom)}
style={{ minWidth: `${minWidth}px` }}
class={`${style.phase} ${isOntoRootElement.value && !isOntoChildElement.value ? style.phaseHover : ''}`}
@@ -239,11 +276,11 @@ const DemarcheEvent: FunctionalComponent<{
return (
<>
{isTravaux(props.demarche.demarche_type_id) ? (
- <CaminoRouterLink {...commonProps}>
+ <CaminoRouterLink {...commonProps} tabindex={-1}>
<TravauxIcone selected={props.demarche.slug === props.currentDemarcheSlug} />
</CaminoRouterLink>
) : (
- <CaminoRouterLink {...commonProps} class={style.event} />
+ <CaminoRouterLink {...commonProps} class={style.event} tabindex={-1} />
)}
</>
)
diff --git a/packages/ui/src/components/titre/titres-link.stories_snapshots_AXM.html b/packages/ui/src/components/titre/titres-link.stories_snapshots_AXM.html
index d60addf99..78e327f22 100644
--- a/packages/ui/src/components/titre/titres-link.stories_snapshots_AXM.html
+++ b/packages/ui/src/components/titre/titres-link.stories_snapshots_AXM.html
@@ -1,4 +1,20 @@
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" value=""></div>
- <!---->
+ <div class="flex"><input id="titre-link-typeahead" type="text" title="Lier un titre" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Abttis Coucou</span><span class="ml-m" style="margin-left: auto;">2016-10-28 - 2017-03-17</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-1">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Affluent Crique Saint Bernard</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-2">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/titre/titres-link.stories_snapshots_AXMWithAlreadySelectedTitre.html b/packages/ui/src/components/titre/titres-link.stories_snapshots_AXMWithAlreadySelectedTitre.html
index 566460ea4..beff9853d 100644
--- a/packages/ui/src/components/titre/titres-link.stories_snapshots_AXMWithAlreadySelectedTitre.html
+++ b/packages/ui/src/components/titre/titres-link.stories_snapshots_AXMWithAlreadySelectedTitre.html
@@ -1,4 +1,15 @@
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div class="flex"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" value="Abttis Coucou"></div>
- <!---->
+ <div class="flex"><input id="titre-link-typeahead" type="text" title="Lier un titre" name="titre-link-typeahead" class="fr-input" placeholder="Lier un titre" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value="Abttis Coucou"></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Affluent Crique Saint Bernard</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-1">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusion.html b/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusion.html
index 9d209dcac..2a95384e1 100644
--- a/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusion.html
+++ b/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusion.html
@@ -1,4 +1,20 @@
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" style="outline: none;" placeholder="Lier plusieurs titres" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" style="outline: none;" placeholder="Lier plusieurs titres" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Abttis Coucou</span><span class="ml-m" style="margin-left: auto;">2016-10-28 - 2017-03-17</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-1">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Affluent Crique Saint Bernard</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="titre-link-typeahead-control-2">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusionWithAlreadySelectedTitre.html b/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusionWithAlreadySelectedTitre.html
index ce2b51623..769d24cf2 100644
--- a/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusionWithAlreadySelectedTitre.html
+++ b/packages/ui/src/components/titre/titres-link.stories_snapshots_DemarcheFusionWithAlreadySelectedTitre.html
@@ -1,4 +1,10 @@
<div id="titre-link-typeahead_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Abttis Coucou" aria-label="Abttis Coucou">Abttis Coucou</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Affluent Crique Saint Bernard" aria-label="Affluent Crique Saint Bernard">Affluent Crique Saint Bernard</button><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" style="outline: none;" placeholder="Lier plusieurs titres" autocomplete="off" value=""></div>
- <!---->
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer Abttis Coucou" aria-label="Supprimer Abttis Coucou">Abttis Coucou</button><button class="fr-tag fr-tag--sm fr-tag--dismiss" title="Supprimer Affluent Crique Saint Bernard" aria-label="Supprimer Affluent Crique Saint Bernard">Affluent Crique Saint Bernard</button><input id="titre-link-typeahead" type="text" name="titre-link-typeahead" style="outline: none;" placeholder="Lier plusieurs titres" autocomplete="off" role="combobox" aria-controls="titre-link-typeahead-control" aria-activedescendant="titre-link-typeahead-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="titre-link-typeahead-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="titre-link-typeahead-control-0">
+ <div class="flex flex-center">
+ <p style="z-index: unset; margin-bottom: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="fr-badge fr-badge--md fr-badge--beige-gris-galet" title="échu" aria-label="échu">échu</p><span class="bold ml-m">Nouveau titre</span><span class="ml-m" style="margin-left: auto;">2008-11-30 - 2019-02-27</span>
+ </div>
+ </li>
+ </ul>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateur.stories_snapshots_AnotherUser.html b/packages/ui/src/components/utilisateur.stories_snapshots_AnotherUser.html
index 3f6a4ee7b..0e5cc31cb 100644
--- a/packages/ui/src/components/utilisateur.stories_snapshots_AnotherUser.html
+++ b/packages/ui/src/components/utilisateur.stories_snapshots_AnotherUser.html
@@ -8,12 +8,12 @@
</div>
</div>
<div class="fr-pt-8w fr-pb-4w" style="display: flex; gap: 2rem; flex-direction: column;">
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Prénom</span><span class="fr-col">Prenom</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Nom</span><span class="fr-col">Nom</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col"><a class="fr-link" title="email@gmail.com" href="mailto:email@gmail.com">email@gmail.com</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone fixe</span><span class="fr-col"><span>–</span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone mobile</span><span class="fr-col"><span>–</span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Super" aria-label="Super">Super</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Prénom</span><span class="fr-col-12 fr-col-sm">Prenom</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Nom</span><span class="fr-col-12 fr-col-sm">Nom</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="email@gmail.com" href="mailto:email@gmail.com">email@gmail.com</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone fixe</span><span class="fr-col-12 fr-col-sm"><span>–</span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone mobile</span><span class="fr-col-12 fr-col-sm"><span>–</span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Super" aria-label="Super">Super</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
<!---->
<!---->
<!---->
diff --git a/packages/ui/src/components/utilisateur.stories_snapshots_MySelf.html b/packages/ui/src/components/utilisateur.stories_snapshots_MySelf.html
index 04eb31f9a..43300936a 100644
--- a/packages/ui/src/components/utilisateur.stories_snapshots_MySelf.html
+++ b/packages/ui/src/components/utilisateur.stories_snapshots_MySelf.html
@@ -8,15 +8,15 @@
</button></div>
</div>
<div class="fr-pt-8w fr-pb-4w" style="display: flex; gap: 2rem; flex-direction: column;">
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Prénom</span><span class="fr-col">Prenom</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Nom</span><span class="fr-col">Nom</span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col"><a class="fr-link" title="email@gmail.com" href="mailto:email@gmail.com">email@gmail.com</a></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone fixe</span><span class="fr-col"><span>–</span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Téléphone mobile</span><span class="fr-col"><span>–</span></span></div>
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Super" aria-label="Super">Super</p><!----></div></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Prénom</span><span class="fr-col-12 fr-col-sm">Prenom</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Nom</span><span class="fr-col-12 fr-col-sm">Nom</span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Email</span><span class="fr-col-12 fr-col-sm"><a class="fr-link" title="email@gmail.com" href="mailto:email@gmail.com">email@gmail.com</a></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone fixe</span><span class="fr-col-12 fr-col-sm"><span>–</span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Téléphone mobile</span><span class="fr-col-12 fr-col-sm"><span>–</span></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Super" aria-label="Super">Super</p><!----></div></span></div>
<!---->
<!---->
- <div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">QGis</span><span class="fr-col"><div style="display: flex; flex-direction: column; gap: 16px;"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Générer des identifiants pour QGis" aria-label="Générer des identifiants pour QGis" type="button">Générer des identifiants pour QGis</button><!----></div></span></div>
+ <div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">QGis</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: column; gap: 16px;"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Générer des identifiants pour QGis" aria-label="Générer des identifiants pour QGis" type="button">Générer des identifiants pour QGis</button><!----></div></span></div>
</div>
<!---->
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateur.stories_snapshots_error.html b/packages/ui/src/components/utilisateur.stories_snapshots_error.html
index 9d33215ea..e479b898a 100644
--- a/packages/ui/src/components/utilisateur.stories_snapshots_error.html
+++ b/packages/ui/src/components/utilisateur.stories_snapshots_error.html
@@ -1,7 +1,7 @@
<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="fr-alert fr-alert--error fr-alert--sm">
+ <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
<p>Cassé</p>
</div>
<!---->
diff --git a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Administration.html b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Administration.html
index b516f62f1..7c31b7d90 100644
--- a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Administration.html
+++ b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Administration.html
@@ -1,2 +1,2 @@
-<div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Admin" aria-label="Admin">Admin</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
-<div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Administration</span><span class="fr-col"><a href="/mocked-href" title="DGTM - Guyane" class="fr-tag fr-tag--md" aria-label="DGTM - Guyane">DGTM - Guyane</a></span></div>
\ No newline at end of file
+<div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Admin" aria-label="Admin">Admin</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
+<div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Administration</span><span class="fr-col-12 fr-col-sm"><a href="/mocked-href" title="DGTM - Guyane" class="fr-tag fr-tag--md" aria-label="DGTM - Guyane">DGTM - Guyane</a></span></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Default.html b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Default.html
index e37aa5e4c..e1e675413 100644
--- a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Default.html
+++ b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Default.html
@@ -1 +1 @@
-<div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Defaut" aria-label="Defaut">Defaut</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
\ No newline at end of file
+<div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Defaut" aria-label="Defaut">Defaut</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Entreprise.html b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Entreprise.html
index decc44b0a..5504593a8 100644
--- a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Entreprise.html
+++ b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_Entreprise.html
@@ -1,2 +1,2 @@
-<div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Entreprise" aria-label="Entreprise">Entreprise</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
-<div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Entreprises</span><span class="fr-col"><ul class="fr-tags-group"><li><a href="/mocked-href" title="Nom entreprise1" class="fr-tag fr-tag--md" aria-label="Nom entreprise1">Nom entreprise1</a></li><li><a href="/mocked-href" title="Nom entreprise2 (FR2320-92)" class="fr-tag fr-tag--md" aria-label="Nom entreprise2 (FR2320-92)">Nom entreprise2 (FR2320-92)</a></li></ul></span></div>
\ No newline at end of file
+<div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Entreprise" aria-label="Entreprise">Entreprise</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
+<div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Entreprises</span><span class="fr-col-12 fr-col-sm"><ul class="fr-tags-group"><li><a href="/mocked-href" title="Nom entreprise1" class="fr-tag fr-tag--md" aria-label="Nom entreprise1">Nom entreprise1</a></li><li><a href="/mocked-href" title="Nom entreprise2 (FR2320-92)" class="fr-tag fr-tag--md" aria-label="Nom entreprise2 (FR2320-92)">Nom entreprise2 (FR2320-92)</a></li></ul></span></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_UserAdminCanEditDefautIntoLecteur.html b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_UserAdminCanEditDefautIntoLecteur.html
index e37aa5e4c..e1e675413 100644
--- a/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_UserAdminCanEditDefautIntoLecteur.html
+++ b/packages/ui/src/components/utilisateur/permission-edit.stories_snapshots_UserAdminCanEditDefautIntoLecteur.html
@@ -1 +1 @@
-<div class="fr-grid-row"><span class="fr-col-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Defaut" aria-label="Defaut">Defaut</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
\ No newline at end of file
+<div class="fr-grid-row"><span class="fr-col-12 fr-col-sm-3 fr-h6" style="margin: 0px;">Rôles</span><span class="fr-col-12 fr-col-sm"><div style="display: flex; flex-direction: row; align-content: center; align-items: center;"><p class="fr-tag fr-tag--md" title="Defaut" aria-label="Defaut">Defaut</p><button class="fr-btn fr-btn--tertiary-no-outline fr-btn--md fr-icon-pencil-line" title="Modifie les permissions" aria-label="Modifie les permissions" type="button"><!----></button></div></span></div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateur/permission-edit.tsx b/packages/ui/src/components/utilisateur/permission-edit.tsx
index 3937af0f2..50afcf30a 100644
--- a/packages/ui/src/components/utilisateur/permission-edit.tsx
+++ b/packages/ui/src/components/utilisateur/permission-edit.tsx
@@ -168,6 +168,7 @@ const PermissionEdit = defineComponent<PermissionEditProps>(props => {
title="Entreprises"
item={
<TypeAheadSmartMultiple
+ id="entreprises-role"
filter={{
name: 'Entreprises',
value: updatingUtilisateur.value.entrepriseIds,
@@ -185,6 +186,7 @@ const PermissionEdit = defineComponent<PermissionEditProps>(props => {
title="Administration"
item={
<DsfrSelect
+ required={true}
items={map(sortedAdministrations, admin => ({ id: admin.id, label: admin.abreviation }))}
initialValue={updatingUtilisateur.value.administrationId}
legend={{ main: '' }}
diff --git a/packages/ui/src/components/utilisateur/qgis-token.tsx b/packages/ui/src/components/utilisateur/qgis-token.tsx
index 965382348..eac055f26 100644
--- a/packages/ui/src/components/utilisateur/qgis-token.tsx
+++ b/packages/ui/src/components/utilisateur/qgis-token.tsx
@@ -3,9 +3,10 @@ import { QGISTokenRest } from 'camino-common/src/utilisateur'
import { defineComponent, ref } from 'vue'
import { LoadingElement } from '../_ui/functional-loader'
import { UtilisateurApiClient } from './utilisateur-api-client'
-import { DsfrButton } from '../_ui/dsfr-button'
+import { DsfrButton, DsfrLink } from '../_ui/dsfr-button'
import { Alert } from '../_ui/alert'
-import { isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
+import { isNotNullNorUndefined, isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
+import { DsfrCallout } from '../_ui/dsfr-callout'
interface Props {
apiClient: Pick<UtilisateurApiClient, 'getQGISToken'>
@@ -13,7 +14,7 @@ interface Props {
export const QGisToken = defineComponent<Props>(props => {
const data = ref<AsyncData<QGISTokenRest> | null>(null)
- const alertMessage = ref<string>('')
+ const alertMessage = ref<string | null>(null)
const generateToken = async () => {
data.value = { status: 'LOADING' }
@@ -25,13 +26,16 @@ export const QGisToken = defineComponent<Props>(props => {
}
} else if (tokenData.url) {
data.value = { status: 'LOADED', value: tokenData }
- copyToClipboard(`L'URL vient d'être copiée dans votre presse papier`, tokenData.url)
}
}
const copyToClipboard = (message: string, token: string) => {
navigator.clipboard.writeText(token)
alertMessage.value = message
+
+ setTimeout(() => {
+ alertMessage.value = null
+ }, 10_000)
}
return () => (
@@ -44,14 +48,29 @@ export const QGisToken = defineComponent<Props>(props => {
<>
{isNotNullNorUndefinedNorEmpty(item.token) ? (
<>
- <div>
- Voici l'URL à utiliser dans QGis :{' '}
- <DsfrButton title={item.url} onClick={() => copyToClipboard(`L'URL vient d'être copiée dans votre presse papier`, item.url)} buttonType="tertiary" />
- </div>
- <div>
- Voici le jeton généré : <DsfrButton title={item.token} onClick={() => copyToClipboard(`Le token vient d'être copié dans votre presse papier`, item.token)} buttonType="tertiary" />
- </div>
- <Alert small={true} type="info" title={alertMessage.value} />
+ <DsfrCallout
+ title="URL QGis"
+ content={
+ <>
+ Voici l'URL à utiliser pour intégrer les flux Camino dans QGis :<br />
+ {item.url}
+ <br />
+ <br />
+ Pour plus d'informations, n'hésitez pas à aller voir{' '}
+ <DsfrLink
+ href="https://docs.camino.beta.gouv.fr/01-utilisation/02-flux/#utilisation-dans-qgis"
+ disabled={false}
+ icon={null}
+ label="la documentation."
+ title="Documentation pour intégrer QGIS - Lien externe"
+ />
+ </>
+ }
+ footer={
+ <DsfrButton title="Copier l'URL dans le presse-papier" onClick={() => copyToClipboard(`L'URL vient d'être copiée dans votre presse papier`, item.url)} buttonType="tertiary" />
+ }
+ />
+ {isNotNullNorUndefined(alertMessage.value) && <Alert small={true} type="info" role="alert" title={alertMessage.value} />}
</>
) : null}
</>
diff --git a/packages/ui/src/components/utilisateurs.stories_snapshots_Connected.html b/packages/ui/src/components/utilisateurs.stories_snapshots_Connected.html
index b880c807c..d502999cc 100644
--- a/packages/ui/src/components/utilisateurs.stories_snapshots_Connected.html
+++ b/packages/ui/src/components/utilisateurs.stories_snapshots_Connected.html
@@ -1,118 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (3 / 125 résultats)</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0; order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsUtilisateurs">Noms, prénoms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsUtilisateurs">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="..." class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-emails">Emails</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-emails">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="input_670" id="input_670" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-roles">Rôles</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-roles">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div><span class="h6 bold">Admin</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div><span class="h6 bold">Bureau d'études</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div><span class="h6 bold">Defaut</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div><span class="h6 bold">Editeur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div><span class="h6 bold">Entreprise</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div><span class="h6 bold">Lecteur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Super</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-administrationIds">Administrations</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Administrations_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Administrations" type="text" name="filters_autocomplete_Administrations" style="outline: none;" placeholder="Administrations" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Utilisateurs</h1>
@@ -197,5 +85,259 @@
</nav>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres (3 / 125 résultats)</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsUtilisateurs">Noms, prénoms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="..." class="fr-input" name="filtres_input_nomsUtilisateurs" id="filtres_input_nomsUtilisateurs" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_emails">Emails</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="filtres_input_emails" id="filtres_input_emails" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_roles">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_roles">Rôles</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Admin
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Bureau d'études
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Defaut
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Editeur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Entreprise
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">Lecteur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Super
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Rôles" aria-label="Décocher toutes les cases à cocher Rôles" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Rôles" aria-label="Cocher toutes les cases à cocher Rôles" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_administrationIds">Administrations</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_administrationIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_administrationIds" type="text" name="filtres_autocomplete_administrationIds" style="outline: none;" placeholder="Administrations" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_administrationIds-control" aria-activedescendant="filtres_autocomplete_administrationIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_administrationIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_administrationIds-control-0"><span>Bureau de recherches géologiques et minières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-1"><span>Centre d'appui au contrôle de l'environnement marin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-2"><span>Ministère de l'Economie, des Finances et de la Relance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-3"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-4"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-5"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-6"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-7"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-8"><span>Ministère de la Cohésion des Territoires et des Relations avec les Collectivités Territoriales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-9"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-10"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-11"><span>Direction Générale des Territoires et de la Mer de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-12"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Auvergne-Rhône-Alpes - Siège de Lyon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-13"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bourgogne-Franche-Comté - Siège de Besançon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-14"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-15"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Centre-Val-de-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-16"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-17"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Grand Est - Siège de Metz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-18"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Hauts-de-France - Siège de Lille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-19"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Normandie - Siège de Rouen</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-20"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Nouvelle-Aquitaine - Siège de Poitiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-21"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Occitanie - Siège de Toulouse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-22"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-23"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Provence-Alpes-Côte-d'Azur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-24"><span>Direction régionale et interdépartementale de l'environnement et de l'énergie (DRIEE) - Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-25"><span>Gendarmerie Nationale - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-26"><span>Mission régionale autorité environnementale de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-27"><span>Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-28"><span>Pôle Technique Minier de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-29"><span>Préfecture - Ain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-30"><span>Préfecture - Aisne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-31"><span>Préfecture - Allier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-32"><span>Préfecture - Alpes-de-Haute-Provence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-33"><span>Préfecture - Alpes-Maritimes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-34"><span>Préfecture - Ardèche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-35"><span>Préfecture - Ardennes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-36"><span>Préfecture - Ariège</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-37"><span>Préfecture - Aube</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-38"><span>Préfecture - Aude</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-39"><span>Préfecture - Aveyron</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-40"><span>Préfecture - Bas-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-41"><span>Préfecture - Bouches-du-Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-42"><span>Préfecture - Calvados</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-43"><span>Préfecture - Cantal</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-44"><span>Préfecture - Charente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-45"><span>Préfecture - Charente-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-46"><span>Préfecture - Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-47"><span>Préfecture - Corrèze</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-48"><span>Préfecture - Corse-du-Sud</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-49"><span>Préfecture - Côte-d'Or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-50"><span>Préfecture - Côtes-d'Armor</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-51"><span>Préfecture - Creuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-52"><span>Préfecture - Deux-Sèvres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-53"><span>Préfecture - Dordogne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-54"><span>Préfecture - Doubs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-55"><span>Préfecture - Drôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-56"><span>Préfecture - Essonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-57"><span>Préfecture - Eure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-58"><span>Préfecture - Eure-et-Loir</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-59"><span>Préfecture - Finistère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-60"><span>Préfecture - Gard</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-61"><span>Préfecture - Gers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-62"><span>Préfecture - Gironde</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-63"><span>Préfecture - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-64"><span>Préfecture - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-65"><span>Préfecture - Haut-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-66"><span>Préfecture - Haute-Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-67"><span>Préfecture - Haute-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-68"><span>Préfecture - Haute-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-69"><span>Préfecture - Haute-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-70"><span>Préfecture - Haute-Saône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-71"><span>Préfecture - Haute-Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-72"><span>Préfecture - Haute-Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-73"><span>Préfecture - Hautes-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-74"><span>Préfecture - Hautes-Pyrénées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-75"><span>Préfecture - Hauts-de-Seine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-76"><span>Préfecture - Hérault</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-77"><span>Préfecture - Ille-et-Vilaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-78"><span>Préfecture - Indre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-79"><span>Préfecture - Indre-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-80"><span>Préfecture - Isère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-81"><span>Préfecture - Jura</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-82"><span>Préfecture - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-83"><span>Préfecture - Landes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-84"><span>Préfecture - Loir-et-Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-85"><span>Préfecture - Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-86"><span>Préfecture - Loire-Atlantique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-87"><span>Préfecture - Loiret</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-88"><span>Préfecture - Lot</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-89"><span>Préfecture - Lot-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-90"><span>Préfecture - Lozère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-91"><span>Préfecture - Maine-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-92"><span>Préfecture - Manche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-93"><span>Préfecture - Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-94"><span>Préfecture - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-95"><span>Préfecture - Mayenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-96"><span>Préfecture - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-97"><span>Préfecture - Meurthe-et-Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-98"><span>Préfecture - Meuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-99"><span>Préfecture - Morbihan</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-100"><span>Préfecture - Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-101"><span>Préfecture - Nièvre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-102"><span>Préfecture - Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-103"><span>Préfecture - Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-104"><span>Préfecture - Orne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-105"><span>Préfecture - Pas-de-Calais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-106"><span>Préfecture - Puy-de-Dôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-107"><span>Préfecture - Pyrénées-Atlantiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-108"><span>Préfecture - Pyrénées-Orientales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-109"><span>Préfecture - Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-110"><span>Préfecture - Saône-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-111"><span>Préfecture - Sarthe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-112"><span>Préfecture - Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-113"><span>Préfecture - Seine-et-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-114"><span>Préfecture - Seine-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-115"><span>Préfecture - Seine-Saint-Denis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-116"><span>Préfecture - Somme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-117"><span>Préfecture - Tarn</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-118"><span>Préfecture - Tarn-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-119"><span>Préfecture - Territoire de Belfort</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-120"><span>Préfecture - Val-d'Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-121"><span>Préfecture - Val-de-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-122"><span>Préfecture - Var</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-123"><span>Préfecture - Vaucluse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-124"><span>Préfecture - Vendée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-125"><span>Préfecture - Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-126"><span>Préfecture - Vosges</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-127"><span>Préfecture - Yonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-128"><span>Préfecture - Yvelines</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-129"><span>Préfecture de police de Paris</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-0"><span>Entreprise1</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html b/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html
index d8fc3f708..74a8a4627 100644
--- a/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html
@@ -1,118 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsUtilisateurs">Noms, prénoms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsUtilisateurs">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="..." class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-emails">Emails</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-emails">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="input_670" id="input_670" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-roles">Rôles</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-roles">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div><span class="h6 bold">Admin</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div><span class="h6 bold">Bureau d'études</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div><span class="h6 bold">Defaut</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div><span class="h6 bold">Editeur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div><span class="h6 bold">Entreprise</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div><span class="h6 bold">Lecteur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Super</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-administrationIds">Administrations</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Administrations_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Administrations" type="text" name="filters_autocomplete_Administrations" style="outline: none;" placeholder="Administrations" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Utilisateurs</h1>
@@ -235,5 +123,259 @@
</div>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsUtilisateurs">Noms, prénoms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="..." class="fr-input" name="filtres_input_nomsUtilisateurs" id="filtres_input_nomsUtilisateurs" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_emails">Emails</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="filtres_input_emails" id="filtres_input_emails" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_roles">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_roles">Rôles</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Admin
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Bureau d'études
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Defaut
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Editeur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Entreprise
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">Lecteur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Super
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Rôles" aria-label="Décocher toutes les cases à cocher Rôles" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Rôles" aria-label="Cocher toutes les cases à cocher Rôles" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_administrationIds">Administrations</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_administrationIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_administrationIds" type="text" name="filtres_autocomplete_administrationIds" style="outline: none;" placeholder="Administrations" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_administrationIds-control" aria-activedescendant="filtres_autocomplete_administrationIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_administrationIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_administrationIds-control-0"><span>Bureau de recherches géologiques et minières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-1"><span>Centre d'appui au contrôle de l'environnement marin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-2"><span>Ministère de l'Economie, des Finances et de la Relance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-3"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-4"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-5"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-6"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-7"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-8"><span>Ministère de la Cohésion des Territoires et des Relations avec les Collectivités Territoriales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-9"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-10"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-11"><span>Direction Générale des Territoires et de la Mer de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-12"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Auvergne-Rhône-Alpes - Siège de Lyon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-13"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bourgogne-Franche-Comté - Siège de Besançon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-14"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-15"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Centre-Val-de-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-16"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-17"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Grand Est - Siège de Metz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-18"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Hauts-de-France - Siège de Lille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-19"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Normandie - Siège de Rouen</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-20"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Nouvelle-Aquitaine - Siège de Poitiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-21"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Occitanie - Siège de Toulouse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-22"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-23"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Provence-Alpes-Côte-d'Azur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-24"><span>Direction régionale et interdépartementale de l'environnement et de l'énergie (DRIEE) - Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-25"><span>Gendarmerie Nationale - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-26"><span>Mission régionale autorité environnementale de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-27"><span>Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-28"><span>Pôle Technique Minier de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-29"><span>Préfecture - Ain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-30"><span>Préfecture - Aisne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-31"><span>Préfecture - Allier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-32"><span>Préfecture - Alpes-de-Haute-Provence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-33"><span>Préfecture - Alpes-Maritimes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-34"><span>Préfecture - Ardèche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-35"><span>Préfecture - Ardennes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-36"><span>Préfecture - Ariège</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-37"><span>Préfecture - Aube</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-38"><span>Préfecture - Aude</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-39"><span>Préfecture - Aveyron</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-40"><span>Préfecture - Bas-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-41"><span>Préfecture - Bouches-du-Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-42"><span>Préfecture - Calvados</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-43"><span>Préfecture - Cantal</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-44"><span>Préfecture - Charente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-45"><span>Préfecture - Charente-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-46"><span>Préfecture - Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-47"><span>Préfecture - Corrèze</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-48"><span>Préfecture - Corse-du-Sud</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-49"><span>Préfecture - Côte-d'Or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-50"><span>Préfecture - Côtes-d'Armor</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-51"><span>Préfecture - Creuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-52"><span>Préfecture - Deux-Sèvres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-53"><span>Préfecture - Dordogne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-54"><span>Préfecture - Doubs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-55"><span>Préfecture - Drôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-56"><span>Préfecture - Essonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-57"><span>Préfecture - Eure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-58"><span>Préfecture - Eure-et-Loir</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-59"><span>Préfecture - Finistère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-60"><span>Préfecture - Gard</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-61"><span>Préfecture - Gers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-62"><span>Préfecture - Gironde</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-63"><span>Préfecture - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-64"><span>Préfecture - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-65"><span>Préfecture - Haut-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-66"><span>Préfecture - Haute-Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-67"><span>Préfecture - Haute-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-68"><span>Préfecture - Haute-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-69"><span>Préfecture - Haute-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-70"><span>Préfecture - Haute-Saône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-71"><span>Préfecture - Haute-Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-72"><span>Préfecture - Haute-Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-73"><span>Préfecture - Hautes-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-74"><span>Préfecture - Hautes-Pyrénées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-75"><span>Préfecture - Hauts-de-Seine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-76"><span>Préfecture - Hérault</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-77"><span>Préfecture - Ille-et-Vilaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-78"><span>Préfecture - Indre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-79"><span>Préfecture - Indre-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-80"><span>Préfecture - Isère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-81"><span>Préfecture - Jura</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-82"><span>Préfecture - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-83"><span>Préfecture - Landes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-84"><span>Préfecture - Loir-et-Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-85"><span>Préfecture - Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-86"><span>Préfecture - Loire-Atlantique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-87"><span>Préfecture - Loiret</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-88"><span>Préfecture - Lot</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-89"><span>Préfecture - Lot-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-90"><span>Préfecture - Lozère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-91"><span>Préfecture - Maine-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-92"><span>Préfecture - Manche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-93"><span>Préfecture - Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-94"><span>Préfecture - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-95"><span>Préfecture - Mayenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-96"><span>Préfecture - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-97"><span>Préfecture - Meurthe-et-Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-98"><span>Préfecture - Meuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-99"><span>Préfecture - Morbihan</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-100"><span>Préfecture - Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-101"><span>Préfecture - Nièvre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-102"><span>Préfecture - Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-103"><span>Préfecture - Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-104"><span>Préfecture - Orne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-105"><span>Préfecture - Pas-de-Calais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-106"><span>Préfecture - Puy-de-Dôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-107"><span>Préfecture - Pyrénées-Atlantiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-108"><span>Préfecture - Pyrénées-Orientales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-109"><span>Préfecture - Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-110"><span>Préfecture - Saône-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-111"><span>Préfecture - Sarthe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-112"><span>Préfecture - Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-113"><span>Préfecture - Seine-et-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-114"><span>Préfecture - Seine-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-115"><span>Préfecture - Seine-Saint-Denis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-116"><span>Préfecture - Somme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-117"><span>Préfecture - Tarn</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-118"><span>Préfecture - Tarn-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-119"><span>Préfecture - Territoire de Belfort</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-120"><span>Préfecture - Val-d'Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-121"><span>Préfecture - Val-de-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-122"><span>Préfecture - Var</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-123"><span>Préfecture - Vaucluse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-124"><span>Préfecture - Vendée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-125"><span>Préfecture - Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-126"><span>Préfecture - Vosges</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-127"><span>Préfecture - Yonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-128"><span>Préfecture - Yvelines</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-129"><span>Préfecture de police de Paris</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-0"><span>Entreprise1</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html b/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html
index d28ea1f0b..a5b4d964a 100644
--- a/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html
@@ -1,118 +1,6 @@
<div class="fr-container--fluid" style="overflow: visible;">
<div class="fr-grid-row">
- <div class="fr-col-12 fr-col-md-3">
- <nav class="fr-sidemenu fr-pr-2w" aria-labelledby="fr-sidemenu-title">
- <div class="fr-sidemenu__inner fr-pt-3w fr-pl-2w fr-pb-3w fr-pr-2w"><button class="fr-sidemenu__btn" aria-controls="fr-sidemenu-wrapper" aria-expanded="false">Filtres</button>
- <div class="fr-collapse" id="fr-sidemenu-wrapper">
- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</div>
- <ul class="fr-sidemenu__list" style="display: flex; flex-direction: column;">
- <li class="fr-sidemenu__item" style="order: 0;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-nomsUtilisateurs">Noms, prénoms</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-nomsUtilisateurs">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="..." class="fr-input" name="input_271" id="input_271" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 1;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-emails">Emails</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-emails">
- <div class="fr-py-2w">
- <div class="fr-input-group" style="margin-bottom: 0px;">
- <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="input_670" id="input_670" type="text" value="">
- <!---->
- </div>
- <!---->
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 2;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-roles">Rôles</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-roles">
- <div class="fr-py-2w">
- <!---->
- <!---->
- <div>
- <ul style="list-style-type: none; padding-left: 0px; font-weight: normal;" class="fr-pb-1w">
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">
- <!---->
- </label></div><span class="h6 bold">Admin</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">
- <!---->
- </label></div><span class="h6 bold">Bureau d'études</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">
- <!---->
- </label></div><span class="h6 bold">Defaut</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">
- <!---->
- </label></div><span class="h6 bold">Editeur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">
- <!---->
- </label></div><span class="h6 bold">Entreprise</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_772" type="checkbox"><label class="fr-label" for="checkbox_772">
- <!---->
- </label></div><span class="h6 bold">Lecteur</span>
- </label></li>
- <li class="fr-p-1v"><label style="display: flex; flex-direction: row;">
- <div class="fr-checkbox-group"><input name="archive" id="checkbox_453" type="checkbox"><label class="fr-label" for="checkbox_453">
- <!---->
- </label></div><span class="h6 bold">Super</span>
- </label></li>
- </ul><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mr-1w" title="Aucun" aria-label="Aucun" type="button">Aucun</button><button class="fr-btn fr-btn--tertiary fr-btn--sm" title="Tous" aria-label="Tous" type="button">Tous</button>
- </div>
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 3;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-administrationIds">Administrations</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-administrationIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Administrations_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Administrations" type="text" name="filters_autocomplete_Administrations" style="outline: none;" placeholder="Administrations" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- <li class="fr-sidemenu__item" style="order: 4;"><button class="fr-sidemenu__btn" aria-expanded="true" aria-controls="fr-sidemenu-item-entreprisesIds">Entreprises</button>
- <div class="fr-collapse filter-collapsable" id="fr-sidemenu-item-entreprisesIds">
- <div class="fr-py-2w">
- <!---->
- <div id="filters_autocomplete_Entreprises_wrapper" class="_typeahead_8eddf1">
- <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filters_autocomplete_Entreprises" type="text" name="filters_autocomplete_Entreprises" style="outline: none;" placeholder="Entreprises" autocomplete="off" value=""></div>
- <!---->
- </div>
- <!---->
- <!---->
- </div>
- </div>
- </li>
- </ul>
- <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
- </div>
- </div>
- </nav>
- </div>
- <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">
+ <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w" aria-live="polite">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-6">
<h1>Utilisateurs</h1>
@@ -237,5 +125,259 @@
</div>
</div>
</div>
+ <div class="fr-col-12 fr-col-md-3" style="order: -1;">
+ <form class="fr-pl-2w fr-pr-2w fr-pb-3w fr-pt-3w">
+ <h1 class="fr-sidemenu__title" id="fr-sidemenu-title">Filtres ...</h1>
+ <div style="display: flex; flex-direction: column;">
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_nomsUtilisateurs">Noms, prénoms</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="..." class="fr-input" name="filtres_input_nomsUtilisateurs" id="filtres_input_nomsUtilisateurs" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_input_emails">Emails</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <div class="fr-input-group" style="margin-bottom: 0px;">
+ <!----><input placeholder="prenom.nom@domaine.fr, ..." class="fr-input" name="filtres_input_emails" id="filtres_input_emails" type="text" value="">
+ <!---->
+ </div>
+ <!---->
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <fieldset class="fr-fieldset" aria-labelledby="filtres_checkboxes_roles">
+ <legend class="fr-fieldset__legend--regular fr-fieldset__legend fr-text--bold fr-pb-0" id="filtres_checkboxes_roles">Rôles</legend>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <!---->
+ <div>
+ <ul class="fr-pb-1w fr-pl-0" style="list-style-type: none; font-weight: normal;">
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_271" type="checkbox"><label class="fr-label" for="checkbox_271">Admin
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_670" type="checkbox"><label class="fr-label" for="checkbox_670">Bureau d'études
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_74" type="checkbox"><label class="fr-label" for="checkbox_74">Defaut
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_878" type="checkbox"><label class="fr-label" for="checkbox_878">Editeur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_967" type="checkbox"><label class="fr-label" for="checkbox_967">Entreprise
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_25" type="checkbox"><label class="fr-label" for="checkbox_25">Lecteur
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ <li class="fr-p-1v">
+ <div style="display: flex; flex-direction: row;">
+ <div class="fr-checkbox-group"><input name="archive" id="checkbox_128" type="checkbox"><label class="fr-label" for="checkbox_128">Super
+ <!---->
+ </label></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="fr-btns-group fr-btns-group--sm fr-btns-group--inline">
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Décocher toutes les cases à cocher Rôles" aria-label="Décocher toutes les cases à cocher Rôles" type="button">Aucun</button></li>
+ <li><button class="fr-btn fr-btn--tertiary fr-btn--sm fr-mb-0" title="Cocher toutes les cases à cocher Rôles" aria-label="Cocher toutes les cases à cocher Rôles" type="button">Tous</button></li>
+ </ul>
+ </div>
+ <!---->
+ </div>
+ </fieldset>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_administrationIds">Administrations</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_administrationIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_administrationIds" type="text" name="filtres_autocomplete_administrationIds" style="outline: none;" placeholder="Administrations" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_administrationIds-control" aria-activedescendant="filtres_autocomplete_administrationIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_administrationIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_administrationIds-control-0"><span>Bureau de recherches géologiques et minières</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-1"><span>Centre d'appui au contrôle de l'environnement marin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-2"><span>Ministère de l'Economie, des Finances et de la Relance</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-3"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-4"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-5"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-6"><span>Direction de l'environnement de l'aménagement et du logement (DEAL) - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-7"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-8"><span>Ministère de la Cohésion des Territoires et des Relations avec les Collectivités Territoriales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-9"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-10"><span>Ministère de l'Economie, des Finances et de la Relance & Ministère de la Transition écologique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-11"><span>Direction Générale des Territoires et de la Mer de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-12"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Auvergne-Rhône-Alpes - Siège de Lyon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-13"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bourgogne-Franche-Comté - Siège de Besançon</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-14"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Bretagne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-15"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Centre-Val-de-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-16"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-17"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Grand Est - Siège de Metz</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-18"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Hauts-de-France - Siège de Lille</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-19"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Normandie - Siège de Rouen</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-20"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Nouvelle-Aquitaine - Siège de Poitiers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-21"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Occitanie - Siège de Toulouse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-22"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Pays de la Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-23"><span>Direction régionale de l'environnement, de l'aménagement et du logement (DREAL) - Provence-Alpes-Côte-d'Azur</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-24"><span>Direction régionale et interdépartementale de l'environnement et de l'énergie (DRIEE) - Île-de-France</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-25"><span>Gendarmerie Nationale - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-26"><span>Mission régionale autorité environnementale de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-27"><span>Office national des forêts</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-28"><span>Pôle Technique Minier de Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-29"><span>Préfecture - Ain</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-30"><span>Préfecture - Aisne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-31"><span>Préfecture - Allier</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-32"><span>Préfecture - Alpes-de-Haute-Provence</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-33"><span>Préfecture - Alpes-Maritimes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-34"><span>Préfecture - Ardèche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-35"><span>Préfecture - Ardennes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-36"><span>Préfecture - Ariège</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-37"><span>Préfecture - Aube</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-38"><span>Préfecture - Aude</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-39"><span>Préfecture - Aveyron</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-40"><span>Préfecture - Bas-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-41"><span>Préfecture - Bouches-du-Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-42"><span>Préfecture - Calvados</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-43"><span>Préfecture - Cantal</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-44"><span>Préfecture - Charente</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-45"><span>Préfecture - Charente-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-46"><span>Préfecture - Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-47"><span>Préfecture - Corrèze</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-48"><span>Préfecture - Corse-du-Sud</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-49"><span>Préfecture - Côte-d'Or</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-50"><span>Préfecture - Côtes-d'Armor</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-51"><span>Préfecture - Creuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-52"><span>Préfecture - Deux-Sèvres</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-53"><span>Préfecture - Dordogne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-54"><span>Préfecture - Doubs</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-55"><span>Préfecture - Drôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-56"><span>Préfecture - Essonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-57"><span>Préfecture - Eure</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-58"><span>Préfecture - Eure-et-Loir</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-59"><span>Préfecture - Finistère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-60"><span>Préfecture - Gard</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-61"><span>Préfecture - Gers</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-62"><span>Préfecture - Gironde</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-63"><span>Préfecture - Guadeloupe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-64"><span>Préfecture - Guyane</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-65"><span>Préfecture - Haut-Rhin</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-66"><span>Préfecture - Haute-Corse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-67"><span>Préfecture - Haute-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-68"><span>Préfecture - Haute-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-69"><span>Préfecture - Haute-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-70"><span>Préfecture - Haute-Saône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-71"><span>Préfecture - Haute-Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-72"><span>Préfecture - Haute-Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-73"><span>Préfecture - Hautes-Alpes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-74"><span>Préfecture - Hautes-Pyrénées</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-75"><span>Préfecture - Hauts-de-Seine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-76"><span>Préfecture - Hérault</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-77"><span>Préfecture - Ille-et-Vilaine</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-78"><span>Préfecture - Indre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-79"><span>Préfecture - Indre-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-80"><span>Préfecture - Isère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-81"><span>Préfecture - Jura</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-82"><span>Préfecture - La Réunion</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-83"><span>Préfecture - Landes</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-84"><span>Préfecture - Loir-et-Cher</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-85"><span>Préfecture - Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-86"><span>Préfecture - Loire-Atlantique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-87"><span>Préfecture - Loiret</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-88"><span>Préfecture - Lot</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-89"><span>Préfecture - Lot-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-90"><span>Préfecture - Lozère</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-91"><span>Préfecture - Maine-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-92"><span>Préfecture - Manche</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-93"><span>Préfecture - Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-94"><span>Préfecture - Martinique</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-95"><span>Préfecture - Mayenne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-96"><span>Préfecture - Mayotte</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-97"><span>Préfecture - Meurthe-et-Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-98"><span>Préfecture - Meuse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-99"><span>Préfecture - Morbihan</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-100"><span>Préfecture - Moselle</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-101"><span>Préfecture - Nièvre</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-102"><span>Préfecture - Nord</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-103"><span>Préfecture - Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-104"><span>Préfecture - Orne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-105"><span>Préfecture - Pas-de-Calais</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-106"><span>Préfecture - Puy-de-Dôme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-107"><span>Préfecture - Pyrénées-Atlantiques</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-108"><span>Préfecture - Pyrénées-Orientales</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-109"><span>Préfecture - Rhône</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-110"><span>Préfecture - Saône-et-Loire</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-111"><span>Préfecture - Sarthe</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-112"><span>Préfecture - Savoie</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-113"><span>Préfecture - Seine-et-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-114"><span>Préfecture - Seine-Maritime</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-115"><span>Préfecture - Seine-Saint-Denis</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-116"><span>Préfecture - Somme</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-117"><span>Préfecture - Tarn</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-118"><span>Préfecture - Tarn-et-Garonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-119"><span>Préfecture - Territoire de Belfort</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-120"><span>Préfecture - Val-d'Oise</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-121"><span>Préfecture - Val-de-Marne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-122"><span>Préfecture - Var</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-123"><span>Préfecture - Vaucluse</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-124"><span>Préfecture - Vendée</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-125"><span>Préfecture - Vienne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-126"><span>Préfecture - Vosges</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-127"><span>Préfecture - Yonne</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-128"><span>Préfecture - Yvelines</span></li>
+ <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="filtres_autocomplete_administrationIds-control-129"><span>Préfecture de police de Paris</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ <div>
+ <div class="fr-mb-1w fr-text--bold fr-text--md"><label for="filtres_autocomplete_entreprisesIds">Entreprises</label></div>
+ <div class="fr-pb-2w fr-fieldset__element fr-mb-0 fr-pt-0">
+ <!---->
+ <div id="filtres_autocomplete_entreprisesIds_wrapper" class="_typeahead_8eddf1">
+ <div style="display: flex; max-height: unset; flex-wrap: wrap; gap: 8px; outline-offset: 2px; outline-width: 2px; outline-color: rgb(10, 118, 246);" class="fr-input _fake-input_8eddf1"><input id="filtres_autocomplete_entreprisesIds" type="text" name="filtres_autocomplete_entreprisesIds" style="outline: none;" placeholder="Entreprises" autocomplete="off" role="combobox" aria-controls="filtres_autocomplete_entreprisesIds-control" aria-activedescendant="filtres_autocomplete_entreprisesIds-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+ <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="filtres_autocomplete_entreprisesIds-control" role="listbox">
+ <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="filtres_autocomplete_entreprisesIds-control-0"><span>Entreprise1</span></li>
+ </ul>
+ </div>
+ <!---->
+ <!---->
+ </div>
+ </div>
+ </div>
+ <div style="display: flex; justify-content: end;" class="fr-mt-2w"><button class="fr-btn fr-btn--secondary fr-btn--md" title="Réinitialiser les filtres" aria-label="Réinitialiser les filtres" type="button">Réinitialiser les filtres</button></div>
+ </form>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/packages/ui/src/router/camino-router-link.tsx b/packages/ui/src/router/camino-router-link.tsx
index 04396a856..a9b06e25c 100644
--- a/packages/ui/src/router/camino-router-link.tsx
+++ b/packages/ui/src/router/camino-router-link.tsx
@@ -30,6 +30,7 @@ type Props<T extends CaminoRouteNames> = {
title: string
class?: LinkHTMLAttributes['class']
anchorHTMLAttributes?: AnchorHTMLAttributes
+ tabindex?: LinkHTMLAttributes['tabindex']
} & ({ isDisabled: true; to: '' } | { isDisabled: false; to: CaminoVueRoute<T> })
export const CaminoRouterLink = defineComponent(<T extends CaminoRouteNames>(props: Props<T>, ctx: SetupContext) => {
const { href, navigate } = useLink(props)
@@ -42,11 +43,11 @@ export const CaminoRouterLink = defineComponent(<T extends CaminoRouteNames>(pro
})
return () => (
- <a {...props.anchorHTMLAttributes} {...formatedProps.value} title={props.title} class={props.class} aria-label={props.title}>
+ <a {...props.anchorHTMLAttributes} tabindex={props.tabindex} {...formatedProps.value} title={props.title} class={props.class} aria-label={props.title}>
{ctx.slots.default ? ctx.slots.default() : null}
</a>
)
})
// @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-CaminoRouterLink.props = ['to', 'title', 'class', 'isDisabled', 'anchorHTMLAttributes']
+CaminoRouterLink.props = ['to', 'title', 'class', 'isDisabled', 'anchorHTMLAttributes', 'tabindex']
diff --git a/packages/ui/src/router/index.ts b/packages/ui/src/router/index.ts
index 4e31384de..59aadfbc7 100644
--- a/packages/ui/src/router/index.ts
+++ b/packages/ui/src/router/index.ts
@@ -2,9 +2,10 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { Dashboard } from '../components/dashboard'
import { Titres } from '../components/titres'
-import { isNullOrUndefinedOrEmpty } from 'camino-common/src/typescript-tools'
+import { isNotNullNorUndefinedNorEmpty, isNullOrUndefinedOrEmpty } from 'camino-common/src/typescript-tools'
import { CaminoRouteNames, routesDefinitions } from './routes'
import { CaminoFiltre } from 'camino-common/src/filters'
+import { PlanDuSite } from '@/components/page/plan'
const PageIntrouvableAlert = async () => {
const { PageIntrouvableAlert } = await import('@/components/_ui/alert')
@@ -120,7 +121,7 @@ const About = async () => {
return About
}
-export type MenuSection = 'dashboard' | 'titres' | 'demarches' | 'travaux' | 'activites' | 'administrations' | 'entreprises' | 'utilisateurs' | 'metas' | 'statistiques' | 'journaux'
+export type MenuSection = 'dashboard' | 'titres' | 'demarches' | 'travaux' | 'activites' | 'administrations' | 'entreprises' | 'utilisateurs' | 'statistiques' | 'journaux'
declare module 'vue-router' {
interface RouteMeta {
@@ -230,6 +231,10 @@ const routes = {
...routesDefinitions.aPropos,
component: About,
},
+ plan: {
+ ...routesDefinitions.plan,
+ component: PlanDuSite,
+ },
resultatMiseEnConcurrence: {
...routesDefinitions.resultatMiseEnConcurrence,
component: DemarcheResultatMiseEnConcurrence,
@@ -252,7 +257,11 @@ const router = createRouter({
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active',
scrollBehavior(to, from, savedPosition) {
- if (savedPosition) {
+ if (isNotNullNorUndefinedNorEmpty(to.hash)) {
+ return {
+ el: to.hash,
+ }
+ } else if (savedPosition) {
return new Promise(resolve => {
setTimeout(() => {
resolve(savedPosition)
@@ -271,10 +280,17 @@ const router = createRouter({
router.isReady().then(async () => {})
router.beforeEach(async (to, from, next) => {
- document.title = typeof to.meta.title === 'string' ? `${to.meta.title} - Camino` : 'le cadastre minier numérique ouvert - Camino'
+ let title = typeof to.meta.title === 'string' ? `${to.meta.title} - Camino` : 'le cadastre minier numérique ouvert - Camino'
+ for (const param of Object.keys(to.params)) {
+ const paramValue = to.params[param]
+
+ title = title.replaceAll(`{{ ${param} }}`, Array.isArray(paramValue) ? paramValue.join(', ') : paramValue)
+ }
+
+ document.title = title
// Ceci est pour empêcher de nettoyer les filtres quand on clique sur le menu.
// Par exemple sur "titres et autorisations" , après avoir rajouter des filtres, si on clique à nouveau sur le menu, on perd tous les filtres
- if (from.name === to.name && JSON.stringify(to.params) === JSON.stringify(from.params) && isNullOrUndefinedOrEmpty(Object.keys(to.query))) {
+ if (from.name === to.name && JSON.stringify(to.params) === JSON.stringify(from.params) && isNullOrUndefinedOrEmpty(Object.keys(to.query)) && from.hash === to.hash) {
next(false)
} else {
next()
diff --git a/packages/ui/src/router/routes.ts b/packages/ui/src/router/routes.ts
index 25e4413cf..2864313da 100644
--- a/packages/ui/src/router/routes.ts
+++ b/packages/ui/src/router/routes.ts
@@ -31,7 +31,7 @@ const travauxFiltres = [
const administrationsFiltres: readonly CaminoFiltre[] = ['nomsAdministration', 'administrationTypesIds'] as const
// prettier-ignore
-const ROUTES = ['dashboard','statsDGTM','titres','titreCreation','titre','demarches','demarche','travaux','etape','etapeCreation','etapeEdition','resultatMiseEnConcurrence','utilisateurs','utilisateur','entreprises','entreprise','administrations','administration','activites','activite','activiteEdition','statistiques','journaux','statistiquesbetagouv','aPropos','homepage','erreur' ] as const
+const ROUTES = ['dashboard','statsDGTM','titres','titreCreation','titre','demarches','demarche','travaux','etape','etapeCreation','etapeEdition','resultatMiseEnConcurrence','utilisateurs','utilisateur','entreprises','entreprise','administrations','administration','activites','activite','activiteEdition','statistiques','journaux','statistiquesbetagouv','aPropos','plan', 'homepage','erreur' ] as const
type CaminoRoute<T extends CaminoRouteNames> = Pick<RouteRecordRaw, 'path'> & { name: T; meta: RouteMeta }
export const routesDefinitions = {
dashboard: {
@@ -75,7 +75,7 @@ export const routesDefinitions = {
path: '/titres/:id',
name: 'titre',
meta: {
- title: 'Détail du titre',
+ title: 'Détail du titre {{ id }}',
menuSection: 'titres',
filtres: [],
},
@@ -93,7 +93,7 @@ export const routesDefinitions = {
path: '/demarches/:demarcheId',
name: 'demarche',
meta: {
- title: 'Détail de la démarche',
+ title: 'Détail de la démarche {{ demarcheId }}',
menuSection: 'demarches',
filtres: [],
},
@@ -102,7 +102,7 @@ export const routesDefinitions = {
path: '/demarches/:demarcheId/resultat-mise-en-concurrence',
name: 'resultatMiseEnConcurrence',
meta: {
- title: 'Résultat de la mise en concurrence',
+ title: 'Résultat de la mise en concurrence {{ demarcheId }}',
filtres: [],
menuSection: null,
},
@@ -120,7 +120,7 @@ export const routesDefinitions = {
path: '/etapes/:id',
name: 'etape',
meta: {
- title: "Détail d'une étape",
+ title: "Détail de l'étape {{ id }}",
filtres: [],
menuSection: 'titres',
},
@@ -138,7 +138,7 @@ export const routesDefinitions = {
path: '/etapes/:id/edition',
name: 'etapeEdition',
meta: {
- title: "Édition d'une étape",
+ title: "Édition de l'étape {{ id }}",
menuSection: 'titres',
filtres: [],
},
@@ -156,7 +156,7 @@ export const routesDefinitions = {
path: '/utilisateurs/:id',
name: 'utilisateur',
meta: {
- title: "Détail d'un utilisateur",
+ title: "Détail de l'utilisateur {{ id }}",
menuSection: 'utilisateurs',
filtres: [],
},
@@ -174,7 +174,7 @@ export const routesDefinitions = {
path: '/entreprises/:id',
name: 'entreprise',
meta: {
- title: "Détail d'une entreprise",
+ title: "Détail de l'entreprise {{ id }}",
menuSection: 'entreprises',
filtres: [],
},
@@ -192,7 +192,7 @@ export const routesDefinitions = {
path: '/administrations/:id',
name: 'administration',
meta: {
- title: "Détail d'une administration",
+ title: "Détail d'une administration {{ id }}",
menuSection: 'administrations',
filtres: [],
},
@@ -210,7 +210,7 @@ export const routesDefinitions = {
path: '/activites/:activiteId',
name: 'activite',
meta: {
- title: "Détail d'une activité",
+ title: "Détail de l'activité {{ activiteId }}",
menuSection: 'activites',
filtres: [],
},
@@ -219,7 +219,7 @@ export const routesDefinitions = {
path: '/activites/:activiteId/edition',
name: 'activiteEdition',
meta: {
- title: "Édition de l'activité",
+ title: "Édition de l'activité {{ activiteId }}",
menuSection: 'activites',
filtres: [],
},
@@ -229,7 +229,7 @@ export const routesDefinitions = {
name: 'statistiques',
meta: {
menuSection: null,
- title: 'Statistiques',
+ title: 'Statistiques {{ tabId }}',
filtres: [],
},
},
@@ -262,6 +262,15 @@ export const routesDefinitions = {
filtres: [],
},
},
+ plan: {
+ path: '/plan',
+ name: 'plan',
+ meta: {
+ title: 'Plan du site',
+ menuSection: null,
+ filtres: [],
+ },
+ },
homepage: {
path: '/',
name: 'homepage',
diff --git a/packages/ui/src/utils/page-ids.ts b/packages/ui/src/utils/page-ids.ts
new file mode 100644
index 000000000..3f9773891
--- /dev/null
+++ b/packages/ui/src/utils/page-ids.ts
@@ -0,0 +1,6 @@
+export const PAGE_IDS = {
+ contenu: { label: 'Contenu', id: 'main' },
+ menu: { label: 'Menu', id: 'headerNavigationId' },
+ search: { label: 'Recherche', id: 'search-473-input' },
+ footer: { label: 'Pied de page', id: 'footer' },
+}
--
GitLab