From c10c2fc31b2ea62c6358baf74271917a65d9846c Mon Sep 17 00:00:00 2001
From: gregoirenovel <log@kinko.fr>
Date: Wed, 12 Apr 2017 11:12:05 +0200
Subject: [PATCH] Selectors must be written in lowercase with hyphens

---
 app/assets/javascripts/admin.js               | 12 +++----
 .../javascripts/admin_procedures_modal.js     | 16 ++++-----
 app/assets/javascripts/carte/carte.js         |  4 +--
 .../javascripts/channels/notifications.js     |  6 ++--
 app/assets/javascripts/default_data_block.js  | 12 +++----
 app/assets/javascripts/dossiers.js            | 16 ++++-----
 app/assets/javascripts/dossiers_list_link.js  |  2 +-
 .../javascripts/gestionnaire_dossier_modal.js |  8 ++---
 app/assets/javascripts/pref_list_dossier.js   | 18 +++++-----
 app/assets/javascripts/procedure.js           | 16 ++++-----
 app/assets/javascripts/search.js              | 18 +++++-----
 .../stylesheets/admin_procedures_modal.scss   |  6 ++--
 .../stylesheets/admin_type_de_champ.scss      |  8 ++---
 app/assets/stylesheets/application.scss       |  4 +--
 app/assets/stylesheets/backoffice.scss        |  6 ++--
 app/assets/stylesheets/carte.scss             |  6 ++--
 .../stylesheets/default_data_block.scss       |  2 +-
 app/assets/stylesheets/description.scss       | 34 +++++++++----------
 app/assets/stylesheets/dossier_show.scss      |  6 ++--
 app/assets/stylesheets/dossiers.scss          | 16 ++++-----
 app/assets/stylesheets/etapes.scss            |  8 ++---
 .../france_connect_particulier.scss           |  2 +-
 app/assets/stylesheets/landing.scss           |  4 +--
 app/assets/stylesheets/left_panel.scss        |  2 +-
 app/assets/stylesheets/login.scss             |  6 ++--
 app/assets/stylesheets/navbar.scss            | 12 +++----
 .../stylesheets/notification_alert.scss       |  2 +-
 .../pieces_justificatives_fields.scss         |  2 +-
 app/assets/stylesheets/pj_modal.scss          |  4 +--
 app/assets/stylesheets/pref_list_menu.scss    |  2 +-
 app/assets/stylesheets/print.scss             |  6 ++--
 app/assets/stylesheets/procedure.scss         |  6 ++--
 app/assets/stylesheets/recapitulatif.scss     |  2 +-
 app/assets/stylesheets/search.scss            |  4 +--
 app/assets/stylesheets/siret.scss             |  2 +-
 .../stylesheets/support_navigator_banner.scss |  2 +-
 app/assets/stylesheets/switch_menu.scss       |  2 +-
 app/assets/stylesheets/users.scss             | 16 ++++-----
 .../accompagnateurs/_list_assign.html.haml    |  2 +-
 .../_list_not_assign.html.haml                |  2 +-
 app/views/admin/gestionnaires/_list.html.haml |  2 +-
 .../pieces_justificatives/_fields.html.haml   |  2 +-
 .../admin/pieces_justificatives/show.js.erb   |  2 +-
 .../admin/procedures/_informations.html.haml  |  6 ++--
 app/views/admin/procedures/_list.html.haml    |  2 +-
 .../admin/procedures/_modal_publish.html.haml |  6 ++--
 app/views/admin/procedures/index.html.haml    |  4 +--
 app/views/admin/procedures/show.html.haml     |  6 ++--
 .../admin/types_de_champ/_fields.html.haml    |  6 ++--
 app/views/admin/types_de_champ/show.html.haml |  2 +-
 app/views/admin/types_de_champ/show.js.erb    |  6 ++--
 .../administrateurs/sessions/new.html.haml    |  4 +--
 app/views/backoffice/dossiers/_list.html.haml |  2 +-
 .../backoffice/dossiers/_pref_list.html.haml  |  2 +-
 .../backoffice/dossiers/_pref_list.js.erb     |  2 +-
 .../dossiers/formulaire_private.js.erb        |  2 +-
 app/views/backoffice/dossiers/index.html.haml | 12 +++----
 .../backoffice/dossiers/search.html.haml      |  6 ++--
 app/views/backoffice/dossiers/show.html.haml  |  2 +-
 app/views/dossiers/_dossier_show.html.haml    | 12 +++----
 .../dossiers/_download_dossiers.html.haml     |  2 +-
 .../dossiers/_edit_pieces_jointes.html.haml   |  2 +-
 app/views/dossiers/_infos_dossier.html.haml   | 16 ++++-----
 .../dossiers/_infos_pieces_jointes.html.haml  |  6 ++--
 app/views/dossiers/_messagerie.html.haml      |  2 +-
 .../dossiers/_pieces_justificatives.html.haml |  6 ++--
 app/views/dossiers/_show.html.haml            |  4 +--
 app/views/dossiers/add_siret.js.erb           |  6 ++--
 app/views/dossiers/etapes/_etape1.html.haml   |  4 +--
 app/views/dossiers/etapes/_etape3.html.haml   |  4 +--
 app/views/dossiers/etapes/_etape4.html.haml   |  4 +--
 .../etapes/etape_2/_entreprise.html.haml      | 10 +++---
 .../etapes/etape_2/_individual.html.haml      |  2 +-
 app/views/dossiers/new_siret.js.erb           |  6 ++--
 .../particulier/check_email.html.haml         |  2 +-
 .../france_connect/particulier/new.html.haml  |  2 +-
 .../gestionnaires/passwords/edit.html.haml    |  4 +--
 .../gestionnaires/passwords/new.html.haml     |  4 +--
 .../gestionnaires/sessions/new.html.haml      |  4 +--
 app/views/layouts/_navbar.html.haml           |  2 +-
 .../layouts/_notifications_alert.html.haml    |  2 +-
 .../_support_navigator_banner.html.haml       |  2 +-
 .../_switch_devise_profile_module.html.haml   |  2 +-
 app/views/layouts/application.html.haml       |  4 +--
 ...admin_procedurescontroller_index.html.haml |  8 ++---
 ...dmin_procedurescontroller_navbar.html.haml | 18 +++++-----
 ...koffice_dossierscontroller_index.html.haml |  6 ++--
 .../_left_panel_cgucontroller_index.html.haml | 30 ++++++++--------
 ...l_users_dossierscontroller_index.html.haml | 12 +++----
 .../left_panels/_search_area.html.haml        |  4 +--
 ...ssiers_procedurecontroller_index.html.haml |  2 +-
 .../navbars/_navbar_log_options.html.haml     |  8 ++---
 app/views/root/landing.html.haml              |  4 +--
 app/views/users/carte/_map.html.haml          |  2 +-
 app/views/users/carte/show.html.haml          |  4 +--
 app/views/users/description/_champs.html.haml |  2 +-
 app/views/users/description/_show.html.haml   |  4 +--
 .../champs/_header_section.html.haml          |  2 +-
 app/views/users/dossiers/_list.html.haml      |  2 +-
 .../users/dossiers/add_siret/show.html.haml   |  2 +-
 app/views/users/dossiers/index.html.haml      |  4 +--
 app/views/users/passwords/edit.html.haml      |  4 +--
 app/views/users/passwords/new.html.haml       |  4 +--
 .../recapitulatif/_modal_upload_pj.html.haml  |  2 +-
 app/views/users/recapitulatif/show.html.haml  |  2 +-
 app/views/users/registrations/new.html.haml   |  4 +--
 .../sessions/_resume_procedure.html.haml      |  2 +-
 app/views/users/sessions/new.html.haml        | 21 ++++++------
 app/views/users/siret/_pro.html.haml          |  2 +-
 app/views/users/siret/index.html.haml         |  2 +-
 spec/features/admin/connection_spec.rb        |  8 ++---
 spec/features/backoffice/connection_spec.rb   |  2 +-
 .../backoffice/index_show_procedure_spec.rb   | 14 ++++----
 ..._page_pref_list_dossier_backoffice_spec.rb | 12 +++----
 ...st_dossier_by_procedure_backoffice_spec.rb | 12 +++----
 .../backoffice/navigate_to_dossier_spec.rb    |  4 +--
 spec/features/backoffice/search_file_spec.rb  |  4 +--
 .../upload_piece_justificative_spec.rb        |  4 +--
 .../france_connect_particulier_spec.rb        | 10 +++---
 spec/features/users/complete_demande_spec.rb  | 18 +++++-----
 spec/features/users/dossier_creation_spec.rb  |  6 ++--
 spec/features/users/dossier_edition_spec.rb   |  2 +-
 spec/features/users/dossier_index_spec.rb     | 20 +++++------
 .../drawing_a_zone_with_freedraw_spec.rb      |  6 ++--
 spec/features/users/list_dossiers_spec.rb     |  4 +--
 spec/features/users/onglets_link_spec.rb      |  8 ++---
 spec/features/users/start_demande_spec.rb     |  8 ++---
 .../dossiers/show.html.html_spec.rb           |  4 +--
 .../recapitulatif/show.html.haml_spec.rb      |  4 +--
 .../users/sessions/new.html.haml_spec.rb      |  6 ++--
 .../views/users/siret/index.html.haml_spec.rb |  2 +-
 131 files changed, 405 insertions(+), 404 deletions(-)

diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index 435a42006..5284d467d 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -16,27 +16,27 @@ function destroy_action(){
     $(this).closest('td').find(".confirm").hide();
   });
 
-  $("#liste_gestionnaire #libelle").on('click', function(){
+  $("#liste-gestionnaire #libelle").on('click', function(){
     setTimeout(destroy_action, 500);
   });
 }
 
 function on_change_type_de_champ_select (){
-  $("select.form-control.type_champ").on('change', function(e){
+  $("select.form-control.type-champ").on('change', function(e){
 
     parent = $(this).parent().parent();
 
-    parent.removeClass('header_section');
-    parent.children(".drop_down_list").removeClass('show_inline');
+    parent.removeClass('header-section');
+    parent.children(".drop-down-list").removeClass('show-inline');
     $('.mandatory', parent).show();
 
     switch(this.value){
       case 'header_section':
-        parent.addClass('header_section');
+        parent.addClass('header-section');
         break;
       case 'drop_down_list':
       case 'multiple_drop_down_list':
-        parent.children(".drop_down_list").addClass('show_inline');
+        parent.children(".drop-down-list").addClass('show-inline');
         break;
       case 'explication':
         $('.mandatory', parent).hide();
diff --git a/app/assets/javascripts/admin_procedures_modal.js b/app/assets/javascripts/admin_procedures_modal.js
index b5059bf29..342cc64f5 100644
--- a/app/assets/javascripts/admin_procedures_modal.js
+++ b/app/assets/javascripts/admin_procedures_modal.js
@@ -8,16 +8,16 @@ function init_path_modal() {
 }
 
 function path_modal_action() {
-  $('#publishModal').on('show.bs.modal', function (event) {
-    $("#publishModal .modal-body .table .tr_content").hide();
+  $('#publish-modal').on('show.bs.modal', function (event) {
+    $("#publish-modal .modal-body .table .tr-content").hide();
 
     var button = $(event.relatedTarget) // Button that triggered the modal
     var modal_title = button.data('modal_title'); // Extract info from data-* attributes
     var modal_index = button.data('modal_index'); // Extract info from data-* attributes
 
     var modal = $(this)
-    modal.find('#publishModal_title').html(modal_title);
-    $("#publishModal .modal-body .table #"+modal_index).show();
+    modal.find('#publish-modal-title').html(modal_title);
+    $("#publish-modal .modal-body .table #"+modal_index).show();
   })
 }
 
@@ -29,7 +29,7 @@ function path_validation_action() {
 }
 
 function togglePathMessage(valid, mine) {
-  $('#path_messages .message').hide();
+  $('#path-messages .message').hide();
 
   if (valid === true && mine === true) {
     $('#path_is_mine').show();
@@ -40,9 +40,9 @@ function togglePathMessage(valid, mine) {
   }
 
   if ((valid && mine === null) || mine === true)
-    $('#publishModal #publish').removeAttr('disabled')
+    $('#publish-modal #publish').removeAttr('disabled')
   else
-    $('#publishModal #publish').attr('disabled', 'disabled')
+    $('#publish-modal #publish').attr('disabled', 'disabled')
 }
 
 function path_validation(el) {
@@ -77,7 +77,7 @@ function path_type_init() {
     source: bloodhound,
     templates: {
       empty: 'Ce lien est disponible !',
-      suggestion: Handlebars.compile("<div class='path_mine_{{mine}}'>{{label}}</div>")
+      suggestion: Handlebars.compile("<div class='path-mine-{{mine}}'>{{label}}</div>")
     },
     limit: 5
   });
diff --git a/app/assets/javascripts/carte/carte.js b/app/assets/javascripts/carte/carte.js
index 6966e3791..5ce16d28f 100644
--- a/app/assets/javascripts/carte/carte.js
+++ b/app/assets/javascripts/carte/carte.js
@@ -152,11 +152,11 @@ function jsObject_to_array(qp_list) {
 }
 
 function add_event_search_address() {
-  $("#search_by_address input[type='address']").bind('typeahead:select', function (ev, seggestion) {
+  $("#search-by-address input[type='address']").bind('typeahead:select', function (ev, seggestion) {
     get_address_point(seggestion['label']);
   });
 
-  $("#search_by_address input[type='address']").keypress(function (e) {
+  $("#search-by-address input[type='address']").keypress(function (e) {
     if (e.keyCode == 13)
       get_address_point($(this).val());
   });
diff --git a/app/assets/javascripts/channels/notifications.js b/app/assets/javascripts/channels/notifications.js
index 7a76c26b6..f1f2d519d 100644
--- a/app/assets/javascripts/channels/notifications.js
+++ b/app/assets/javascripts/channels/notifications.js
@@ -1,7 +1,7 @@
 //App.messages = App.cable.subscriptions.create('NotificationsChannel', {
 //  received: function (data) {
 //    if (window.location.href.indexOf('backoffice') !== -1) {
-//      $("#notification_alert").html(data['message']);
+//      $("#notification-alert").html(data['message']);
 //
 //      slideIn_notification_alert();
 //    }
@@ -9,7 +9,7 @@
 //});
 
 function slideIn_notification_alert (){
-  $("#notification_alert").animate({
+  $("#notification-alert").animate({
     right: '20px'
   }, 250);
 
@@ -17,7 +17,7 @@ function slideIn_notification_alert (){
 }
 
 function slideOut_notification_alert (){
-  $("#notification_alert").animate({
+  $("#notification-alert").animate({
     right: '-250px'
   }, 200);
 }
diff --git a/app/assets/javascripts/default_data_block.js b/app/assets/javascripts/default_data_block.js
index 107681782..071d07bb0 100644
--- a/app/assets/javascripts/default_data_block.js
+++ b/app/assets/javascripts/default_data_block.js
@@ -1,20 +1,20 @@
 $(document).on('turbolinks:load', init_default_data_block);
 
 function init_default_data_block() {
-  $('.default_data_block #dossier .body').toggle();
-  $('.default_data_block #dossier .carret-right').toggle();
-  $('.default_data_block #dossier .carret-down').toggle();
+  $('.default-data-block #dossier .body').toggle();
+  $('.default-data-block #dossier .carret-right').toggle();
+  $('.default-data-block #dossier .carret-down').toggle();
 
-  $('.default_data_block .title').click(function () {
+  $('.default-data-block .title').click(function () {
     toggle_default_data_bloc(this, 400);
   });
 
   $('.new-action').click(function () {
-    var messages_block = $(this).parents().closest('.default_data_block').find('.title')
+    var messages_block = $(this).parents().closest('.default-data-block').find('.title')
     toggle_default_data_bloc(messages_block, 400);
   });
 
-  $('.default_data_block.default_visible').each(function() {
+  $('.default-data-block.default_visible').each(function() {
     toggle_default_data_bloc($(this).find('.title'), 0);
   });
 
diff --git a/app/assets/javascripts/dossiers.js b/app/assets/javascripts/dossiers.js
index 4e0d1836c..401eca7f8 100644
--- a/app/assets/javascripts/dossiers.js
+++ b/app/assets/javascripts/dossiers.js
@@ -3,14 +3,14 @@ $(document).on('turbolinks:load', pannel_switch);
 
 function pannel_switch() {
   $('#switch-notifications').click(function () {
-    $('#procedure_list').addClass('hidden');
-    $('#notifications_list').removeClass('hidden');
+    $('#procedure-list').addClass('hidden');
+    $('#notifications-list').removeClass('hidden');
     $(this).addClass('active');
     $('#switch-procedures').removeClass('active');
   })
   $('#switch-procedures').click(function () {
-    $('#notifications_list').addClass('hidden');
-    $('#procedure_list').removeClass('hidden');
+    $('#notifications-list').addClass('hidden');
+    $('#procedure-list').removeClass('hidden');
     $(this).addClass('active');
     $('#switch-notifications').removeClass('active');
   })
@@ -44,16 +44,16 @@ function error_form_siret(invalid_siret) {
 
   $("input[type='submit']").removeClass('btn-success').addClass('btn-danger');
 
-  $("#dossier_siret").addClass('input-error').val(invalid_siret).on('input', reset_form_siret);
+  $("#dossier-siret").addClass('input-error').val(invalid_siret).on('input', reset_form_siret);
 
 }
 
 function reset_form_siret() {
   $("input[type='submit']").removeClass('btn-danger').addClass('btn-success').val('Valider');
-  $("#dossier_siret").removeClass('input-error');
+  $("#dossier-siret").removeClass('input-error');
 }
 
 function toggle_etape_1() {
-  $('.row.etape.etape_1 .etapes_menu #logos').toggle(100);
-  $('.row.etape.etape_1 .etapes_informations #description_procedure').toggle(100);
+  $('.row.etape.etape_1 .etapes-menu #logos').toggle(100);
+  $('.row.etape.etape_1 .etapes-informations #description_procedure').toggle(100);
 }
diff --git a/app/assets/javascripts/dossiers_list_link.js b/app/assets/javascripts/dossiers_list_link.js
index 147e109a3..cf2d74859 100644
--- a/app/assets/javascripts/dossiers_list_link.js
+++ b/app/assets/javascripts/dossiers_list_link.js
@@ -1,7 +1,7 @@
 $(document).on('turbolinks:load', link_init);
 
 function link_init() {
-  $('#dossiers_list tr').on('click', function () {
+  $('#dossiers-list tr').on('click', function () {
     $(location).attr('href', $(this).data('dossier_url'))
   });
 }
diff --git a/app/assets/javascripts/gestionnaire_dossier_modal.js b/app/assets/javascripts/gestionnaire_dossier_modal.js
index bb02ca501..65ca00dbb 100644
--- a/app/assets/javascripts/gestionnaire_dossier_modal.js
+++ b/app/assets/javascripts/gestionnaire_dossier_modal.js
@@ -1,15 +1,15 @@
 $(document).on('turbolinks:load', modal_action);
 
 function modal_action() {
-  $('#PJmodal').on('show.bs.modal', function (event) {
-    $("#PJmodal .modal-body .table .tr_content").hide();
+  $('#pj-modal').on('show.bs.modal', function (event) {
+    $("#pj-modal .modal-body .table .tr-content").hide();
 
     var button = $(event.relatedTarget) // Button that triggered the modal
     var modal_title = button.data('modal_title'); // Extract info from data-* attributes
     var modal_index = button.data('modal_index'); // Extract info from data-* attributes
 
     var modal = $(this)
-    modal.find('#PJmodal_title').html(modal_title);
-    $("#PJmodal .modal-body .table #"+modal_index).show();
+    modal.find('#pj-modal-title').html(modal_title);
+    $("#pj-modal .modal-body .table #"+modal_index).show();
   })
 }
diff --git a/app/assets/javascripts/pref_list_dossier.js b/app/assets/javascripts/pref_list_dossier.js
index 21e7966df..1e81e3eee 100644
--- a/app/assets/javascripts/pref_list_dossier.js
+++ b/app/assets/javascripts/pref_list_dossier.js
@@ -6,25 +6,25 @@ function pref_list_dossier_actions() {
 }
 
 function pref_list_dossier_open_action() {
-  $("#pref_list_dossier_open_action").on('click', function () {
-    $("#pref_list_menu").css('display', 'block');
-    $("#pref_list_menu").css('visibility', 'visible');
+  $("#pref-list-dossier-open-action").on('click', function () {
+    $("#pref-list-menu").css('display', 'block');
+    $("#pref-list-menu").css('visibility', 'visible');
 
-    $("#pref_list_menu").animate({
+    $("#pref-list-menu").animate({
       right: 0
     }, 250);
   });
 }
 
 function pref_list_dossier_close_action() {
-  $("#pref_list_dossier_close_action").on('click', function () {
-    $("#pref_list_menu").animate({
-        right: parseInt($("#pref_list_menu").css('width'), 10)*(-1)+'px'
+  $("#pref-list-dossier-close-action").on('click', function () {
+    $("#pref-list-menu").animate({
+        right: parseInt($("#pref-list-menu").css('width'), 10)*(-1)+'px'
       },{
         duration: 250,
         complete: function () {
-          $("#pref_list_menu").css('display', 'none');
-          $("#pref_list_menu").css('visibility', 'hidden');
+          $("#pref-list-menu").css('display', 'none');
+          $("#pref-list-menu").css('visibility', 'hidden');
         }
       }
     )
diff --git a/app/assets/javascripts/procedure.js b/app/assets/javascripts/procedure.js
index d4f89f012..c2bcffb54 100644
--- a/app/assets/javascripts/procedure.js
+++ b/app/assets/javascripts/procedure.js
@@ -8,30 +8,30 @@ function button_edit_procedure_init(){
 
 function buttons_api_carto () {
 
-  $("#procedure_module_api_carto_use_api_carto").on('change', function() {
-    $("#modules_api_carto").toggle()
+  $("#procedure-module-api-carto-use-api-carto").on('change', function() {
+    $("#modules-api-carto").toggle()
   });
 
-  if ($('#procedure_module_api_carto_use_api_carto').is(':checked'))
-    $("#modules_api_carto").show();
+  if ($('#procedure-module-api-carto-use-api-carto').is(':checked'))
+    $("#modules-api-carto").show();
 }
 
 function button_cerfa () {
 
   $("#procedure_cerfa_flag").on('change', function() {
-    $("#procedure_lien_demarche").toggle()
+    $("#procedure-lien-demarche").toggle()
   });
 
   if ($('#procedure_cerfa_flag').is(':checked'))
-    $("#procedure_lien_demarche").show();
+    $("#procedure-lien-demarche").show();
 }
 
 function button_individual () {
 
   $("#procedure_for_individual").on('change', function() {
-    $("#individual_with_siret").toggle()
+    $("#individual-with-siret").toggle()
   });
 
   if ($('#procedure_for_individual').is(':checked'))
-    $("#individual_with_siret").show();
+    $("#individual-with-siret").show();
 }
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index bfbc7aded..eb61ae055 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,11 +1,11 @@
 $(document).on('turbolinks:load', init_search_anim);
 
 function init_search_anim(){
-  $("#search_area").on('click', search_fadeIn);
+  $("#search-area").on('click', search_fadeIn);
 }
 
 function search_fadeIn(){
-  var search_area = $("#search_area");
+  var search_area = $("#search-area");
   var body_dom = $('body');
   var positions = search_area.position();
   var width = search_area.width();
@@ -16,10 +16,10 @@ function search_fadeIn(){
   search_area.css('z-index', 300);
   search_area.css('width', width);
   search_area.find('#q').animate({ height: '50px' });
-  search_area.find('#search_button').animate({ height: '50px' });
+  search_area.find('#search-button').animate({ height: '50px' });
 
   body_dom.append(search_area);
-  $('#mask_search').fadeIn(200);
+  $('#mask-search').fadeIn(200);
 
   var body_width = body_dom.width();
 
@@ -30,16 +30,16 @@ function search_fadeIn(){
     left: (body_width/2 - search_area_width/2 + 40)
   }, 400, function() {
     search_area.off();
-    $("#search_area input").focus();
+    $("#search-area input").focus();
 
-    $('#mask_search').on('click', search_fadeOut)
+    $('#mask-search').on('click', search_fadeOut)
   });
 }
 
 function search_fadeOut(){
-  var search_area = $("#search_area");
+  var search_area = $("#search-area");
 
-  $('#mask_search').fadeOut(200);
+  $('#mask-search').fadeOut(200);
 
   search_area.fadeOut(200, function(){
     search_area.css('position', 'static');
@@ -48,7 +48,7 @@ function search_fadeOut(){
     search_area.css('z-index', '');
     search_area.css('width', 'auto');
     search_area.find('#q').css('height', 34);
-    search_area.find('#search_button').css('height', 34);
+    search_area.find('#search-button').css('height', 34);
 
     $('#search-block').append(search_area);
     search_area.fadeIn(200);
diff --git a/app/assets/stylesheets/admin_procedures_modal.scss b/app/assets/stylesheets/admin_procedures_modal.scss
index 901d68c27..6c1cf1497 100644
--- a/app/assets/stylesheets/admin_procedures_modal.scss
+++ b/app/assets/stylesheets/admin_procedures_modal.scss
@@ -1,14 +1,14 @@
-.path_mine_false {
+.path-mine-false {
   color: #FF0000;
 }
 
-#path_messages {
+#path-messages {
   .message {
     display: none;
   }
 }
 
-#publishModal {
+#publish-modal {
   .twitter-typeahead {
     width: 300px;
   }
diff --git a/app/assets/stylesheets/admin_type_de_champ.scss b/app/assets/stylesheets/admin_type_de_champ.scss
index 6c8a5ffcb..5fc7aa54b 100644
--- a/app/assets/stylesheets/admin_type_de_champ.scss
+++ b/app/assets/stylesheets/admin_type_de_champ.scss
@@ -1,4 +1,4 @@
-.header_section {
+.header-section {
   background-color: rgb(0, 49, 137);
   margin-top: 20px;
   margin-bottom: 10px;
@@ -22,16 +22,16 @@
   }
 }
 
-#liste_champ {
+#liste-champ {
   .form-inline {
     margin-bottom: 30px;
   }
 
-  .show_inline {
+  .show-inline {
     display: inline-block !important;
   }
 
-  .form-group.drop_down_list {
+  .form-group.drop-down-list {
     display: none;
   }
 
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 3646321b5..135e0a776 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -84,7 +84,7 @@ form {
   }
 }
 
-.beta_staging {
+.beta-staging {
   background-color: #B00100 !important;
 }
 
@@ -151,7 +151,7 @@ div.pagination {
   margin-bottom: 0px;
 }
 
-.alert.alert-success.move_up,
+.alert.alert-success.move-up,
 .alert.alert-danger.siret {
   position: fixed;
   top: 0px;
diff --git a/app/assets/stylesheets/backoffice.scss b/app/assets/stylesheets/backoffice.scss
index 503233dcd..cdbe3fa52 100644
--- a/app/assets/stylesheets/backoffice.scss
+++ b/app/assets/stylesheets/backoffice.scss
@@ -1,9 +1,9 @@
-#backoffice_index,
-#backoffice_search {
+#backoffice-index,
+#backoffice-search {
   margin-left: 2rem;
   margin-right: 2rem;
 
-  .default_data_block {
+  .default-data-block {
     background-color: #FFFFFF;
     margin-top: 20px;
 
diff --git a/app/assets/stylesheets/carte.scss b/app/assets/stylesheets/carte.scss
index 7f492169a..8220729ad 100644
--- a/app/assets/stylesheets/carte.scss
+++ b/app/assets/stylesheets/carte.scss
@@ -3,7 +3,7 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 @import "bootstrap";
 
-#carte_page {
+#carte-page {
   #map {
     margin-left: 15px;
     width: 90%;
@@ -32,7 +32,7 @@
   cursor: url("/assets/edit.png"), default !important;
 }
 
-#infos_dossier {
+#infos-dossiers {
   #map.mini {
     height: 300px;
     width: 100%;
@@ -120,7 +120,7 @@
   color: #777777;
 }
 
-#search_by_address {
+#search-by-address {
   .twitter-typeahead {
     width: 555px;
   }
diff --git a/app/assets/stylesheets/default_data_block.scss b/app/assets/stylesheets/default_data_block.scss
index 237eaaf17..339af02f8 100644
--- a/app/assets/stylesheets/default_data_block.scss
+++ b/app/assets/stylesheets/default_data_block.scss
@@ -1,6 +1,6 @@
 @import "variables";
 
-.default_data_block {
+.default-data-block {
   font-family: Arial;
 
   .show-block {
diff --git a/app/assets/stylesheets/description.scss b/app/assets/stylesheets/description.scss
index 5eea3b4c7..6ad2f4339 100644
--- a/app/assets/stylesheets/description.scss
+++ b/app/assets/stylesheets/description.scss
@@ -1,9 +1,9 @@
 @import "bootstrap";
 @import "bootstrap-datepicker3";
 
-#description_page #liste_champs {
+#description-page #liste-champs {
 
-  .default_data_block {
+  .default-data-block {
     .show-block {
       width: 90%;
 
@@ -28,7 +28,7 @@
   border-color: #8B0000 !important;
 }
 
-.type_champ-text {
+.type-champ-text {
   @extend .col-md-6;
   @extend .col-lg-6;
 
@@ -37,12 +37,12 @@
   }
 }
 
-.type_champ-header_section {
+.type-champ-header-section {
   @extend .col-md-12;
   @extend .col-lg-12;
 }
 
-.type_champ-address {
+.type-champ-address {
   @extend .col-md-6;
   @extend .col-lg-6;
 
@@ -60,7 +60,7 @@
   }
 }
 
-.type_champ-email {
+.type-champ-email {
   @extend .col-md-4;
   @extend .col-lg-4;
 
@@ -69,26 +69,26 @@
   }
 }
 
-.type_champ-drop_down_list,
-.type_champ-regions,
-.type_champ-departements,
-.type_champ-pays {
+.type-champ-drop-down-list,
+.type-champ-regions,
+.type-champ-departements,
+.type-champ-pays {
   @extend .col-md-4;
   @extend .col-lg-4;
 
 }
 
-.type_champ-civilite {
+.type-champ-civilite {
   @extend .col-md-3;
   @extend .col-lg-3;
 }
 
-.type_champ-yes_no {
+.type-champ-yes-no {
   @extend .col-md-3;
   @extend .col-lg-3;
 }
 
-.type_champ-phone {
+.type-champ-phone {
   @extend .col-md-2;
   @extend .col-lg-2;
 
@@ -102,7 +102,7 @@
   text-decoration: underline;
 }
 
-.type_champ-textarea {
+.type-champ-textarea {
   @extend .col-md-8;
   @extend .col-lg-8;
 
@@ -112,7 +112,7 @@
   }
 }
 
-.type_champ-number {
+.type-champ-number {
   @extend .col-md-3;
   @extend .col-lg-3;
 
@@ -121,7 +121,7 @@
   }
 }
 
-.type_champ-date {
+.type-champ-date {
   @extend .col-md-2;
   @extend .col-lg-2;
 
@@ -130,7 +130,7 @@
   }
 }
 
-.type_champ-datetime {
+.type-champ-datetime {
   @extend .col-md-5;
   @extend .col-lg-5;
 
diff --git a/app/assets/stylesheets/dossier_show.scss b/app/assets/stylesheets/dossier_show.scss
index d7c77f88e..93f8ba5a5 100644
--- a/app/assets/stylesheets/dossier_show.scss
+++ b/app/assets/stylesheets/dossier_show.scss
@@ -1,5 +1,5 @@
-#backoffice_dossier_show,
-#users_recapitulatif_dossier_show {
+#backoffice-dossier-show,
+#users-recapitulatif-dossier-show {
 
   #messages {
     .last-commentaire {
@@ -199,7 +199,7 @@
       }
     }
 
-    #pieces_justificatives {
+    #pieces-justificatives {
       .piece-row {
         margin: 0 0 0 0;
       }
diff --git a/app/assets/stylesheets/dossiers.scss b/app/assets/stylesheets/dossiers.scss
index 755323661..5a59dd7a8 100644
--- a/app/assets/stylesheets/dossiers.scss
+++ b/app/assets/stylesheets/dossiers.scss
@@ -6,7 +6,7 @@ h5 span {
   font-weight: normal;
 }
 
-#insee_infogreffe {
+#insee-infogreffe {
   font-size: 17px;
 }
 
@@ -23,7 +23,7 @@ h5 span {
   }
 }
 
-#dossiers_list {
+#dossiers-list {
   .filter {
     cursor: pointer;
     font-size: 1.1em;
@@ -31,13 +31,13 @@ h5 span {
   }
 }
 
-#dossiers_list tr:hover {
+#dossiers-list tr:hover {
   background-color: #EEEEEE;
   cursor: pointer;
 }
 
-#procedure_list,
-#notifications_list {
+#procedure-list,
+#notifications-list {
   margin-left: -10px;
   margin-top: 20px;
 
@@ -47,12 +47,12 @@ h5 span {
     text-decoration: none;
   }
 
-  .procedure_list_element.active,
+  .procedure-list-element.active,
   .notification.active {
     background-color: #668ABD;
   }
 
-  .procedure_list_element,
+  .procedure-list-element,
   .notification {
     padding: 15px 40px 15px 20px;
     cursor: pointer;
@@ -63,7 +63,7 @@ h5 span {
     }
   }
 
-  .procedure_list_element:hover,
+  .procedure-list-element:hover,
   .notification:hover {
     background-color: #668ABD;
     cursor: pointer;
diff --git a/app/assets/stylesheets/etapes.scss b/app/assets/stylesheets/etapes.scss
index 58ed601f4..2ff84fa6f 100644
--- a/app/assets/stylesheets/etapes.scss
+++ b/app/assets/stylesheets/etapes.scss
@@ -1,6 +1,6 @@
-.etape_2 {
-  .etapes_menu {
-    #dossier_siret {
+.etape-2 {
+  .etapes-menu {
+    #dossier-siret {
       width: 200px;
     }
 
@@ -9,7 +9,7 @@
     }
   }
 
-  .etapes_informations {
+  .etapes-informations {
     padding-top: 15px;
   }
 }
diff --git a/app/assets/stylesheets/france_connect_particulier.scss b/app/assets/stylesheets/france_connect_particulier.scss
index 03d671366..72025e3a3 100644
--- a/app/assets/stylesheets/france_connect_particulier.scss
+++ b/app/assets/stylesheets/france_connect_particulier.scss
@@ -1,4 +1,4 @@
-#france_connect_particulier_email {
+#france-connect-particulier-email {
   width: 300px;
   margin-left: auto;
   margin-right: auto;
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index 703464480..de55f5732 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -38,7 +38,7 @@
   color: #FFFFFF;
 }
 
-#landing_body {
+#landing-body {
   .split-hr-left {
     margin-left: auto;
     margin-right: auto;
@@ -51,7 +51,7 @@
   }
 
   #etapes,
-  #request_access {
+  #request-access {
     margin-top: 20px;
     margin-bottom: 20px;
   }
diff --git a/app/assets/stylesheets/left_panel.scss b/app/assets/stylesheets/left_panel.scss
index 8d17f86a7..02658aab1 100644
--- a/app/assets/stylesheets/left_panel.scss
+++ b/app/assets/stylesheets/left_panel.scss
@@ -198,7 +198,7 @@
       margin-right: auto;
     }
 
-    #notifications_list {
+    #notifications-list {
       .no-notification {
         margin: 0 30px 0 30px;
       }
diff --git a/app/assets/stylesheets/login.scss b/app/assets/stylesheets/login.scss
index c3d162d47..6be7b6cb3 100644
--- a/app/assets/stylesheets/login.scss
+++ b/app/assets/stylesheets/login.scss
@@ -1,4 +1,4 @@
-#form_login {
+#form-login {
   text-align: center;
   max-width: 500px;
 
@@ -7,14 +7,14 @@
 
   padding: 20px;
 
-  .btn_fc {
+  .btn-fc {
 
     img {
       height: 100px;
     }
   }
 
-  #new_user {
+  #new-user {
     width: 80%;
     margin-left: auto;
     margin-right: auto;
diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
index 88cd3dbcd..612532c27 100644
--- a/app/assets/stylesheets/navbar.scss
+++ b/app/assets/stylesheets/navbar.scss
@@ -9,7 +9,7 @@
   border-radius: 0;
   height: 60px;
 
-  #title_navbar {
+  #title-navbar {
     color: #FFFFFF;
     font-weight: bold;
     font-size: 1.8em;
@@ -17,7 +17,7 @@
     overflow: hidden;
   }
 
-  #title_navbar:hover {
+  #title-navbar:hover {
     text-decoration: none;
   }
 
@@ -96,7 +96,7 @@
       }
     }
 
-    #sign_in {
+    #sign-in {
       margin-top: 7px;
 
       .btn {
@@ -105,7 +105,7 @@
       }
     }
 
-    #sign_out {
+    #sign-out {
       height: 60px;
 
       .fa {
@@ -177,7 +177,7 @@
   z-index: 10;
 }
 
-.button_navbar {
+.button-navbar {
   color: #666666;
   cursor: pointer;
 }
@@ -202,7 +202,7 @@
   color: $light-blue;
 }
 
-.button_navbar:hover,
+.button-navbar:hover,
 .button-navbar-action:hover {
   text-decoration: none;
 }
diff --git a/app/assets/stylesheets/notification_alert.scss b/app/assets/stylesheets/notification_alert.scss
index fbcd63efd..49e7d4893 100644
--- a/app/assets/stylesheets/notification_alert.scss
+++ b/app/assets/stylesheets/notification_alert.scss
@@ -1,4 +1,4 @@
-#notification_alert {
+#notification-alert {
   position: fixed;
   top: 20px;
   right: -250px;
diff --git a/app/assets/stylesheets/pieces_justificatives_fields.scss b/app/assets/stylesheets/pieces_justificatives_fields.scss
index 12a88199c..7cf6d8719 100644
--- a/app/assets/stylesheets/pieces_justificatives_fields.scss
+++ b/app/assets/stylesheets/pieces_justificatives_fields.scss
@@ -1,3 +1,3 @@
-.pieces_justificatives_fields {
+.pieces-justificatives-fields {
   .form-inline > .form-group { vertical-align: top; }
 }
diff --git a/app/assets/stylesheets/pj_modal.scss b/app/assets/stylesheets/pj_modal.scss
index 4f3ab1c4b..deba37dfc 100644
--- a/app/assets/stylesheets/pj_modal.scss
+++ b/app/assets/stylesheets/pj_modal.scss
@@ -1,7 +1,7 @@
-#PJmodal {
+#pj-modal {
   .modal-body {
     .table {
-      .tr_content {
+      .tr-content {
         display: none;
       }
     }
diff --git a/app/assets/stylesheets/pref_list_menu.scss b/app/assets/stylesheets/pref_list_menu.scss
index d087da79c..11920ade8 100644
--- a/app/assets/stylesheets/pref_list_menu.scss
+++ b/app/assets/stylesheets/pref_list_menu.scss
@@ -1,4 +1,4 @@
-#pref_list_menu {
+#pref-list-menu {
   z-index: 100;
   display: none;
   position: fixed;
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 583676e89..4d0ef86b3 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -4,15 +4,15 @@
     margin: 0;
   }
 
-  #infos_dossier .row:last-child {
+  #infos-dossiers .row:last-child {
     display: none;
   }
 
-  #infos_dossier {
+  #infos-dossiers {
     margin-bottom: -70px;
   }
 
-  #backoffice_dossier_show .nav-tabs {
+  #backoffice-dossier-show .nav-tabs {
     display: none;
   }
 
diff --git a/app/assets/stylesheets/procedure.scss b/app/assets/stylesheets/procedure.scss
index 2bc5b4e87..b1e5194f5 100644
--- a/app/assets/stylesheets/procedure.scss
+++ b/app/assets/stylesheets/procedure.scss
@@ -1,12 +1,12 @@
-#modules_api_carto {
+#modules-api-carto {
   display: none;
 }
 
-#procedure_lien_demarche {
+#procedure-lien-demarche {
   display: none;
 }
 
-#individual_with_siret {
+#individual-with-siret {
   display: none;
 }
 
diff --git a/app/assets/stylesheets/recapitulatif.scss b/app/assets/stylesheets/recapitulatif.scss
index 7d81a7c46..7a07fbd75 100644
--- a/app/assets/stylesheets/recapitulatif.scss
+++ b/app/assets/stylesheets/recapitulatif.scss
@@ -1,4 +1,4 @@
-#UploadPJmodal {
+#upload-pj-modal {
   text-align: left;
 
   table {
diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss
index af9a8e362..26e91409a 100644
--- a/app/assets/stylesheets/search.scss
+++ b/app/assets/stylesheets/search.scss
@@ -3,11 +3,11 @@
   height: 30px;
 }
 
-#search_button {
+#search-button {
   height: 34px;
 }
 
-#mask_search {
+#mask-search {
   display: none;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.4);
diff --git a/app/assets/stylesheets/siret.scss b/app/assets/stylesheets/siret.scss
index c5eac6f02..e5bdf2050 100644
--- a/app/assets/stylesheets/siret.scss
+++ b/app/assets/stylesheets/siret.scss
@@ -6,7 +6,7 @@
   display: none;
 }
 
-#titre_procedure {
+#titre-procedure {
   margin-top: 3%;
   margin-bottom: 2%;
 }
diff --git a/app/assets/stylesheets/support_navigator_banner.scss b/app/assets/stylesheets/support_navigator_banner.scss
index 9371dd4d2..bfb8a21fe 100644
--- a/app/assets/stylesheets/support_navigator_banner.scss
+++ b/app/assets/stylesheets/support_navigator_banner.scss
@@ -1,4 +1,4 @@
-#support_navigator_banner {
+#support-navigator-banner {
   position: fixed;
   text-align: center;
   line-height: 2em;
diff --git a/app/assets/stylesheets/switch_menu.scss b/app/assets/stylesheets/switch_menu.scss
index 49fb5289c..e9c18733c 100644
--- a/app/assets/stylesheets/switch_menu.scss
+++ b/app/assets/stylesheets/switch_menu.scss
@@ -1,4 +1,4 @@
-#switch_menu {
+#switch-menu {
   position: fixed;
   left: 10px;
   bottom: 10px;
diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss
index e4988dbb3..393083a74 100644
--- a/app/assets/stylesheets/users.scss
+++ b/app/assets/stylesheets/users.scss
@@ -1,11 +1,11 @@
 @import "variables";
 
-#users_index,
-#admins_index {
+#users-index,
+#admins-index {
   margin-left: 2rem;
   margin-right: 2rem;
 
-  .default_data_block {
+  .default-data-block {
     margin-top: 20px;
     background-color: #FFFFFF;
 
@@ -19,11 +19,11 @@
   }
 }
 
-#users_siret_index {
+#users-siret-index {
   margin: 20px;
 }
 
-#carto_page {
+#carto-page {
   margin: 20px;
 }
 
@@ -36,9 +36,9 @@
 }
 
 .white-back,
-#users_siret_index,
-#description_page,
-#carto_page {
+#users-siret-index,
+#description-page,
+#carto-page {
   background-color: #FFFFFF;
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
   padding: 20px;
diff --git a/app/views/admin/accompagnateurs/_list_assign.html.haml b/app/views/admin/accompagnateurs/_list_assign.html.haml
index faeec752d..d685264e4 100644
--- a/app/views/admin/accompagnateurs/_list_assign.html.haml
+++ b/app/views/admin/accompagnateurs/_list_assign.html.haml
@@ -1,7 +1,7 @@
 .row{ style: 'height: 34px;' }
 
 - unless smart_listing.empty?
-  %table.table#liste_gestionnaire
+  %table.table#liste-gestionnaire
     %thead
       %th Enlever
       %th#email{ style: 'text-align: right;' } Email
diff --git a/app/views/admin/accompagnateurs/_list_not_assign.html.haml b/app/views/admin/accompagnateurs/_list_not_assign.html.haml
index d016ffe90..d310c1360 100644
--- a/app/views/admin/accompagnateurs/_list_not_assign.html.haml
+++ b/app/views/admin/accompagnateurs/_list_not_assign.html.haml
@@ -7,7 +7,7 @@
 
 - unless smart_listing.empty?
 
-  %table.table#liste_gestionnaire
+  %table.table#liste-gestionnaire
     %thead
       %th#email Email
       %th Ajouter
diff --git a/app/views/admin/gestionnaires/_list.html.haml b/app/views/admin/gestionnaires/_list.html.haml
index 259f3c31f..bb93b043e 100644
--- a/app/views/admin/gestionnaires/_list.html.haml
+++ b/app/views/admin/gestionnaires/_list.html.haml
@@ -1,5 +1,5 @@
 - unless smart_listing.empty?
-  %table.table#liste_gestionnaire
+  %table.table#liste-gestionnaire
     %thead
       %th#libelle= smart_listing.sortable 'Email', 'email'
       %th
diff --git a/app/views/admin/pieces_justificatives/_fields.html.haml b/app/views/admin/pieces_justificatives/_fields.html.haml
index 82ec1d409..e51a2676e 100644
--- a/app/views/admin/pieces_justificatives/_fields.html.haml
+++ b/app/views/admin/pieces_justificatives/_fields.html.haml
@@ -1,4 +1,4 @@
-.pieces_justificatives_fields
+.pieces-justificatives-fields
   = f.fields_for :types_de_piece_justificative, types_de_piece_justificative, remote: true do |ff|
     .form-inline
       .form-group
diff --git a/app/views/admin/pieces_justificatives/show.js.erb b/app/views/admin/pieces_justificatives/show.js.erb
index 094e982cb..34ce0066b 100644
--- a/app/views/admin/pieces_justificatives/show.js.erb
+++ b/app/views/admin/pieces_justificatives/show.js.erb
@@ -1,4 +1,4 @@
 <% flash.each do |type, message| %>
-$("#flash_message").html("<div class=\"alert alert-success move_up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
+$("#flash_message").html("<div class=\"alert alert-success move-up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
 <%  end %>
 $('#piece_justificative_form').html("<%= escape_javascript(render partial: 'form', locals: { procedure: @procedure } ) %>");
diff --git a/app/views/admin/procedures/_informations.html.haml b/app/views/admin/procedures/_informations.html.haml
index 476b8d250..553457b48 100644
--- a/app/views/admin/procedures/_informations.html.haml
+++ b/app/views/admin/procedures/_informations.html.haml
@@ -37,10 +37,10 @@
       = f.fields_for :module_api_carto, @procedure.module_api_carto do |ff|
         .checkbox
           %label
-            = ff.check_box :use_api_carto, id: :procedure_module_api_carto_use_api_carto
+            = ff.check_box :use_api_carto, id: "procedure-module-api-carto-use-api-carto"
             Utilisation de la cartographie
 
-        %ul#modules_api_carto
+        %ul#modules-api-carto
           %li
             .checkbox
               %label
@@ -73,7 +73,7 @@
             ne possède pas (ou pas encore) de numéro SIRET,
           qui doivent donc s'identifier en tant que personne physique.
 
-      %ul#individual_with_siret
+      %ul#individual-with-siret
         %li
           .checkbox
             %label
diff --git a/app/views/admin/procedures/_list.html.haml b/app/views/admin/procedures/_list.html.haml
index cc2f21c65..5cf85a729 100644
--- a/app/views/admin/procedures/_list.html.haml
+++ b/app/views/admin/procedures/_list.html.haml
@@ -1,5 +1,5 @@
 - unless smart_listing.empty?
-  %table.table#dossiers_list
+  %table.table#dossiers-list
     %thead
       %th#ID= smart_listing.sortable 'ID', 'id'
       %th#libelle= smart_listing.sortable 'Libellé', 'libelle'
diff --git a/app/views/admin/procedures/_modal_publish.html.haml b/app/views/admin/procedures/_modal_publish.html.haml
index 2619ca5e5..b5c282d34 100644
--- a/app/views/admin/procedures/_modal_publish.html.haml
+++ b/app/views/admin/procedures/_modal_publish.html.haml
@@ -1,4 +1,4 @@
-#publishModal.modal.fade{ "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1" }
+#publish-modal.modal.fade{ "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1" }
   .modal-dialog.modal-lg{ :role => "document" }
     = form_tag admin_procedure_publish_path(procedure_id: @procedure.id), method: :put, remote: true do
       .modal-content
@@ -8,7 +8,7 @@
           %h4#myModalLabel.modal-title
             = @procedure.archived? ? 'Réactiver' : 'Publier'
             la procédure
-            %span#publishModal_title
+            %span#publish-modal-title
         .modal-body
           Vous vous apprêtez à
           = @procedure.archived? ? 'republier' : 'publier'
@@ -30,7 +30,7 @@
                                 class: 'form-control',
                                 maxlength: 30,
                                 style: 'width: 300px; display: inline;')
-            #path_messages
+            #path-messages
               #path_is_mine.text-warning.center.message
                 Ce lien est déjà utilisé par une de vos procédure.
                 %br
diff --git a/app/views/admin/procedures/index.html.haml b/app/views/admin/procedures/index.html.haml
index 570a8cb9b..7b2e1370c 100644
--- a/app/views/admin/procedures/index.html.haml
+++ b/app/views/admin/procedures/index.html.haml
@@ -1,5 +1,5 @@
-#admins_index
-  .default_data_block.default_visible
+#admins-index
+  .default-data-block.default_visible
     .row.show-block#new_dossiers
       .header
         .col-lg-10.col-md-10.col-sm-10.col-xs-10.title
diff --git a/app/views/admin/procedures/show.html.haml b/app/views/admin/procedures/show.html.haml
index 3913a4235..79d3090d9 100644
--- a/app/views/admin/procedures/show.html.haml
+++ b/app/views/admin/procedures/show.html.haml
@@ -6,7 +6,7 @@
           %i.fa.fa-eraser
           Publier
       - else
-        %a.btn.btn-success{ "data-target" => "#publishModal", "data-toggle" => "modal", :type => "button", style: 'float: right; margin-top: 10px;', id: 'publish-procedure' }
+        %a.btn.btn-success{ "data-target" => "#publish-modal", "data-toggle" => "modal", :type => "button", style: 'float: right; margin-top: 10px;', id: 'publish-procedure' }
           %i.fa.fa-eraser
           Publier
 
@@ -19,7 +19,7 @@
     = render partial: '/admin/procedures/modal_transfer'
 
     - if @facade.procedure.archived?
-      %a#reenable.btn.btn-small.btn-default.text-info{ "data-target" => "#publishModal", "data-toggle" => "modal", :type => "button", style: 'float: right; margin-top: 10px;' }
+      %a#reenable.btn.btn-small.btn-default.text-info{ "data-target" => "#publish-modal", "data-toggle" => "modal", :type => "button", style: 'float: right; margin-top: 10px;' }
         %i.fa.fa-eraser
         Réactiver
 
@@ -80,7 +80,7 @@
           - @facade.procedure.types_de_champ_private.order(:order_place).each do |champ|
             %li= champ.libelle
 
-      .pieces_justificatives.col-xs-6.col-md-3
+      .pieces-justificatives.col-xs-6.col-md-3
         %h4.text-info
           Pièces jointes
           .badge.progress-bar-info
diff --git a/app/views/admin/types_de_champ/_fields.html.haml b/app/views/admin/types_de_champ/_fields.html.haml
index 3e84b68d7..aaf0a5ea6 100644
--- a/app/views/admin/types_de_champ/_fields.html.haml
+++ b/app/views/admin/types_de_champ/_fields.html.haml
@@ -1,20 +1,20 @@
 = f.fields_for @types_de_champ_facade.fields_for_var, types_de_champ, remote: true do |ff|
   - type_champ = ff.object.object.type_champ
 
-  .form-inline{ class: (type_champ == 'header_section' ? 'header_section' : nil) }
+  .form-inline{ class: (type_champ == 'header_section' ? 'header-section' : nil) }
     .form-group.libelle
       %h4 Libellé
       = ff.text_field :libelle, class: 'form-control libelle', placeholder: 'Libellé'
 
     .form-group.type
       %h4 Type
-      = ff.select :type_champ, TypeDeChamp.type_de_champs_list_fr, {}, { class: 'form-control type_champ' }
+      = ff.select :type_champ, TypeDeChamp.type_de_champs_list_fr, {}, { class: 'form-control type-champ' }
 
     .form-group.description
       %h4 Description
       = ff.text_area :description, class: 'form-control description', placeholder: 'Description', rows: 3
 
-    .form-group.drop_down_list{ class: (%w(drop_down_list multiple_drop_down_list).include?(type_champ) ? 'show_inline' : nil), style: 'margin-right: 5px;' }
+    .form-group.drop-down-list{ class: (%w(drop_down_list multiple_drop_down_list).include?(type_champ) ? 'show-inline' : nil), style: 'margin-right: 5px;' }
       %h4 Liste déroulante
       = ff.fields_for :drop_down_list_attributes, ff.object.object.drop_down_list do |fff|
         ~ fff.text_area :value, class: 'form-control drop_down_list', placeholder: "Ecrire une valeur par ligne et --valeur-- pour un séparateur.", rows: 3, cols: 30
diff --git a/app/views/admin/types_de_champ/show.html.haml b/app/views/admin/types_de_champ/show.html.haml
index 1ec8b0871..6b3522fa1 100644
--- a/app/views/admin/types_de_champ/show.html.haml
+++ b/app/views/admin/types_de_champ/show.html.haml
@@ -1,3 +1,3 @@
 .row.white-back
-  #liste_champ
+  #liste-champ
     = render partial: 'admin/types_de_champ/form'
diff --git a/app/views/admin/types_de_champ/show.js.erb b/app/views/admin/types_de_champ/show.js.erb
index 1406b46c8..1e156d1bb 100644
--- a/app/views/admin/types_de_champ/show.js.erb
+++ b/app/views/admin/types_de_champ/show.js.erb
@@ -1,5 +1,5 @@
 <% flash.each do |type, message| %>
-$("#flash_message").html("<div class=\"alert alert-success move_up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
+$("#flash_message").html("<div class=\"alert alert-success move-up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
 <%  end %>
-$('#liste_champ').html("<%= escape_javascript(render partial: 'admin/types_de_champ/form', locals: { procedure: @procedure, types_de_champ: @types_de_champ } ) %>");
-on_change_type_de_champ_select ();
\ No newline at end of file
+$('#liste-champ').html("<%= escape_javascript(render partial: 'admin/types_de_champ/form', locals: { procedure: @procedure, types_de_champ: @types_de_champ } ) %>");
+on_change_type_de_champ_select ();
diff --git a/app/views/administrateurs/sessions/new.html.haml b/app/views/administrateurs/sessions/new.html.haml
index 7ebe37ba9..1a480db6f 100644
--- a/app/views/administrateurs/sessions/new.html.haml
+++ b/app/views/administrateurs/sessions/new.html.haml
@@ -1,4 +1,4 @@
-#form_login
+#form-login
   %br
   = image_tag(image_url(LOGO_NAME))
   %br
@@ -7,7 +7,7 @@
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for @administrateur, url: { controller: 'administrateurs/sessions', action: :create } do |f|
       %h4
         = f.label :email
diff --git a/app/views/backoffice/dossiers/_list.html.haml b/app/views/backoffice/dossiers/_list.html.haml
index 1aebea3ba..3316aa0c8 100644
--- a/app/views/backoffice/dossiers/_list.html.haml
+++ b/app/views/backoffice/dossiers/_list.html.haml
@@ -1,4 +1,4 @@
-%table#dossiers_list.table
+%table#dossiers-list.table
   %thead
     - if smart_listing.name.to_s == 'follow_dossiers'
       %th.col-xs-1.center
diff --git a/app/views/backoffice/dossiers/_pref_list.html.haml b/app/views/backoffice/dossiers/_pref_list.html.haml
index b92e4a41c..31d6c1fed 100644
--- a/app/views/backoffice/dossiers/_pref_list.html.haml
+++ b/app/views/backoffice/dossiers/_pref_list.html.haml
@@ -1,4 +1,4 @@
-%button#pref_list_dossier_close_action.btn.btn-danger.btn-xs.fixed-right
+%button#pref-list-dossier-close-action.btn.btn-danger.btn-xs.fixed-right
   %i.fa.fa-close
 %h3
   = t('dynamics.backoffice.pref_list.title')
diff --git a/app/views/backoffice/dossiers/_pref_list.js.erb b/app/views/backoffice/dossiers/_pref_list.js.erb
index e15e3f068..00a569dd4 100644
--- a/app/views/backoffice/dossiers/_pref_list.js.erb
+++ b/app/views/backoffice/dossiers/_pref_list.js.erb
@@ -9,6 +9,6 @@ $.ajax({
     url: '/backoffice/preference_list_dossier/reload_pref_list?procedure_id=<%= @procedure_id %>',
     async: true
 }).done(function (data) {
-    $("#pref_list_menu").html(data);
+    $("#pref-list-menu").html(data);
     pref_list_dossier_actions();
 });
diff --git a/app/views/backoffice/dossiers/formulaire_private.js.erb b/app/views/backoffice/dossiers/formulaire_private.js.erb
index a4a9f595b..44b5a576a 100644
--- a/app/views/backoffice/dossiers/formulaire_private.js.erb
+++ b/app/views/backoffice/dossiers/formulaire_private.js.erb
@@ -1,4 +1,4 @@
 <% flash.each do |type, message| %>
-$("#flash_message").html("<div class=\"alert alert-success move_up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
+$("#flash_message").html("<div class=\"alert alert-success move-up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
 <%  end %>
 <% flash.clear %>
diff --git a/app/views/backoffice/dossiers/index.html.haml b/app/views/backoffice/dossiers/index.html.haml
index f10570616..54d14c648 100644
--- a/app/views/backoffice/dossiers/index.html.haml
+++ b/app/views/backoffice/dossiers/index.html.haml
@@ -1,8 +1,8 @@
-#backoffice_index
-  #pref_list_menu
+#backoffice-index
+  #pref-list-menu
     = render partial: 'backoffice/dossiers/pref_list'
 
-  .default_data_block
+  .default-data-block
     .row.show-block#new_dossiers
       .header
         .col-xs-10.title
@@ -24,7 +24,7 @@
     .col-xs-3
       = link_to  'Terminés', '?liste=termine', class: 'text-success', style: "text-decoration: #{@facade_data_view.liste == 'termine'? 'underline' : ''}"
 
-  .default_data_block.default_visible
+  .default-data-block.default_visible
     .row.show-block#follow_dossiers
       .header
         .col-xs-10.title
@@ -36,7 +36,7 @@
       .body
         = smart_listing_render :follow_dossiers
 
-  .default_data_block
+  .default-data-block
     .row.show-block#all_dossiers
       .header
         .col-xs-10.title
@@ -50,7 +50,7 @@
 
 
   - if @archived_dossiers
-    .default_data_block
+    .default-data-block
       .row.show-block#archived_dossiers
         .header
           .col-xs-10.title
diff --git a/app/views/backoffice/dossiers/search.html.haml b/app/views/backoffice/dossiers/search.html.haml
index 34ffd639d..6a17e254c 100644
--- a/app/views/backoffice/dossiers/search.html.haml
+++ b/app/views/backoffice/dossiers/search.html.haml
@@ -1,8 +1,8 @@
-#backoffice_search
-  #pref_list_menu
+#backoffice-search
+  #pref-list-menu
     = render partial: 'backoffice/dossiers/pref_list'
 
-  .default_data_block.default_visible
+  .default-data-block.default_visible
     .row.show-block#new_dossiers
       .header
         .col-lg-10.col-md-10.col-sm-10.col-xs-10.title
diff --git a/app/views/backoffice/dossiers/show.html.haml b/app/views/backoffice/dossiers/show.html.haml
index be9e5d17d..de5a91238 100644
--- a/app/views/backoffice/dossiers/show.html.haml
+++ b/app/views/backoffice/dossiers/show.html.haml
@@ -1,2 +1,2 @@
-#backoffice_dossier_show.col-xs-12
+#backoffice-dossier-show.col-xs-12
   = render partial: "dossiers/dossier_show"
diff --git a/app/views/dossiers/_dossier_show.html.haml b/app/views/dossiers/_dossier_show.html.haml
index be5f83190..2a96ccc76 100644
--- a/app/views/dossiers/_dossier_show.html.haml
+++ b/app/views/dossiers/_dossier_show.html.haml
@@ -1,7 +1,7 @@
 = render partial: 'dossiers/messagerie', locals: { dossier_facade: @facade }
 
 - if @facade.procedure.individual_with_siret
-  .default_data_block
+  .default-data-block
     .row.show-block.infos
       .header
         .col-xs-8.title-no-expanse
@@ -13,7 +13,7 @@
               Renseigner un SIRET
 
 - unless @facade.entreprise.nil?
-  .default_data_block
+  .default-data-block
     .row.show-block.infos#infos_entreprise
       .header
         .col-xs-12.title
@@ -23,8 +23,8 @@
       .body.display-block-on-print
         = render partial: '/dossiers/infos_entreprise'
 
-.default_data_block.default_visible
-  .row.show-block.infos#infos_dossier
+.default-data-block.default_visible
+  .row.show-block.infos#infos-dossiers
     .header
       .col-xs-10.title
         .carret-right
@@ -35,7 +35,7 @@
       = render partial: '/dossiers/infos_dossier'
 
 - if @facade.dossier.procedure.module_api_carto.use_api_carto
-  .default_data_block.default_visible.no-page-break-inside
+  .default-data-block.default_visible.no-page-break-inside
     .row.show-block#carto
       .header
         .col-xs-10.title
@@ -53,7 +53,7 @@
 
 
 - if @current_gestionnaire && gestionnaire_signed_in? && @champs_private.count > 0
-  .default_data_block.default_visible
+  .default-data-block.default_visible
     .row.show-block#private-fields
       .header
         .col-xs-10.title
diff --git a/app/views/dossiers/_download_dossiers.html.haml b/app/views/dossiers/_download_dossiers.html.haml
index 369bd4327..26abe6925 100644
--- a/app/views/dossiers/_download_dossiers.html.haml
+++ b/app/views/dossiers/_download_dossiers.html.haml
@@ -1,5 +1,5 @@
 .dropdown.pull-right#download-menu
-  %a.dropdown-toggle.button_navbar{ type: :button, 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
+  %a.dropdown-toggle.button-navbar{ type: :button, 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
     %i.fa.fa-download
     Télécharger tous les dossiers
     %span.caret
diff --git a/app/views/dossiers/_edit_pieces_jointes.html.haml b/app/views/dossiers/_edit_pieces_jointes.html.haml
index 61a8dc794..3584221a3 100644
--- a/app/views/dossiers/_edit_pieces_jointes.html.haml
+++ b/app/views/dossiers/_edit_pieces_jointes.html.haml
@@ -2,7 +2,7 @@
   - if user_signed_in? && (@facade.dossier.owner?(current_user.email) || @facade.dossier.invite_by_user?(current_user.email))
     - if @facade.procedure.cerfa_flag? || @facade.dossier.types_de_piece_justificative.size > 0
       .col-lg-4.col-md-4.col-sm-4.col-xs-4.action
-        %a#maj_pj.action{ "data-target" => "#UploadPJmodal",
+        %a#maj_pj.action{ "data-target" => "#upload-pj-modal",
                            "data-toggle" => "modal",
                            :type => "button",
                            style: 'margin-bottom: 15px; margin-top: -30px;' }
diff --git a/app/views/dossiers/_infos_dossier.html.haml b/app/views/dossiers/_infos_dossier.html.haml
index 954aa6856..00b37b627 100644
--- a/app/views/dossiers/_infos_dossier.html.haml
+++ b/app/views/dossiers/_infos_dossier.html.haml
@@ -62,7 +62,7 @@
         .col-xs-4.dossier-title= t('utils.pieces').upcase
         .col-xs-4.split-hr
 
-  .col-xs-12#pieces_justificatives.margin-bot-40
+  .col-xs-12#pieces-justificatives.margin-bot-40
     .row
       - if @facade.procedure.cerfa_flag?
         .col-xs-12#piece_justificative_0
@@ -74,7 +74,7 @@
                 %a{ href: "#{@facade.dossier.cerfa.last.content_url}", target: '_blank' } Consulter
                 %span{ style: 'margin-left: 12px;' }
                   \-
-                = link_to "", class: "historique", "data-toggle" => "modal", "data-target" => "#PJmodal", :type => "button", "data-modal_title" => 'formulaires', "data-modal_index" => 'cerfa' do
+                = link_to "", class: "historique", "data-toggle" => "modal", "data-target" => "#pj-modal", :type => "button", "data-modal_title" => 'formulaires', "data-modal_index" => 'cerfa' do
                   %span.fa.fa-clock-o
               - else
                 Pièce non fournie
@@ -94,7 +94,7 @@
                     %span{ style: 'margin-left: 12px;' }
                       \-
                     - if @facade.dossier.pieces_justificatives.where(type_de_piece_justificative_id: type_de_piece_justificative.id).count > 1
-                      = link_to "", class: "historique", "data-toggle" => "modal", "data-target" => "#PJmodal", :type => "button", "data-modal_title" => 'formulaires', "data-modal_index" => "type_de_pj_#{type_de_piece_justificative.id}" do
+                      = link_to "", class: "historique", "data-toggle" => "modal", "data-target" => "#pj-modal", :type => "button", "data-modal_title" => 'formulaires', "data-modal_index" => "type_de_pj_#{type_de_piece_justificative.id}" do
                         %span.fa.fa-clock-o
                   - else
                     Pièce non fournie
@@ -104,7 +104,7 @@
         - if @facade.procedure.cerfa_flag? || @facade.dossier.types_de_piece_justificative.size > 0
           .row
             .col-xs-4
-            %a#maj_pj.action{ "data-target" => "#UploadPJmodal", "data-toggle" => "modal", :type => "button" }
+            %a#maj_pj.action{ "data-target" => "#upload-pj-modal", "data-toggle" => "modal", :type => "button" }
               .col-xs-4.action
                 Modifier les documents
               %br
@@ -112,7 +112,7 @@
             .col-xs-4
 
     - if gestionnaire_signed_in?
-      #PJmodal.modal.fade{ "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1" }
+      #pj-modal.modal.fade{ "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1" }
         .modal-dialog.modal-lg{ :role => "document" }
           .modal-content
             .modal-header
@@ -120,7 +120,7 @@
                 %span{ "aria-hidden" => "true" } ×
               %h4#myModalLabel.modal-title
                 Historique des
-                %span#PJmodal_title
+                %span#pj-modal-title
             .modal-body
               %table.table
                 %thead
@@ -130,7 +130,7 @@
                     Date d'envoi
                   %th
                     Lien
-                %thead.tr_content#cerfa
+                %thead.tr-content#cerfa
                   - if @facade.procedure.cerfa_flag?
                     - if @facade.dossier.cerfa_available?
                       - @facade.cerfas_ordered.each do |cerfa|
@@ -142,7 +142,7 @@
                           %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
                             = link_to 'Récupérer', cerfa.content_url, { target: :blank }
                 - @facade.dossier.types_de_piece_justificative.each do |type_de_piece_justificative|
-                  %tbody.tr_content{ id: "type_de_pj_#{type_de_piece_justificative.id}" }
+                  %tbody.tr-content{ id: "type_de_pj_#{type_de_piece_justificative.id}" }
                     - @facade.dossier.retrieve_all_piece_justificative_by_type(type_de_piece_justificative.id).each do |piece_justificative|
                       %tr
                         %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
diff --git a/app/views/dossiers/_infos_pieces_jointes.html.haml b/app/views/dossiers/_infos_pieces_jointes.html.haml
index 78d1df89f..05faa1417 100644
--- a/app/views/dossiers/_infos_pieces_jointes.html.haml
+++ b/app/views/dossiers/_infos_pieces_jointes.html.haml
@@ -1,4 +1,4 @@
-#pieces_justificatives
+#pieces-justificatives
   .row
     - if @facade.procedure.cerfa_flag?
       .col-xs-12#piece_justificative_0
@@ -11,7 +11,7 @@
               %span{ style: 'margin-left: 12px;' }
                 \-
               %a.btn.fa.fa-timer{ style: 'color: black; padding-top: 0;',
-                                                "data-target" => "#PJmodal",
+                                                "data-target" => "#pj-modal",
                                                 "data-toggle" => "modal",
                                                 :type => "button",
                                                 "data-modal_title" => 'formulaires',
@@ -37,7 +37,7 @@
                   %span{ style: 'margin-left: 12px;' }
                     \-
                   %a.btn.fa.fa-timer{ style: 'color: black; padding-top: 0;',
-                                                      "data-target" => "#PJmodal",
+                                                      "data-target" => "#pj-modal",
                                                       "data-toggle" => "modal",
                                                       :type => "button",
                                                       "data-modal_title" => type_de_piece_justificative.libelle,
diff --git a/app/views/dossiers/_messagerie.html.haml b/app/views/dossiers/_messagerie.html.haml
index eb8b59324..ca223136d 100644
--- a/app/views/dossiers/_messagerie.html.haml
+++ b/app/views/dossiers/_messagerie.html.haml
@@ -1,4 +1,4 @@
-.default_data_block{ style: 'margin-top: 40px;' }
+.default-data-block{ style: 'margin-top: 40px;' }
   .row.show-block.clearfix#messages
     .header
       .col-xs-10.title
diff --git a/app/views/dossiers/_pieces_justificatives.html.haml b/app/views/dossiers/_pieces_justificatives.html.haml
index f547b1a4d..74d837d30 100644
--- a/app/views/dossiers/_pieces_justificatives.html.haml
+++ b/app/views/dossiers/_pieces_justificatives.html.haml
@@ -1,4 +1,4 @@
-#pieces_justificatives
+#pieces-justificatives
   %table.table
     - if @facade.procedure.cerfa_flag?
       %tr{ id: "piece_justificative_0" }
@@ -10,7 +10,7 @@
             %span{ style: 'margin-left: 12px;' }
               \-
             %a.btn.fa.fa-timer{ style: 'color: black; padding-top: 0;',
-                                                "data-target" => "#PJmodal",
+                                                "data-target" => "#pj-modal",
                                                 "data-toggle" => "modal",
                                                 :type => "button",
                                                 "data-modal_title" => 'formulaires',
@@ -33,7 +33,7 @@
             %span{ style: 'margin-left: 12px;' }
               \-
             %a.btn.fa.fa-timer{ style: 'color: black; padding-top: 0;',
-                                                "data-target" => "#PJmodal",
+                                                "data-target" => "#pj-modal",
                                                 "data-toggle" => "modal",
                                                 :type => "button",
                                                 "data-modal_title" => type_de_piece_justificative.libelle,
diff --git a/app/views/dossiers/_show.html.haml b/app/views/dossiers/_show.html.haml
index 61ab17978..a63cafa14 100644
--- a/app/views/dossiers/_show.html.haml
+++ b/app/views/dossiers/_show.html.haml
@@ -1,9 +1,9 @@
-#users_siret_index
+#users-siret-index
 
   .row.etape.etape_1
     = render partial: '/dossiers/etapes/etape1'
 
-  .row.etape.etape_2
+  .row.etape.etape-2
     = render partial: '/dossiers/etapes/etape2'
 
   -# - if @facade.procedure.module_api_carto.use_api_carto?
diff --git a/app/views/dossiers/add_siret.js.erb b/app/views/dossiers/add_siret.js.erb
index 72bb92d20..fe0cdc53c 100644
--- a/app/views/dossiers/add_siret.js.erb
+++ b/app/views/dossiers/add_siret.js.erb
@@ -1,6 +1,6 @@
 <% if flash.empty? %>
-$('.row.etape.etape_2').hide(300, render_new_siret);
-$('.row.etape.etape_2').slideDown(400, the_terms);
+$('.row.etape.etape-2').hide(300, render_new_siret);
+$('.row.etape.etape-2').slideDown(400, the_terms);
 <% else %>
 error_form_siret('<%= invalid_siret %>');
 <%  end %>
@@ -8,5 +8,5 @@ error_form_siret('<%= invalid_siret %>');
 <% flash.clear %>
 
 function render_new_siret(){
-    $('.row.etape.etape_2').html("<%= escape_javascript(render partial: '/dossiers/etapes/etape_2/entreprise', locals: { facade: @facade } ) %>");
+    $('.row.etape.etape-2').html("<%= escape_javascript(render partial: '/dossiers/etapes/etape_2/entreprise', locals: { facade: @facade } ) %>");
 }
\ No newline at end of file
diff --git a/app/views/dossiers/etapes/_etape1.html.haml b/app/views/dossiers/etapes/_etape1.html.haml
index 5e1d46dbc..036cdce6b 100644
--- a/app/views/dossiers/etapes/_etape1.html.haml
+++ b/app/views/dossiers/etapes/_etape1.html.haml
@@ -9,10 +9,10 @@
     #logo_procedure.flag
       = image_tag( @facade.procedure.decorate.logo_img )
 
-.etape.etapes_informations.col-xs-9
+.etape.etapes-informations.col-xs-9
   .row
     .col-xs-12.padding-left-30
-      %h2#titre_procedure.text-info
+      %h2#titre-procedure.text-info
         = @facade.procedure.libelle
 
       %p#description_procedure{ style: 'width: 95%;', class: (@facade.entreprise.nil? ? '' : 'mask') }
diff --git a/app/views/dossiers/etapes/_etape3.html.haml b/app/views/dossiers/etapes/_etape3.html.haml
index a163bbe81..4a0e54e99 100644
--- a/app/views/dossiers/etapes/_etape3.html.haml
+++ b/app/views/dossiers/etapes/_etape3.html.haml
@@ -1,6 +1,6 @@
-.etape.etapes_menu.col-xs-3
+.etape.etapes-menu.col-xs-3
   %h3
     Ma zone d'intervention
 
-.etape.etapes_informations.col-xs-9
+.etape.etapes-informations.col-xs-9
   .row
diff --git a/app/views/dossiers/etapes/_etape4.html.haml b/app/views/dossiers/etapes/_etape4.html.haml
index 68a4c0fc4..70456b83f 100644
--- a/app/views/dossiers/etapes/_etape4.html.haml
+++ b/app/views/dossiers/etapes/_etape4.html.haml
@@ -1,6 +1,6 @@
-.etape.etapes_menu.col-xs-3
+.etape.etapes-menu.col-xs-3
   %h3
     Mon dossier
 
-.etape.etapes_informations.col-xs-9
+.etape.etapes-informations.col-xs-9
   .row
diff --git a/app/views/dossiers/etapes/etape_2/_entreprise.html.haml b/app/views/dossiers/etapes/etape_2/_entreprise.html.haml
index c817a95a9..7e6e6f05c 100644
--- a/app/views/dossiers/etapes/etape_2/_entreprise.html.haml
+++ b/app/views/dossiers/etapes/etape_2/_entreprise.html.haml
@@ -1,4 +1,4 @@
-.etape.etapes_menu.col-xs-3
+.etape.etapes-menu.col-xs-3
   %h3
     Mes informations
   %br
@@ -12,21 +12,21 @@
         = f.submit 'Changer de SIRET', class: %w(btn btn-xs btn-primary)
 
 
-.etape.etapes_informations.col-xs-9
+.etape.etapes-informations.col-xs-9
   .row
     - if @facade.entreprise.nil?
       #new_siret{ style: 'margin-left: 20%; margin-top: 5%;' }
         = form_for @facade.dossier, html: { class: 'form-inline' }, url: users_dossier_siret_informations_path(dossier_id: @facade.dossier.id), method: :post, remote: true do |f|
           .form-group.form-group-lg
-            = f.text_field :siret, class: "form-control", placeholder: "Entrez votre Siret", value: @siret
+            = f.text_field :siret, id: "dossier-siret", class: "form-control", placeholder: "Entrez votre Siret", value: @siret
             = f.hidden_field :dossier_id, value: @facade.dossier.id
             = f.submit 'Valider', class: %w(btn btn-lg btn-success), id: 'submit-siret', data: { disable_with: "Recherche en cours ..." }
     - else
       %br
-      #recap_info_entreprise
+      #recap-info-entreprise
         = render partial: '/dossiers/infos_entreprise'
 
-        %p#insee_infogreffe{ style: 'color: grey; float: right;' }
+        %p#insee-infogreffe{ style: 'color: grey; float: right;' }
           %i
             Informations récupérées auprès de l'INSEE et d'INFOGREFFE
 
diff --git a/app/views/dossiers/etapes/etape_2/_individual.html.haml b/app/views/dossiers/etapes/etape_2/_individual.html.haml
index 2e2298c33..ce87a50fc 100644
--- a/app/views/dossiers/etapes/etape_2/_individual.html.haml
+++ b/app/views/dossiers/etapes/etape_2/_individual.html.haml
@@ -5,7 +5,7 @@
     %br
     vous concernant.
 
-.etape.etapes_informations.col-xs-9
+.etape.etapes-informations.col-xs-9
   = form_for @facade.dossier, url: { controller: '/users/dossiers', action: :update } do |f|
     .row
       .col-xs-12.padding-left-30
diff --git a/app/views/dossiers/new_siret.js.erb b/app/views/dossiers/new_siret.js.erb
index dcb6ce2b2..a84df50d7 100644
--- a/app/views/dossiers/new_siret.js.erb
+++ b/app/views/dossiers/new_siret.js.erb
@@ -1,6 +1,6 @@
 <% if flash.empty? %>
-$('.row.etape.etape_2').hide(300, render_new_siret);
-$('.row.etape.etape_2').slideDown(400, the_terms);
+$('.row.etape.etape-2').hide(300, render_new_siret);
+$('.row.etape.etape-2').slideDown(400, the_terms);
 toggle_etape_1();
 <% else %>
 error_form_siret('<%= invalid_siret %>');
@@ -9,5 +9,5 @@ error_form_siret('<%= invalid_siret %>');
 <% flash.clear %>
 
 function render_new_siret(){
-    $('.row.etape.etape_2').html("<%= escape_javascript(render partial: '/dossiers/etapes/etape2', locals: { facade: @facade } ) %>");
+    $('.row.etape.etape-2').html("<%= escape_javascript(render partial: '/dossiers/etapes/etape2', locals: { facade: @facade } ) %>");
 }
\ No newline at end of file
diff --git a/app/views/france_connect/particulier/check_email.html.haml b/app/views/france_connect/particulier/check_email.html.haml
index da4efd5be..9922adda2 100644
--- a/app/views/france_connect/particulier/check_email.html.haml
+++ b/app/views/france_connect/particulier/check_email.html.haml
@@ -12,7 +12,7 @@
     Afin d'associer ce compte à votre identifiant France Connect, merci de saisir votre mot de passe TPS.
   %br
 .center
-  #france_connect_particulier_email
+  #france-connect-particulier-email
     = form_for @user, url: { controller: 'france_connect/particulier', action: :check_email }, method: :post do |f|
       .form-group.form-group-lg
         = f.text_field :email_france_connect, class: "form-control", readonly: 'readonly'
diff --git a/app/views/france_connect/particulier/new.html.haml b/app/views/france_connect/particulier/new.html.haml
index 22f6c8e72..ddb7a5b0b 100644
--- a/app/views/france_connect/particulier/new.html.haml
+++ b/app/views/france_connect/particulier/new.html.haml
@@ -23,7 +23,7 @@
 %br
 
 .center
-  #france_connect_particulier_email
+  #france-connect-particulier-email
     = form_for @user, url: { controller: 'france_connect/particulier', action: :check_email }, method: :post do |f|
       .form-group.form-group-lg
         = f.text_field :email_france_connect, class: "form-control", placeholder: "Entrez votre email"
diff --git a/app/views/gestionnaires/passwords/edit.html.haml b/app/views/gestionnaires/passwords/edit.html.haml
index 13888a958..64acc3d70 100644
--- a/app/views/gestionnaires/passwords/edit.html.haml
+++ b/app/views/gestionnaires/passwords/edit.html.haml
@@ -1,13 +1,13 @@
 = devise_error_messages!
 
-#form_login
+#form-login
   = image_tag(image_url(LOGO_NAME))
   %br
   %h2#gestionnaire_login Changement de mot de passe
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
       = f.hidden_field :reset_password_token
       %h4
diff --git a/app/views/gestionnaires/passwords/new.html.haml b/app/views/gestionnaires/passwords/new.html.haml
index 5cb58e0b1..63b9cf09c 100644
--- a/app/views/gestionnaires/passwords/new.html.haml
+++ b/app/views/gestionnaires/passwords/new.html.haml
@@ -1,14 +1,14 @@
 = devise_error_messages!
 
 %br
-#form_login
+#form-login
   = image_tag(image_url(LOGO_NAME))
   %br
   %h2#gestionnaire_login Mot de passe oublié
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
       %h4
         = f.label :email
diff --git a/app/views/gestionnaires/sessions/new.html.haml b/app/views/gestionnaires/sessions/new.html.haml
index 051112da6..005803443 100644
--- a/app/views/gestionnaires/sessions/new.html.haml
+++ b/app/views/gestionnaires/sessions/new.html.haml
@@ -1,4 +1,4 @@
-#form_login
+#form-login
   %br
   = image_tag(image_url(LOGO_NAME))
   %br
@@ -6,7 +6,7 @@
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for @gestionnaire, url: gestionnaire_session_path, method: :post do |f|
       %h4
         = f.label :email
diff --git a/app/views/layouts/_navbar.html.haml b/app/views/layouts/_navbar.html.haml
index 226fa8396..d3d3e9db5 100644
--- a/app/views/layouts/_navbar.html.haml
+++ b/app/views/layouts/_navbar.html.haml
@@ -1,5 +1,5 @@
 .col-xs-2
-  %a#title_navbar{ href: '/' }
+  %a#title-navbar{ href: '/' }
     .row#home
       .col-lg-6.no-padding
         = image_tag('marianne_small.png', class: 'logo')
diff --git a/app/views/layouts/_notifications_alert.html.haml b/app/views/layouts/_notifications_alert.html.haml
index 372fe7497..99c4a4682 100644
--- a/app/views/layouts/_notifications_alert.html.haml
+++ b/app/views/layouts/_notifications_alert.html.haml
@@ -1 +1 @@
-#notification_alert.alert.alert-success
+#notification-alert.alert.alert-success
diff --git a/app/views/layouts/_support_navigator_banner.html.haml b/app/views/layouts/_support_navigator_banner.html.haml
index 8f892a3b8..ff3485071 100644
--- a/app/views/layouts/_support_navigator_banner.html.haml
+++ b/app/views/layouts/_support_navigator_banner.html.haml
@@ -1,5 +1,5 @@
 - unless BrowserService.recommended_browser?
-  #support_navigator_banner.row
+  #support-navigator-banner.row
     .col-xs-12
       = BROWSER.value.name
       = BROWSER.value.version
diff --git a/app/views/layouts/_switch_devise_profile_module.html.haml b/app/views/layouts/_switch_devise_profile_module.html.haml
index 53d3f2134..6b718ca0a 100644
--- a/app/views/layouts/_switch_devise_profile_module.html.haml
+++ b/app/views/layouts/_switch_devise_profile_module.html.haml
@@ -1,5 +1,5 @@
 - if SwitchDeviseProfileService.new(warden).multiple_devise_profile_connect?
-  #switch_menu.dropdown.dropup
+  #switch-menu.dropdown.dropup
     %button.btn.btn-default.dropdown-toggle{ type: :button, 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
       %i.fa.fa-toggle-on
       %span.caret
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 0508e568c..225169964 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -18,7 +18,7 @@
     = action_cable_meta_tag
   %body
     = render partial: 'layouts/support_navigator_banner'
-    #beta{ class: (Rails.env == 'production' ? '' : 'beta_staging') }
+    #beta{ class: (Rails.env == 'production' ? '' : 'beta-staging') }
       - if Rails.env == 'production'
         Beta
       - else
@@ -49,7 +49,7 @@
           - main_container_size = 12
 
         = render partial: 'layouts/main_container', locals: { main_container_size: main_container_size }
-    #mask_search
+    #mask-search
       %h1
         %i.fa.fa-times{ style: 'position: fixed; top: 10; right: 30; color: white;' }
 
diff --git a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml
index 53fcb38c2..865c47868 100644
--- a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml
+++ b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml
@@ -8,21 +8,21 @@
 
 %div#menu-block
   .split-hr-left
-  #procedure_list
+  #procedure-list
     %a{ :href => "#{url_for :admin_procedures_draft}", id: "draft-procedures" }
-      .procedure_list_element{ class: @draft_class }
+      .procedure-list-element{ class: @draft_class }
         Brouillons
         .badge.progress-bar-default
           = current_administrateur.procedures.where(published: false, archived: false).count
 
     %a{ :href => "#{url_for :admin_procedures}", id: "active-procedures" }
-      .procedure_list_element{ class: @active_class }
+      .procedure-list-element{ class: @active_class }
         Actives
         .badge.progress-bar-success
           = current_administrateur.procedures.where(published: true, archived: false).count
 
     %a{ :href => "#{url_for :admin_procedures_archived}", id: "archived-procedures" }
-      .procedure_list_element{ class: @archived_class }
+      .procedure-list-element{ class: @archived_class }
         Archivées
         .badge.progress-bar-purple
           = current_administrateur.procedures.where(archived: true).count
diff --git a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_navbar.html.haml b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_navbar.html.haml
index 60036b2a5..e23c96832 100644
--- a/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_navbar.html.haml
+++ b/app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_navbar.html.haml
@@ -9,40 +9,40 @@
 
 %div#menu-block
   .split-hr-left
-  #procedure_list
+  #procedure-list
     %a{ :href => "#{url_for admin_procedure_path(@procedure)}", id: 'onglet-infos' }
-      .procedure_list_element{ class: ('active' if active == 'Informations') }
+      .procedure-list-element{ class: ('active' if active == 'Informations') }
         Informations
 
     %a{ :href => "#{url_for admin_procedure_accompagnateurs_path(@procedure)}", id: 'onglet-accompagnateurs' }
-      .procedure_list_element{ class: ('active' if active == 'Accompagnateurs') }
+      .procedure-list-element{ class: ('active' if active == 'Accompagnateurs') }
         = t('dynamics.admin.procedure.onglets.accompagnateurs')
 
     %a{ :href => "#{url_for edit_admin_procedure_path(@procedure)}", id: 'onglet-description' }
-      .procedure_list_element{ class: ('active' if active == 'Description') }
+      .procedure-list-element{ class: ('active' if active == 'Description') }
         Description
 
     - unless @procedure.locked?
       %a{ :href => "#{url_for admin_procedure_types_de_champ_path(@procedure)}", id: 'onglet-champs' }
-        .procedure_list_element{ class: ('active' if active == 'Champs') }
+        .procedure-list-element{ class: ('active' if active == 'Champs') }
           Champs
 
     - unless @procedure.locked?
       %a{ :href => "#{url_for admin_procedure_pieces_justificatives_path(@procedure)}", id: 'onglet-pieces' }
-        .procedure_list_element{ class: ('active' if active == 'Pieces') }
+        .procedure-list-element{ class: ('active' if active == 'Pieces') }
           Pièces jointes
 
     - unless @procedure.locked?
       %a{ :href => "#{url_for admin_procedure_types_de_champ_private_path(@procedure)}", id: 'onglet-private-champs' }
-        .procedure_list_element{ class: ('active' if active == 'Champs privés') }
+        .procedure-list-element{ class: ('active' if active == 'Champs privés') }
           Champs privés
 
     %a{ :href => "#{url_for admin_procedure_mail_templates_path(@procedure)}", id: 'onglet-inemailsfos' }
-      .procedure_list_element{ class: ('active' if active == 'E-mails') }
+      .procedure-list-element{ class: ('active' if active == 'E-mails') }
         E-mails
 
     %a{ :href => "#{url_for admin_procedure_previsualisation_path(@procedure)}", id: 'onglet-preview' }
-      .procedure_list_element{ class: ('active' if active == 'Prévisualisation') }
+      .procedure-list-element{ class: ('active' if active == 'Prévisualisation') }
         Prévisualisation
 
   .split-hr-left
diff --git a/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml
index d99573c44..c990c6836 100644
--- a/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml
+++ b/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml
@@ -19,11 +19,11 @@
 
 %div#infos-block
   .split-hr-left
-  #procedure_list
+  #procedure-list
     - @facade_data_view.gestionnaire_procedures_name_and_id_list.each do |procedure|
 
       = link_to backoffice_dossiers_procedure_path(procedure[:id]), { title: procedure[:libelle] } do
-        .procedure_list_element{ class: ('active' if procedure[:id] == @facade_data_view.procedure.id rescue '') }
+        .procedure-list-element{ class: ('active' if procedure[:id] == @facade_data_view.procedure.id rescue '') }
           = truncate(procedure[:libelle], length: 50)
           - total_new = @facade_data_view.new_dossier_number procedure[:id]
           - if total_new > 0
@@ -32,7 +32,7 @@
           - if procedure[:unread_notifications] > 0
             .badge.progress-bar-warning{ title: 'Notifications' }
               = procedure[:unread_notifications]
-  #notifications_list.hidden
+  #notifications-list.hidden
     - if @facade_data_view.dossiers_with_unread_notifications.empty?
       .no-notification Aucune notification pour le moment.
     - else
diff --git a/app/views/layouts/left_panels/_left_panel_cgucontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_cgucontroller_index.html.haml
index 1d386a756..6fce145f3 100644
--- a/app/views/layouts/left_panels/_left_panel_cgucontroller_index.html.haml
+++ b/app/views/layouts/left_panels/_left_panel_cgucontroller_index.html.haml
@@ -1,53 +1,53 @@
 %div#cgu_menu_block
-  #procedure_list{ style: 'margin-top: 0;' }
+  #procedure-list{ style: 'margin-top: 0;' }
     = link_to cgu_path(:anchor => "editeur") do
-      .procedure_list_element
+      .procedure-list-element
         Editeur
 
     = link_to cgu_path(:anchor => "ingenieurie_hebergement") do
-      .procedure_list_element
+      .procedure-list-element
         Ingénierie et hébergement informatique
 
     = link_to cgu_path(:anchor => "object_website") do
-      .procedure_list_element
+      .procedure-list-element
         Object du site internet
 
     = link_to cgu_path(:anchor => "acteurs") do
-      .procedure_list_element
+      .procedure-list-element
         Acteurs de TPS
 
     = link_to cgu_path(:anchor => "CNIL") do
-      .procedure_list_element
+      .procedure-list-element
         Déclaration CNIL
 
     = link_to cgu_path(:anchor => "data_collects") do
-      .procedure_list_element
+      .procedure-list-element
         Données collectées et responsabilité des organismes utilisateurs
 
     = link_to cgu_path(:anchor => "individual_data") do
-      .procedure_list_element
+      .procedure-list-element
         Traitement des données à caractère personnel
 
     = link_to cgu_path(:anchor => "entreprise_information") do
-      .procedure_list_element
+      .procedure-list-element
         Règles relatives aux informations sur les entreprises mises à disposibition
 
     = link_to cgu_path(:anchor => "reproduction") do
-      .procedure_list_element
+      .procedure-list-element
         Droit de reproduction
 
     = link_to cgu_path(:anchor => "propriete_intellectuelle") do
-      .procedure_list_element
+      .procedure-list-element
         Propriété intellectuelle
 
     = link_to cgu_path(:anchor => "navigateurs") do
-      .procedure_list_element
+      .procedure-list-element
         Logiciels nécessaires à la consultation
 
     = link_to cgu_path(:anchor => "conception") do
-      .procedure_list_element
+      .procedure-list-element
         Conception et Réalisation
 
-    .procedure_list_element
+    .procedure-list-element
 
-    .procedure_list_element
+    .procedure-list-element
diff --git a/app/views/layouts/left_panels/_left_panel_users_dossierscontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_users_dossierscontroller_index.html.haml
index 06d8817d7..3e0bebb2f 100644
--- a/app/views/layouts/left_panels/_left_panel_users_dossierscontroller_index.html.haml
+++ b/app/views/layouts/left_panels/_left_panel_users_dossierscontroller_index.html.haml
@@ -9,34 +9,34 @@
 
 %div#menu-block
   .split-hr-left
-  #procedure_list
+  #procedure-list
     - unless current_user.dossiers.count == 0
       %a{ :href => "#{url_for users_dossiers_path(liste: 'brouillon')}", 'data-toggle' => :tooltip, title: 'Les dossiers jamais proposés à la relecture.' }
-        .procedure_list_element{ class: @dossiers_list_facade.brouillon_class, id: 'brouillon' }
+        .procedure-list-element{ class: @dossiers_list_facade.brouillon_class, id: 'brouillon' }
           Brouillons
           .badge.progress-bar-default
             = @dossiers_list_facade.brouillon_total
 
       %a{ :href => "#{url_for users_dossiers_path(liste: 'a_traiter')}", 'data-toggle' => :tooltip, title: 'Les dossiers qui requièrent une action de votre part.' }
-        .procedure_list_element{ class: @dossiers_list_facade.en_construction_class, id: 'a_traiter' }
+        .procedure-list-element{ class: @dossiers_list_facade.en_construction_class, id: 'a_traiter' }
           En construction
           .badge.progress-bar-danger
             = @dossiers_list_facade.en_construction_total
 
       %a{ :href => "#{url_for users_dossiers_path(liste: 'en_instruction')}", 'data-toggle' => :tooltip, title: 'Les dossiers en cours d\'examen par l\'administration compétante.' }
-        .procedure_list_element{ class: @dossiers_list_facade.en_instruction_class, id: 'en_instruction' }
+        .procedure-list-element{ class: @dossiers_list_facade.en_instruction_class, id: 'en_instruction' }
           En instruction
           .badge.progress-bar-default
             = @dossiers_list_facade.en_instruction_total
 
       %a{ :href => "#{url_for users_dossiers_path(liste: 'termine')}", 'data-toggle' => :tooltip, title: 'Les dossiers cloturés qui peuvent être "Accepté", "Refusé" ou "Sans suite".' }
-        .procedure_list_element{ class:  @dossiers_list_facade.termine_class, id: 'termine' }
+        .procedure-list-element{ class:  @dossiers_list_facade.termine_class, id: 'termine' }
           Terminé
           .badge.progress-bar-success
             = @dossiers_list_facade.termine_total
 
     %a{ :href => "#{url_for users_dossiers_path(liste: 'invite')}" }
-      .procedure_list_element{ class:  @dossiers_list_facade.invite_class, id: 'invite' }
+      .procedure-list-element{ class:  @dossiers_list_facade.invite_class, id: 'invite' }
         Invitation
         .badge.progress-bar-warning
           = @dossiers_list_facade.invite_total
diff --git a/app/views/layouts/left_panels/_search_area.html.haml b/app/views/layouts/left_panels/_search_area.html.haml
index c4a49ea26..6532566e1 100644
--- a/app/views/layouts/left_panels/_search_area.html.haml
+++ b/app/views/layouts/left_panels/_search_area.html.haml
@@ -1,7 +1,7 @@
-#search_area
+#search-area
   = form_tag(backoffice_dossiers_search_url, method: :get) do
     .input-group
       = text_field_tag('q', "#{@search_terms unless @search_terms.nil?}", id: 'q', placeholder: "Recherchez parmi tous vos dossiers", class: 'form-control')
       %span.input-group-btn
-        %button.btn.btn-default{ id: 'search_button' }
+        %button.btn.btn-default{ id: 'search-button' }
           %i.fa.fa-search
diff --git a/app/views/layouts/navbars/_navbar_backoffice_dossiers_procedurecontroller_index.html.haml b/app/views/layouts/navbars/_navbar_backoffice_dossiers_procedurecontroller_index.html.haml
index 64e5e776d..cc23e5ca2 100644
--- a/app/views/layouts/navbars/_navbar_backoffice_dossiers_procedurecontroller_index.html.haml
+++ b/app/views/layouts/navbars/_navbar_backoffice_dossiers_procedurecontroller_index.html.haml
@@ -3,7 +3,7 @@
 .col-lg-3.col-md-3.col-sm-3.col-xs-3.options
   .row
     .col-lg-12.col-md-12.col-sm-12.col-xs-12
-      %a.button_navbar#pref_list_dossier_open_action{ href: '#', type: :button, 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
+      %a.button-navbar#pref-list-dossier-open-action{ href: '#', type: :button, 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
         %i.fa.fa-pencil
         Modifier le tableau
       %span.caret-right
diff --git a/app/views/layouts/navbars/_navbar_log_options.html.haml b/app/views/layouts/navbars/_navbar_log_options.html.haml
index 6d04a698a..467e9b443 100644
--- a/app/views/layouts/navbars/_navbar_log_options.html.haml
+++ b/app/views/layouts/navbars/_navbar_log_options.html.haml
@@ -1,15 +1,15 @@
 - if user_signed_in?
-  #sign_out.col-xs-2.no-padding
+  #sign-out.col-xs-2.no-padding
     = render partial: 'users/login_banner'
     = render partial: 'layouts/credentials'
 - elsif gestionnaire_signed_in?
-  #sign_out.col-xs-2.no-padding
+  #sign-out.col-xs-2.no-padding
     = render partial: 'gestionnaires/login_banner'
     = render partial: 'layouts/credentials'
 - elsif administrateur_signed_in?
-  #sign_out.col-xs-2.no-padding
+  #sign-out.col-xs-2.no-padding
     = render partial: 'administrateurs/login_banner'
     = render partial: 'layouts/credentials'
 - else
-  #sign_in.col-xs-2
+  #sign-in.col-xs-2
     = link_to "Connexion", new_user_session_path, :class => 'btn btn-lg btn-primary'
diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml
index 513517202..f41400e64 100644
--- a/app/views/root/landing.html.haml
+++ b/app/views/root/landing.html.haml
@@ -16,7 +16,7 @@
         %p.mt-1 Vous êtes intéressés ?
         %p= link_to 'Programmer une démo', "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS", target: '_blank', class: 'btn btn-danger btn-lg'
 
-#landing_body.max-size
+#landing-body.max-size
   .row#etapes.center
     #create_1.col-lg-3.col-md-3.col-sm-3.col-xs-3
       %img{ src: image_url('etapes/create_1.png') }
@@ -78,7 +78,7 @@
 
   .split-hr-left
 
-  #request_access.row.center
+  #request-access.row.center
     .col-xs-12.col-sm-12.col-md-12.col-lg-12
     %h3 Envie de commencer à créer votre démarche ?
 
diff --git a/app/views/users/carte/_map.html.haml b/app/views/users/carte/_map.html.haml
index ffd2b3343..80f1bbf36 100644
--- a/app/views/users/carte/_map.html.haml
+++ b/app/views/users/carte/_map.html.haml
@@ -1,4 +1,4 @@
-#carte_page.row
+#carte-page.row
   .col-md-12.col-lg-12#map{ class: dossier.procedure.module_api_carto.classes }
 
   - if dossier.procedure.module_api_carto.quartiers_prioritaires
diff --git a/app/views/users/carte/show.html.haml b/app/views/users/carte/show.html.haml
index de4a0505f..db8d0115e 100644
--- a/app/views/users/carte/show.html.haml
+++ b/app/views/users/carte/show.html.haml
@@ -1,4 +1,4 @@
-.row#carto_page
+.row#carto-page
   .col-lg-12.col-md-12.col-sm-12.col-xs-12
     %h2
       Localisation
@@ -11,7 +11,7 @@
         %i.fa.fa-pencil
         Ajouter une zone
 
-      %span#search_by_address{ style: 'margin-left: 20px;' }
+      %span#search-by-address{ style: 'margin-left: 20px;' }
         %input.form-control{ type: :address, placeholder: 'Rechercher une adresse' }
       %br
       %br
diff --git a/app/views/users/description/_champs.html.haml b/app/views/users/description/_champs.html.haml
index d6c5184b7..ab43c5923 100644
--- a/app/views/users/description/_champs.html.haml
+++ b/app/views/users/description/_champs.html.haml
@@ -7,7 +7,7 @@
     = render partial: render_partial_url, locals: { libelle: 'Dossier', order_place: -1, champs: @champs }
   - @headers.each do |header|
     .row
-      %div{ class: "type_champ-#{header.type_champ}" }
+      %div{ class: "type-champ-#{header.type_champ.gsub('_', '-')}" }
         = render partial: render_partial_url, locals: { libelle: header.libelle, order_place: header.order_place, champs: @champs }
 - else
   .row
diff --git a/app/views/users/description/_show.html.haml b/app/views/users/description/_show.html.haml
index 627773625..d83503308 100644
--- a/app/views/users/description/_show.html.haml
+++ b/app/views/users/description/_show.html.haml
@@ -1,4 +1,4 @@
-.container#description_page
+.container#description-page
   - unless @dossier.procedure.lien_notice.blank?
     #lien_notice_panel.row{ style: 'width: 280px; position: fixed; background-color: white; right: 5%; top: 80px; z-index: 200;' }
       .panel.panel-info{ style: 'margin-bottom: 0;' }
@@ -17,7 +17,7 @@
   -# TODO use form_for
   = form_tag(url_for({ controller: 'users/description', action: :update, dossier_id: @dossier.id }), class: 'form', method: 'POST', multipart: true) do
     - unless @champs.nil?
-      #liste_champs
+      #liste-champs
         = render partial: 'users/description/champs', locals: { private: false }
 
     - if !@procedure.lien_demarche.blank? || @procedure.cerfa_flag || @dossier.types_de_piece_justificative.size > 0
diff --git a/app/views/users/description/champs/_header_section.html.haml b/app/views/users/description/champs/_header_section.html.haml
index 410563165..b75094c2a 100644
--- a/app/views/users/description/champs/_header_section.html.haml
+++ b/app/views/users/description/champs/_header_section.html.haml
@@ -1,4 +1,4 @@
-.default_data_block.default_visible
+.default-data-block.default_visible
   .row.show-block.infos
     .header
       .col-xs-12.title
diff --git a/app/views/users/dossiers/_list.html.haml b/app/views/users/dossiers/_list.html.haml
index 89d902533..969e680f2 100644
--- a/app/views/users/dossiers/_list.html.haml
+++ b/app/views/users/dossiers/_list.html.haml
@@ -1,5 +1,5 @@
 - unless smart_listing.empty?
-  %table#dossiers_list.table
+  %table#dossiers-list.table
     %thead
       %th#sort-id.col-md-1.col-lg-1.col-sm-1.col-xs-1= smart_listing.sortable 'Numéro', 'id'
       %th#sort-libelle.col-xs-5= smart_listing.sortable 'Procédure', 'procedure.libelle'
diff --git a/app/views/users/dossiers/add_siret/show.html.haml b/app/views/users/dossiers/add_siret/show.html.haml
index 9cf12e4a3..134d78a16 100644
--- a/app/views/users/dossiers/add_siret/show.html.haml
+++ b/app/views/users/dossiers/add_siret/show.html.haml
@@ -1,2 +1,2 @@
-.row.etape.etape_2
+.row.etape.etape-2
   = render partial: 'dossiers/etapes/etape_2/entreprise'
diff --git a/app/views/users/dossiers/index.html.haml b/app/views/users/dossiers/index.html.haml
index 3811c1ed8..0c0de17f4 100644
--- a/app/views/users/dossiers/index.html.haml
+++ b/app/views/users/dossiers/index.html.haml
@@ -1,5 +1,5 @@
-#users_index
-  .default_data_block.default_visible
+#users-index
+  .default-data-block.default_visible
     .row.show-block#new_dossiers
       .header
         .col-lg-10.col-md-10.col-sm-10.col-xs-10.title
diff --git a/app/views/users/passwords/edit.html.haml b/app/views/users/passwords/edit.html.haml
index 2e6a246f4..d1688e75c 100644
--- a/app/views/users/passwords/edit.html.haml
+++ b/app/views/users/passwords/edit.html.haml
@@ -28,7 +28,7 @@
 
 = devise_error_messages!
 
-#form_login
+#form-login
   .flag
     = image_tag(image_url(LOGO_NAME))
   %br
@@ -36,7 +36,7 @@
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
       = f.hidden_field :reset_password_token
       %h4
diff --git a/app/views/users/passwords/new.html.haml b/app/views/users/passwords/new.html.haml
index 8a62b7652..fa5410532 100644
--- a/app/views/users/passwords/new.html.haml
+++ b/app/views/users/passwords/new.html.haml
@@ -29,7 +29,7 @@
 = devise_error_messages!
 
 %br
-#form_login
+#form-login
   .flag
     = image_tag(image_url(LOGO_NAME))
   %br
@@ -37,7 +37,7 @@
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
       %h4
         = f.label :email
diff --git a/app/views/users/recapitulatif/_modal_upload_pj.html.haml b/app/views/users/recapitulatif/_modal_upload_pj.html.haml
index 63c3e5322..58adcae3f 100644
--- a/app/views/users/recapitulatif/_modal_upload_pj.html.haml
+++ b/app/views/users/recapitulatif/_modal_upload_pj.html.haml
@@ -1,4 +1,4 @@
-#UploadPJmodal.modal.fade{ "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1" }
+#upload-pj-modal.modal.fade{ "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1" }
   .modal-dialog{ :role => "document" }
     .modal-content
       - @dossier = @facade.dossier
diff --git a/app/views/users/recapitulatif/show.html.haml b/app/views/users/recapitulatif/show.html.haml
index 672ab5867..f04ac5a43 100644
--- a/app/views/users/recapitulatif/show.html.haml
+++ b/app/views/users/recapitulatif/show.html.haml
@@ -1,2 +1,2 @@
-.col-lg-12.col-md-12.col-sm-12.col-xs-12#users_recapitulatif_dossier_show
+.col-lg-12.col-md-12.col-sm-12.col-xs-12#users-recapitulatif-dossier-show
   = render partial: "dossiers/dossier_show"
diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml
index 82da47322..a81def70b 100644
--- a/app/views/users/registrations/new.html.haml
+++ b/app/views/users/registrations/new.html.haml
@@ -28,7 +28,7 @@
 
 = devise_error_messages!
 
-#form_login
+#form-login
   %br
   .flag
     = image_tag(image_url(LOGO_NAME))
@@ -37,7 +37,7 @@
 
   %br
   %br
-  #new_user
+  #new-user
     = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
       %h4
         = f.label :email
diff --git a/app/views/users/sessions/_resume_procedure.html.haml b/app/views/users/sessions/_resume_procedure.html.haml
index 236bf7a10..bf385234e 100644
--- a/app/views/users/sessions/_resume_procedure.html.haml
+++ b/app/views/users/sessions/_resume_procedure.html.haml
@@ -10,7 +10,7 @@
       #logo_procedure.flag
         = image_tag( @dossier.procedure.decorate.logo_img )
 
-      %h2#titre_procedure.text-info
+      %h2#titre-procedure.text-info
         = @dossier.procedure.libelle
       %p.procedure-description
         = h @dossier.procedure.description.html_safe
diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml
index add5365c3..51ba7cda6 100644
--- a/app/views/users/sessions/new.html.haml
+++ b/app/views/users/sessions/new.html.haml
@@ -1,11 +1,11 @@
-#form_login.user_connexion_page
+#form-login.user_connexion_page
   %br
   = render partial: 'users/sessions/resume_procedure'
 
-  %h2#login_user
+  %h2#login-user
     = t('dynamics.users.connexion_title')
 
-  %a.btn_fc#btn_fcp{ href: '/france_connect/particulier' }
+  %a.btn-fc#btn-fcp{ href: '/france_connect/particulier' }
     = image_tag 'franceconnect_logo.png'
 
   %br
@@ -15,13 +15,14 @@
   %hr
 
   .text-left
-    = simple_form_for @user, url: user_session_path do |f|
-      = f.input :email
-      = f.input :password, label: 'Mot de passe', input_html: { value: @user.password }
-      - if devise_mapping.rememberable?
-        = f.input :remember_me, as: :boolean, label: 'Se souvenir de moi'
-      .text-center
-        = f.submit "Se connecter", class: 'btn btn-primary'
+    #new-user
+      = simple_form_for @user, url: user_session_path do |f|
+        = f.input :email
+        = f.input :password, label: 'Mot de passe', input_html: { value: @user.password }
+        - if devise_mapping.rememberable?
+          = f.input :remember_me, as: :boolean, label: 'Se souvenir de moi'
+        .text-center
+          = f.submit "Se connecter", class: 'btn btn-primary'
 
   - if @user.email != DemoEmails[:gestionnaire] && @user.email != DemoEmails[:admin]
     = render "users/shared/links"
diff --git a/app/views/users/siret/_pro.html.haml b/app/views/users/siret/_pro.html.haml
index 34fe7aaaf..b5686009e 100644
--- a/app/views/users/siret/_pro.html.haml
+++ b/app/views/users/siret/_pro.html.haml
@@ -2,7 +2,7 @@
   .flag
     = image_tag(image_url(LOGO_NAME))
   %br
-  %h2#titre_procedure.text-info
+  %h2#titre-procedure.text-info
     = @procedure.libelle
 
   %p
diff --git a/app/views/users/siret/index.html.haml b/app/views/users/siret/index.html.haml
index a56f21779..c189ce64e 100644
--- a/app/views/users/siret/index.html.haml
+++ b/app/views/users/siret/index.html.haml
@@ -1,3 +1,3 @@
-.container.center#users_siret_index
+.container.center#users-siret-index
   .row
     = render partial: 'pro'
diff --git a/spec/features/admin/connection_spec.rb b/spec/features/admin/connection_spec.rb
index 58b256be7..9915669c1 100644
--- a/spec/features/admin/connection_spec.rb
+++ b/spec/features/admin/connection_spec.rb
@@ -6,7 +6,7 @@ feature 'Administrator connection' do
     visit new_administrateur_session_path
   end
   scenario 'administrator is on admin loggin page' do
-    expect(page).to have_css('#form_login.user_connexion_page')
+    expect(page).to have_css('#form-login.user_connexion_page')
   end
 
   context "admin fills form and log in" do
@@ -25,15 +25,15 @@ feature 'Administrator connection' do
       end
       scenario 'it displays the menu' do
         expect(page).to have_css('a#profile')
-        expect(page).to have_css('#sign_out')
+        expect(page).to have_css('#sign-out')
         expect(page).to have_css('a.fa-sign-out')
       end
-      context 'when clicking on sign_out' do
+      context 'when clicking on sign-out' do
         before do
           stub_request(:get, "https://api.github.com/repos/sgmap/tps/releases/latest").
               to_return(:status => 200, :body => '{"tag_name": "plip", "body": "blabla", "published_at": "2016-02-09T16:46:47Z"}', :headers => {})
 
-          page.find_by_id('sign_out').find('a.fa-sign-out').click
+          page.find_by_id('sign-out').find('a.fa-sign-out').click
         end
         scenario 'admin is redireted to home page' do
           expect(page).to have_css('#landing')
diff --git a/spec/features/backoffice/connection_spec.rb b/spec/features/backoffice/connection_spec.rb
index 419e14853..603546fb5 100644
--- a/spec/features/backoffice/connection_spec.rb
+++ b/spec/features/backoffice/connection_spec.rb
@@ -30,7 +30,7 @@ feature 'when gestionnaire come to /backoffice and is not authenticated' do
       page.click_on 'Se connecter'
     end
     scenario 'he is redirected to /backoffice' do
-      expect(page).to have_css('#backoffice_index')
+      expect(page).to have_css('#backoffice-index')
     end
   end
 end
diff --git a/spec/features/backoffice/index_show_procedure_spec.rb b/spec/features/backoffice/index_show_procedure_spec.rb
index 33add73bd..d24910eca 100644
--- a/spec/features/backoffice/index_show_procedure_spec.rb
+++ b/spec/features/backoffice/index_show_procedure_spec.rb
@@ -22,28 +22,28 @@ feature 'As an Accompagnateur I can navigate and use each functionnality around
   context 'On index' do
 
     scenario 'Switching between procedures' do
-      page.all('#procedure_list a').first.click
+      page.all('#procedure-list a').first.click
       expect(page).to have_current_path(backoffice_dossiers_procedure_path(id: procedure_1.id.to_s), only_path: true)
       expect(page.find('#all_dossiers .count').text).to eq('30 dossiers')
-      page.all('#procedure_list a').last.click
+      page.all('#procedure-list a').last.click
       expect(page).to have_current_path(backoffice_dossiers_procedure_path(id: procedure_2.id.to_s), only_path: true)
       expect(page.find('#all_dossiers .count').text).to eq('22 dossiers')
     end
 
     scenario 'Searching with search bar', js: true do
-      page.find_by_id('search_area').trigger('click')
+      page.find_by_id('search-area').trigger('click')
       fill_in 'q', with: (procedure_1.dossiers.first.id + 14)
-      page.find_by_id('search_button').click
+      page.find_by_id('search-button').click
       page.find_by_id("tr_dossier_#{(procedure_1.dossiers.first.id + 14)}").click
       expect(page).to have_current_path("/backoffice/dossiers/#{(procedure_1.dossiers.first.id + 14)}")
     end
 
     scenario 'Following dossier' do
-      page.all('#procedure_list a').first.click
+      page.all('#procedure-list a').first.click
       expect(page.all('#follow_dossiers .smart-listing')[0]['data-item-count']).to eq ("0")
       page.find_by_id('all_dossiers').click
-      expect(page.all('#dossiers_list a').first.text).to eq('Suivre')
-      page.all('#dossiers_list a').first.click
+      expect(page.all('#dossiers-list a').first.text).to eq('Suivre')
+      page.all('#dossiers-list a').first.click
       expect(page.all('#follow_dossiers .smart-listing')[0]['data-item-count']).to eq ("1")
     end
 
diff --git a/spec/features/backoffice/lateral_page_pref_list_dossier_backoffice_spec.rb b/spec/features/backoffice/lateral_page_pref_list_dossier_backoffice_spec.rb
index 13c176b46..9a36bf116 100644
--- a/spec/features/backoffice/lateral_page_pref_list_dossier_backoffice_spec.rb
+++ b/spec/features/backoffice/lateral_page_pref_list_dossier_backoffice_spec.rb
@@ -17,20 +17,20 @@ feature 'usage of pref list dossier lateral panel', js: true do
 
   context 'when user enter good credentials' do
     scenario 'he is redirected to /backoffice' do
-      expect(page).to have_css('#backoffice_index')
+      expect(page).to have_css('#backoffice-index')
     end
 
     scenario 'lateral panel is masked' do
-      expect(page).to have_css('#pref_list_menu', visible: false)
+      expect(page).to have_css('#pref-list-menu', visible: false)
     end
 
     context 'when on click on pref list button' do
       before do
-        page.click_on 'pref_list_dossier_open_action'
+        page.click_on 'pref-list-dossier-open-action'
       end
 
       scenario 'lateral panel is appeared' do
-        expect(page).to have_css('#pref_list_menu')
+        expect(page).to have_css('#pref-list-menu')
       end
 
       context 'when on click on add attribut button' do
@@ -65,12 +65,12 @@ feature 'usage of pref list dossier lateral panel', js: true do
 
           context 'when on click on close pref list button' do
             before do
-              page.click_on 'pref_list_dossier_close_action'
+              page.click_on 'pref-list-dossier-close-action'
             end
 
             scenario 'lateral panel is masked' do
               wait_for_ajax
-              expect(page).to have_css('#pref_list_menu', visible: false)
+              expect(page).to have_css('#pref-list-menu', visible: false)
             end
           end
         end
diff --git a/spec/features/backoffice/lateral_page_pref_list_dossier_by_procedure_backoffice_spec.rb b/spec/features/backoffice/lateral_page_pref_list_dossier_by_procedure_backoffice_spec.rb
index 0255d9a46..9ed134a75 100644
--- a/spec/features/backoffice/lateral_page_pref_list_dossier_by_procedure_backoffice_spec.rb
+++ b/spec/features/backoffice/lateral_page_pref_list_dossier_by_procedure_backoffice_spec.rb
@@ -17,7 +17,7 @@ feature 'usage of pref list dossier lateral panel by procedure', js: true do
 
   context 'when user enter good credentials' do
     scenario 'he is redirected to /backoffice/dossiers/' do
-      expect(page).to have_css('#backoffice_index')
+      expect(page).to have_css('#backoffice-index')
     end
 
     describe 'user navigate to dossiers list by procedure' do
@@ -26,17 +26,17 @@ feature 'usage of pref list dossier lateral panel by procedure', js: true do
       end
 
       scenario 'lateral panel is masked' do
-        expect(page).to have_css('#pref_list_menu', visible: false)
+        expect(page).to have_css('#pref-list-menu', visible: false)
       end
 
       context 'when on click on pref list button' do
         before do
-          page.click_on 'pref_list_dossier_open_action'
+          page.click_on 'pref-list-dossier-open-action'
         end
 
         scenario 'lateral panel is appeared' do
           wait_for_ajax
-          expect(page).to have_css('#pref_list_menu')
+          expect(page).to have_css('#pref-list-menu')
         end
 
         context 'when on click on add attribut specific at the procedure button' do
@@ -66,12 +66,12 @@ feature 'usage of pref list dossier lateral panel by procedure', js: true do
 
             context 'when on click on close pref list button' do
               before do
-                page.click_on 'pref_list_dossier_close_action'
+                page.click_on 'pref-list-dossier-close-action'
               end
 
               scenario 'lateral panel is masked' do
                 wait_for_ajax
-                expect(page).to have_css('#pref_list_menu', visible: false)
+                expect(page).to have_css('#pref-list-menu', visible: false)
               end
             end
           end
diff --git a/spec/features/backoffice/navigate_to_dossier_spec.rb b/spec/features/backoffice/navigate_to_dossier_spec.rb
index b7f30467c..b9c2222fa 100644
--- a/spec/features/backoffice/navigate_to_dossier_spec.rb
+++ b/spec/features/backoffice/navigate_to_dossier_spec.rb
@@ -29,7 +29,7 @@ feature 'on backoffice page', js: true do
       end
 
       scenario 'it redirect to dossier page' do
-        expect(page).to have_css('#backoffice_dossier_show')
+        expect(page).to have_css('#backoffice-dossier-show')
       end
     end
   end
@@ -45,7 +45,7 @@ feature 'on backoffice page', js: true do
     end
 
     scenario 'it redirect to dossier page' do
-      expect(page).to have_css('#backoffice_dossier_show')
+      expect(page).to have_css('#backoffice-dossier-show')
     end
   end
 end
diff --git a/spec/features/backoffice/search_file_spec.rb b/spec/features/backoffice/search_file_spec.rb
index d91ea8bbf..dc6baeb85 100644
--- a/spec/features/backoffice/search_file_spec.rb
+++ b/spec/features/backoffice/search_file_spec.rb
@@ -18,10 +18,10 @@ feature 'search file on gestionnaire backoffice' do
 
         visit backoffice_dossiers_url
         page.find_by_id(:q).set terms
-        page.find_by_id(:search_button).click
+        page.find_by_id("search-button").click
       end
 
-      it { expect(page).to have_css('#backoffice_search') }
+      it { expect(page).to have_css('#backoffice-search') }
 
       context 'when terms input is empty' do
         it { expect(page).to have_content('Aucun dossier') }
diff --git a/spec/features/description_page/upload_piece_justificative_spec.rb b/spec/features/description_page/upload_piece_justificative_spec.rb
index 4f999037c..bd8cffc8a 100644
--- a/spec/features/description_page/upload_piece_justificative_spec.rb
+++ b/spec/features/description_page/upload_piece_justificative_spec.rb
@@ -9,14 +9,14 @@ feature 'user is on description page' do
 
     visit users_dossier_description_path dossier
 
-    within('#new_user') do
+    within('#new-user') do
       page.find_by_id('user_email').set dossier.user.email
       page.find_by_id('user_password').set dossier.user.password
       page.click_on 'Se connecter'
     end
   end
 
-  it { expect(page).to have_css('#description_page') }
+  it { expect(page).to have_css('#description-page') }
 
   context 'he fill description fields' do
     before do
diff --git a/spec/features/france_connect/france_connect_particulier_spec.rb b/spec/features/france_connect/france_connect_particulier_spec.rb
index 01592e8af..1ed8ca15f 100644
--- a/spec/features/france_connect/france_connect_particulier_spec.rb
+++ b/spec/features/france_connect/france_connect_particulier_spec.rb
@@ -26,7 +26,7 @@ feature 'France Connect Particulier  Connexion' do
     end
 
     scenario 'link to France Connect is present' do
-      expect(page).to have_css('a#btn_fcp')
+      expect(page).to have_css('a#btn-fcp')
     end
 
     context 'and click on france connect link' do
@@ -49,7 +49,7 @@ feature 'France Connect Particulier  Connexion' do
 
         context 'when is the first connexion' do
           before do
-            page.find_by_id('btn_fcp').click
+            page.find_by_id('btn-fcp').click
           end
           scenario 'he is redirected to france connect particulier page' do
             expect(page).to have_content('Nouvelle connexion')
@@ -70,7 +70,7 @@ feature 'France Connect Particulier  Connexion' do
         context 'when is not the first connexion' do
           before do
             create(:user, france_connect_information: france_connect_information)
-            page.find_by_id('btn_fcp').click
+            page.find_by_id('btn-fcp').click
           end
 
           scenario 'he is redirected to user dossiers page' do
@@ -83,11 +83,11 @@ feature 'France Connect Particulier  Connexion' do
         before do
           allow_any_instance_of(FranceConnectParticulierClient).to receive(:authorization_uri).and_return(france_connect_particulier_callback_path(code: code))
           allow(FranceConnectService).to receive(:retrieve_user_informations_particulier) { raise Rack::OAuth2::Client::Error.new(500, error: 'Unknown') }
-          page.find_by_id('btn_fcp').click
+          page.find_by_id('btn-fcp').click
         end
 
         scenario 'he is redirected to login page' do
-          expect(page).to have_css('a#btn_fcp')
+          expect(page).to have_css('a#btn-fcp')
         end
 
         scenario 'error message is displayed' do
diff --git a/spec/features/users/complete_demande_spec.rb b/spec/features/users/complete_demande_spec.rb
index 6554a4004..2f1eb1d42 100644
--- a/spec/features/users/complete_demande_spec.rb
+++ b/spec/features/users/complete_demande_spec.rb
@@ -12,21 +12,21 @@ feature 'user path for dossier creation' do
     end
 
     scenario 'he is redirected on login page' do
-      expect(page).to have_css('#login_user')
+      expect(page).to have_css('#login-user')
       expect(page).to have_css('#logo_procedure')
-      expect(page).to have_css('#titre_procedure')
+      expect(page).to have_css('#titre-procedure')
     end
 
     context 'user sign_in' do
       before do
-        within('#new_user') do
+        within('#new-user') do
           page.find_by_id('user_email').set user.email
           page.find_by_id('user_password').set user.password
           page.click_on 'Se connecter'
         end
       end
       scenario 'redirects to siret page' do
-        expect(page).to have_css('#dossier_siret')
+        expect(page).to have_css('#dossier-siret')
       end
       context 'sets siret' do
         before do
@@ -40,12 +40,12 @@ feature 'user path for dossier creation' do
           stub_request(:get, "https://api-dev.apientreprise.fr/v1/associations/#{siret}?token=#{SIADETOKEN}")
               .to_return(status: 404, body: '')
 
-          page.find_by_id('dossier_siret').set siret
+          page.find_by_id('dossier-siret').set siret
           page.click_on 'Valider'
         end
 
         scenario 'user is on page recap info entreprise' do
-          expect(page).to have_css('#recap_info_entreprise')
+          expect(page).to have_css('#recap-info-entreprise')
         end
 
         context 'when user would like change siret' do
@@ -54,7 +54,7 @@ feature 'user path for dossier creation' do
           end
 
           scenario 'redirects to siret page' do
-            expect(page).to have_css('#dossier_siret')
+            expect(page).to have_css('#dossier-siret')
           end
         end
 
@@ -64,7 +64,7 @@ feature 'user path for dossier creation' do
             page.find_by_id('etape_suivante').trigger('click')
           end
           scenario 'user is on description page' do
-            expect(page).to have_css('#description_page')
+            expect(page).to have_css('#description-page')
           end
           context 'user fill and validate description page' do
             before do
@@ -72,7 +72,7 @@ feature 'user path for dossier creation' do
               page.find_by_id('suivant').trigger('click')
             end
             scenario 'user is on recap page' do
-              expect(page).to have_css('#users_recapitulatif_dossier_show')
+              expect(page).to have_css('#users-recapitulatif-dossier-show')
             end
           end
         end
diff --git a/spec/features/users/dossier_creation_spec.rb b/spec/features/users/dossier_creation_spec.rb
index 4adf0e190..34715a567 100644
--- a/spec/features/users/dossier_creation_spec.rb
+++ b/spec/features/users/dossier_creation_spec.rb
@@ -45,7 +45,7 @@ feature 'As a User I wanna create a dossier' do
       login_as user, scope: :user
       visit commencer_path(procedure_path: procedure_with_siret.path)
       expect(page).to have_current_path(users_dossier_path(procedure_with_siret.dossiers.last.id.to_s), only_path: true)
-      fill_in 'dossier_siret', with: siret
+      fill_in 'dossier-siret', with: siret
       stub_request(:get, "https://api-dev.apientreprise.fr/v2/etablissements/#{siret}?token=#{SIADETOKEN}")
           .to_return(status: 200, body: File.read('spec/support/files/etablissement.json'))
       stub_request(:get, "https://api-dev.apientreprise.fr/v2/entreprises/#{siren}?token=#{SIADETOKEN}")
@@ -54,9 +54,9 @@ feature 'As a User I wanna create a dossier' do
           .to_return(status: 200, body: File.read('spec/support/files/exercices.json'))
       stub_request(:get, "https://api-dev.apientreprise.fr/v1/associations/#{siret}?token=#{SIADETOKEN}")
           .to_return(status: 404, body: '')
-      page.find_by_id('dossier_siret').set siret
+      page.find_by_id('dossier-siret').set siret
       page.find_by_id('submit-siret').trigger('click')
-      expect(page).to have_css('#recap_info_entreprise')
+      expect(page).to have_css('#recap-info-entreprise')
       find(:css, "#dossier_autorisation_donnees[value='1']").set(true)
       page.find_by_id('etape_suivante').trigger('click')
       expect(page).to have_current_path(users_dossier_carte_path(procedure_with_siret.dossiers.last.id.to_s), only_path: true)
diff --git a/spec/features/users/dossier_edition_spec.rb b/spec/features/users/dossier_edition_spec.rb
index 4dc3ccee7..13bbf29a0 100644
--- a/spec/features/users/dossier_edition_spec.rb
+++ b/spec/features/users/dossier_edition_spec.rb
@@ -14,7 +14,7 @@ feature 'As a User I want to edit a dossier I own' do
   context 'After sign_in, I can navigate through dossiers indexes and edit a dossier' do
 
     scenario 'After sign_in, I can see dossiers "à traiter" (default), and other indexes' do
-      expect(page.find('#a_traiter')['class'] ).to eq('active procedure_list_element')
+      expect(page.find('#a_traiter')['class'] ).to eq('active procedure-list-element')
       page.find_by_id('brouillon').click
       page.find_by_id('a_traiter').click
       page.find_by_id('en_instruction').click
diff --git a/spec/features/users/dossier_index_spec.rb b/spec/features/users/dossier_index_spec.rb
index 4d6ec1464..9db5bd1e3 100644
--- a/spec/features/users/dossier_index_spec.rb
+++ b/spec/features/users/dossier_index_spec.rb
@@ -24,30 +24,30 @@ xfeature 'As a User I want to sort and paginate dossiers', js: true do
 
     scenario 'Using sort' do
       visit "/users/dossiers?dossiers_smart_listing[sort][id]=asc"
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
-      expect(page.all(:css, '#dossiers_list tr')[2].text.split(" ").first).to eq(user.dossiers.second.id.to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
+      expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq(user.dossiers.second.id.to_s)
       visit "/users/dossiers?dossiers_smart_listing[sort][id]=desc"
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 50).to_s)
-      expect(page.all(:css, '#dossiers_list tr')[2].text.split(" ").first).to eq((user.dossiers.first.id + 49).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 50).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq((user.dossiers.first.id + 49).to_s)
       visit "/users/dossiers?dossiers_smart_listing[sort][id]=asc"
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
-      expect(page.all(:css, '#dossiers_list tr')[2].text.split(" ").first).to eq(user.dossiers.second.id.to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
+      expect(page.all(:css, '#dossiers-list tr')[2].text.split(" ").first).to eq(user.dossiers.second.id.to_s)
     end
 
     scenario 'Using pagination' do
       visit "/users/dossiers?dossiers_smart_listing[sort][id]=asc"
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq(user.dossiers.first.id.to_s)
       page.find('.next_page a').trigger('click')
       wait_for_ajax
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 10).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 10).to_s)
       page.find('.next_page a').trigger('click')
       wait_for_ajax
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 20).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id + 20).to_s)
       page.find('.prev a').trigger('click')
       wait_for_ajax
       page.find('.prev a').trigger('click')
       wait_for_ajax
-      expect(page.all(:css, '#dossiers_list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id).to_s)
+      expect(page.all(:css, '#dossiers-list tr')[1].text.split(" ").first).to eq((user.dossiers.first.id).to_s)
     end
   end
 
diff --git a/spec/features/users/drawing_a_zone_with_freedraw_spec.rb b/spec/features/users/drawing_a_zone_with_freedraw_spec.rb
index 57633a08b..1ecc5a0ee 100644
--- a/spec/features/users/drawing_a_zone_with_freedraw_spec.rb
+++ b/spec/features/users/drawing_a_zone_with_freedraw_spec.rb
@@ -12,11 +12,11 @@ feature 'drawing a zone with freedraw' do
     end
 
     scenario 'he is redirected to login page' do
-      expect(page).to have_css('#login_user')
+      expect(page).to have_css('#login-user')
     end
 
     scenario 'he logs in and he is redirected to carte page', vcr: { cassette_name: 'drawing_a_zone_with_freedraw_redirected_to_carte_page' } do
-      within('#new_user') do
+      within('#new-user') do
         page.find_by_id('user_email').set user.email
         page.find_by_id('user_password').set user.password
         page.click_on 'Se connecter'
@@ -45,7 +45,7 @@ feature 'drawing a zone with freedraw' do
         let(:module_api_carto) { create(:module_api_carto) }
 
         scenario 'he is redirect to user dossiers index' do
-          expect(page).to have_css('#users_index')
+          expect(page).to have_css('#users-index')
         end
 
         scenario 'alert message is present' do
diff --git a/spec/features/users/list_dossiers_spec.rb b/spec/features/users/list_dossiers_spec.rb
index 1ae783994..7419a03d4 100644
--- a/spec/features/users/list_dossiers_spec.rb
+++ b/spec/features/users/list_dossiers_spec.rb
@@ -12,7 +12,7 @@ feature 'user access to the list of his dossier' do
     last_updated_dossier.procedure.update_column(:libelle, 'PLIP')
 
     visit new_user_session_path
-    within('#new_user') do
+    within('#new-user') do
       page.find_by_id('user_email').set user.email
       page.find_by_id('user_password').set user.password
       page.click_on 'Se connecter'
@@ -36,7 +36,7 @@ feature 'user access to the list of his dossier' do
       page.find("#tr_dossier_#{dossier1.id}").click
     end
     scenario 'user is redirected to dossier page' do
-      expect(page).to have_css('#users_recapitulatif_dossier_show')
+      expect(page).to have_css('#users-recapitulatif-dossier-show')
     end
   end
 end
diff --git a/spec/features/users/onglets_link_spec.rb b/spec/features/users/onglets_link_spec.rb
index 7454df1e4..a3fef2dc3 100644
--- a/spec/features/users/onglets_link_spec.rb
+++ b/spec/features/users/onglets_link_spec.rb
@@ -27,7 +27,7 @@ feature 'on click on tabs button' do
       end
 
       scenario 'it redirect to users dossier termine' do
-        expect(page).to have_css('#users_index')
+        expect(page).to have_css('#users-index')
       end
     end
 
@@ -38,7 +38,7 @@ feature 'on click on tabs button' do
       end
 
       scenario 'it redirect to users dossier termine' do
-        expect(page).to have_css('#users_index')
+        expect(page).to have_css('#users-index')
       end
     end
 
@@ -49,7 +49,7 @@ feature 'on click on tabs button' do
       end
 
       scenario 'it redirect to users dossier termine' do
-        expect(page).to have_css('#users_index')
+        expect(page).to have_css('#users-index')
       end
     end
 
@@ -60,7 +60,7 @@ feature 'on click on tabs button' do
       end
 
       scenario 'it redirect to users dossier invites' do
-        expect(page).to have_css('#users_index')
+        expect(page).to have_css('#users-index')
       end
     end
   end
diff --git a/spec/features/users/start_demande_spec.rb b/spec/features/users/start_demande_spec.rb
index e3b8014b0..a908412a8 100644
--- a/spec/features/users/start_demande_spec.rb
+++ b/spec/features/users/start_demande_spec.rb
@@ -11,11 +11,11 @@ feature 'user arrive on siret page' do
       visit new_users_dossiers_path(procedure_id: procedure.id)
     end
     scenario 'he is redirected to login page' do
-      expect(page).to have_css('#login_user')
+      expect(page).to have_css('#login-user')
     end
     context 'when he enter login information' do
       before do
-        within('#new_user') do
+        within('#new-user') do
           page.find_by_id('user_email').set user.email
           page.find_by_id('user_password').set user.password
           page.click_on 'Se connecter'
@@ -35,12 +35,12 @@ feature 'user arrive on siret page' do
           stub_request(:get, "https://api-dev.apientreprise.fr/v1/associations/#{siret}?token=#{SIADETOKEN}")
               .to_return(status: 404, body: '')
 
-          page.find_by_id('dossier_siret').set siret
+          page.find_by_id('dossier-siret').set siret
           page.click_on 'Valider'
         end
         scenario 'he is redirected to recap info entreprise page' do
           wait_for_ajax
-          expect(page).to have_css('#recap_info_entreprise')
+          expect(page).to have_css('#recap-info-entreprise')
         end
       end
     end
diff --git a/spec/views/backoffice/dossiers/show.html.html_spec.rb b/spec/views/backoffice/dossiers/show.html.html_spec.rb
index 4003a65ef..865cb28ef 100644
--- a/spec/views/backoffice/dossiers/show.html.html_spec.rb
+++ b/spec/views/backoffice/dossiers/show.html.html_spec.rb
@@ -20,7 +20,7 @@ describe 'backoffice/dossiers/show.html.haml', type: :view do
 
     it 'button Modifier les document est present' do
       expect(rendered).not_to have_content('Modifier les documents')
-      expect(rendered).not_to have_css('#UploadPJmodal')
+      expect(rendered).not_to have_css('#upload-pj-modal')
     end
 
     it 'enterprise informations are present' do
@@ -28,7 +28,7 @@ describe 'backoffice/dossiers/show.html.haml', type: :view do
     end
 
     it 'dossier informations are present' do
-      expect(rendered).to have_selector('#infos_dossier')
+      expect(rendered).to have_selector('#infos-dossiers')
     end
 
     context 'edit link are present' do
diff --git a/spec/views/users/recapitulatif/show.html.haml_spec.rb b/spec/views/users/recapitulatif/show.html.haml_spec.rb
index 3503fad53..ce0e52275 100644
--- a/spec/views/users/recapitulatif/show.html.haml_spec.rb
+++ b/spec/views/users/recapitulatif/show.html.haml_spec.rb
@@ -17,7 +17,7 @@ describe 'users/recapitulatif/show.html.haml', type: :view do
       end
 
       it 'la section infos dossier est présente' do
-        expect(rendered).to have_selector('#infos_dossier')
+        expect(rendered).to have_selector('#infos-dossiers')
       end
 
       it 'le flux de commentaire est présent' do
@@ -73,7 +73,7 @@ describe 'users/recapitulatif/show.html.haml', type: :view do
 
       it 'button Modifier les document est present' do
         expect(rendered).to have_content('Modifier les documents')
-        expect(rendered).to have_css('#UploadPJmodal')
+        expect(rendered).to have_css('#upload-pj-modal')
       end
 
     end
diff --git a/spec/views/users/sessions/new.html.haml_spec.rb b/spec/views/users/sessions/new.html.haml_spec.rb
index 6e1dbeec9..cc7880f45 100644
--- a/spec/views/users/sessions/new.html.haml_spec.rb
+++ b/spec/views/users/sessions/new.html.haml_spec.rb
@@ -18,8 +18,8 @@ describe 'users/sessions/new.html.haml', type: :view do
       render
     end
 
-    it { expect(rendered).to have_selector('#form_login #logo_procedure') }
-    it { expect(rendered).to have_selector('#form_login #titre_procedure') }
+    it { expect(rendered).to have_selector('#form-login #logo_procedure') }
+    it { expect(rendered).to have_selector('#form-login #titre-procedure') }
     it { expect(rendered).to have_content(dossier.procedure.libelle) }
     it { expect(rendered).to have_content(dossier.procedure.description) }
   end
@@ -29,6 +29,6 @@ describe 'users/sessions/new.html.haml', type: :view do
       render
     end
 
-    it { expect(rendered).to have_selector('#form_login #logo_tps') }
+    it { expect(rendered).to have_selector('#form-login #logo_tps') }
   end
 end
diff --git a/spec/views/users/siret/index.html.haml_spec.rb b/spec/views/users/siret/index.html.haml_spec.rb
index 49de45ecc..e489bec08 100644
--- a/spec/views/users/siret/index.html.haml_spec.rb
+++ b/spec/views/users/siret/index.html.haml_spec.rb
@@ -21,7 +21,7 @@ describe 'users/siret/index.html.haml', type: :view do
     end
 
     it 'le titre de la procédure' do
-      expect(rendered).to have_selector('#titre_procedure')
+      expect(rendered).to have_selector('#titre-procedure')
     end
 
     context 'stockage de l\'ID de la procédure dans un champs hidden' do