Merge branch 'develop' into notifications

# Conflicts: # app/views/backoffice/dossiers/_list.html.haml
2016-12-26 10:53:05 +01:00 · 2016-12-26 10:53:05 +01:00 · 263d85ccee
commit 263d85ccee
parent c533bb0a88 31653ff553
58 changed files with 274 additions and 242 deletions
--- a/app/views/admin/accompagnateurs/_list_assign.html.haml
+++ b/app/views/admin/accompagnateurs/_list_assign.html.haml
@ -8,7 +8,7 @@

    - @accompagnateurs_assign.each do |accompagnateur|
      %tr
-        %td.col-md-1.col-lg-1.center
+        %td.col-md-1.col-lg-1.col-sm-1.col-xs-1.col-sm-1.col-xs-1.center
          %a.btn.btn-primary{href: "#{admin_procedure_accompagnateurs_path(procedure_id: @procedure.id, accompagnateur_id: accompagnateur.id, to: AccompagnateurService::NOT_ASSIGN)}", 'data-method' => 'put'}
            .fa.fa-arrow-left
        %td{style:'padding-top: 11px; font-size:15px; text-align:right'}= accompagnateur.email
--- a/app/views/admin/accompagnateurs/_list_not_assign.html.haml
+++ b/app/views/admin/accompagnateurs/_list_not_assign.html.haml
@ -14,7 +14,7 @@

    - @accompagnateurs_not_assign.each do |accompagnateur|
      %tr
-        %td.col-md-11.col-lg-11{style:'padding-top: 11px; font-size:15px'}= accompagnateur.email
+        %td.col-md-11.col-sm-11.col-xs-11.col-lg-11{style:'padding-top: 11px; font-size:15px'}= accompagnateur.email
        %td.center
          %a.btn.btn-success.gestionnaire-affectation{href: "#{admin_procedure_accompagnateurs_path(procedure_id: @procedure.id, accompagnateur_id: accompagnateur.id, to: AccompagnateurService::ASSIGN)}", 'data-method' => 'put'}
            .fa.fa-arrow-right
--- a/app/views/admin/accompagnateurs/show.html.haml
+++ b/app/views/admin/accompagnateurs/show.html.haml
@ -1,7 +1,7 @@
 .row.white-back
  #accompagnateur_form
    .row
-      .col-md-6.col-lg-6
+      .col-md-6.col-sm-6.col-xs-6.col-lg-6
        %h3.text-info Disponibles
        = smart_listing_render :accompagnateurs_not_assign

@ -11,13 +11,13 @@
        #procedure_new.section.section-label
          = form_for @gestionnaire, url: {controller: 'admin/gestionnaires', action: :create} do |f|
            .row
-              .col-md-5.col-lg-5
+              .col-md-5.col-sm-5.col-xs-5.col-lg-5
                = hidden_field_tag :procedure_id, params[:procedure_id]
                =render partial: 'admin/gestionnaires/informations', locals: {f: f}
-              .col-md-2.col-lg-2
+              .col-md-2.col-sm-2.col-xs-2.col-lg-2
                %br
                %br
                = f.submit 'Valider', class: 'btn btn-info', style: 'float:left', id: 'add-gestionnaire-email'
-      .col-md-6.col-lg-6
+      .col-md-6.col-sm-6.col-xs-6.col-lg-6
        %h3.text-success Affectés
        = smart_listing_render :accompagnateurs_assign
--- a/app/views/admin/gestionnaires/index.html.haml
+++ b/app/views/admin/gestionnaires/index.html.haml
@ -2,18 +2,18 @@
 %br

 .row
-  .col-md-4.col-lg-4
+  .col-md-4.col-sm-4.col-xs-4.col-lg-4
    = smart_listing_render :gestionnaires
-  .col-md-1.col-lg-1
+  .col-md-1.col-lg-1.col-sm-1.col-xs-1.col-sm-1.col-xs-1
    &nbsp;
-  .col-md-6.col-lg-6
+  .col-md-6.col-sm-6.col-xs-6.col-lg-6
    %h3 Ajouter un accompagnateur
    #procedure_new.section.section-label
      = form_for @gestionnaire, url: {controller: 'admin/gestionnaires', action: :create} do |f|
        .row
-          .col-md-5.col-lg-5
+          .col-md-5.col-sm-5.col-xs-5.col-lg-5
            = render partial: 'informations', locals: {f: f}
-          .col-md-2.col-lg-2
+          .col-md-2.col-sm-2.col-xs-2.col-lg-2
            %br
            %br
            = f.submit 'Valider', class: 'btn btn-info', style: 'float:left'
--- a/app/views/admin/procedures/_informations.html.haml
+++ b/app/views/admin/procedures/_informations.html.haml
@ -12,7 +12,7 @@
      = f.text_field key, class: 'form-control', placeholder: value

 .row
-  .col-md-6.col-lg-6
+  .col-md-6.col-sm-6.col-xs-6.col-lg-6
    %h4 Logo de la procédure
    - unless @procedure.logo.blank?
      = image_tag @procedure.decorate.logo_img, {style: 'height: 40px; display: inline; margin-right: 6px', id: 'preview_procedure_logo'}
@ -21,7 +21,7 @@
    %div{style:'margin-top:5px'}
      %i
        Fichier accepté : JPG / JPEG / PNG
-  .col-md-6.col-lg-6
+  .col-md-6.col-sm-6.col-xs-6.col-lg-6
    %h4 Drapeau européen
    %label
      =f.check_box :euro_flag
@ -30,7 +30,7 @@
 %br

 .row
-  .col-md-6.col-lg-6
+  .col-md-6.col-sm-6.col-xs-6.col-lg-6
    %h4 Cartographie

    = f.fields_for :module_api_carto, @procedure.module_api_carto do |ff|
@ -48,7 +48,7 @@
            = ff.check_box :cadastre
            Cadastre

-  .col-md-6.col-lg-6
+  .col-md-6.col-sm-6.col-xs-6.col-lg-6
    %h4 Formulaire / CERFA
    %label
      =f.check_box :cerfa_flag
@ -58,7 +58,7 @@

 %br
 .row
-  .col-md-6.col-lg-6
+  .col-md-6.col-sm-6.col-xs-6.col-lg-6
    %h4 Particuliers
    %div
      %label
--- a/app/views/admin/procedures/_list.html.haml
+++ b/app/views/admin/procedures/_list.html.haml
@ -12,7 +12,7 @@
      - procedure = procedure.decorate
      %tr{id: "tr_dossier_#{procedure.id}", 'data-dossier_url' => admin_procedure_path(id: procedure.id)}
        %td= procedure.id
-        %td.col-md-6.col-lg-6
+        %td.col-md-6.col-sm-6.col-xs-6.col-lg-6
          = procedure.libelle
        - if @active_class
          %td= link_to procedure.lien, procedure.lien, class: 'procedure-lien', 'data-method' => :get
--- a/app/views/admin/procedures/index.html.haml
+++ b/app/views/admin/procedures/index.html.haml
@ -2,12 +2,12 @@
  .default_data_block.default_visible
    %div.row.show-block#new_dossiers
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          Procédures
        %a{href:'/admin/procedures/new'}
-          %div#new-procedure.col-lg-2.col-md-2.action
+          %div#new-procedure.col-lg-2.col-md-2.col-sm-2.col-xs-2.action
            Nouvelle

      %div.body
--- a/app/views/admin/procedures/show.html.haml
+++ b/app/views/admin/procedures/show.html.haml
@ -59,12 +59,12 @@
    %h3 Détails

    .row{style:'margin-right:3%; margin-left:3%;'}
-      .description.col-md-3.col-lg-3
+      .description.col-md-3.col-sm-3.col-xs-3.col-lg-3
        %h4.text-info
          = @facade.procedure.libelle

        = h @facade.procedure.description.html_safe
-      .champs.col-md-3.col-lg-3
+      .champs.col-md-3.col-sm-3.col-xs-3.col-lg-3
        %h4.text-info
          Champs
          .badge.progress-bar-info
@ -73,7 +73,7 @@
          = champ.libelle
          %br

-      .champs_private.col-md-3.col-lg-3
+      .champs_private.col-md-3.col-sm-3.col-xs-3.col-lg-3
        %h4.text-info
          Champs privés
          .badge.progress-bar-info
@ -82,7 +82,7 @@
          = champ.libelle
          %br

-      .pieces_justificatives.col-md-3.col-lg-3
+      .pieces_justificatives.col-md-3.col-sm-3.col-xs-3.col-lg-3
        %h4.text-info
          Pièces justificatives
          .badge.progress-bar-info
@ -95,7 +95,7 @@
      =t('dynamics.admin.procedure.stats.title')

    .row
-      .col-md-6.col-lg-6{style:'margin-left:3%'}
+      .col-md-6.col-sm-6.col-xs-6.col-lg-6{style:'margin-left:3%'}
        %h4 Total
        %div
          = @facade.dossiers_total
@ -125,7 +125,7 @@
          %p
            0

-      .col-md-5.col-lg-5
+      .col-md-5.col-sm-5.col-xs-5.col-lg-5
        %h4 Non archivés
        = javascript_include_tag "https://code.highcharts.com/highcharts.js", "chartkick"
        - if @facade.dossiers_for_pie_highchart.blank?
--- a/app/views/administrations/_list.html.haml
+++ b/app/views/administrations/_list.html.haml
@ -1,10 +1,10 @@
 - unless smart_listing.empty?
  %table.table
    %thead
-      %th.col-md-4.col-lg-4= smart_listing.sortable 'Email', :email
-      %th.col-md-4.col-lg-4= smart_listing.sortable 'Date de dernière connexion', :last_sign_in_at
-      %th.col-md-2.col-lg-2 Procédure active
-      %th.col-md-2.col-lg-2 Dossier en cours
+      %th.col-md-4.col-sm-4.col-xs-4.col-lg-4= smart_listing.sortable 'Email', :email
+      %th.col-md-4.col-sm-4.col-xs-4.col-lg-4= smart_listing.sortable 'Date de dernière connexion', :last_sign_in_at
+      %th.col-md-2.col-sm-2.col-xs-2.col-lg-2 Procédure active
+      %th.col-md-2.col-sm-2.col-xs-2.col-lg-2 Dossier en cours

    - @admins.each do |admin|
      %tr
--- a/app/views/backoffice/commentaires/_commentaire.html.haml
+++ b/app/views/backoffice/commentaires/_commentaire.html.haml
@ -1,13 +1,13 @@
 %div.commentaire
  .row
-    %div.col-lg-12.col-md-12.comment-header
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.comment-header
      = commentaire.header
  .row
-    %div.col-lg-12.col-md-12.content
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.content
      = commentaire.body.html_safe
  - if file = commentaire.piece_justificative
    .row
-      %div.col-lg-12.col-md-12.file
+      %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.file
        = link_to file.content_url, class: 'link', target: '_blank' do
          %span.fa.fa-file
          %div
--- a/app/views/backoffice/dossiers/_followers.html.haml
+++ b/app/views/backoffice/dossiers/_followers.html.haml
@ -3,7 +3,7 @@

 %br
 .row
-  .col-md-4.col-lg-4
+  .col-md-4.col-sm-4.col-xs-4.col-lg-4
    - if @facade.followers.size > 0
      %ul
        - @facade.followers.each do |follower|
--- a/app/views/backoffice/dossiers/_list.html.haml
+++ b/app/views/backoffice/dossiers/_list.html.haml
@ -13,12 +13,12 @@
          %i.filter.fa.fa-filter{style: "color:#{(preference.filter.blank? ? 'grey' : 'orange')}", id: "filter_#{smart_listing.name.to_s}_#{preference.table_attr.sub('.', '_')}"}
          = render partial: 'backoffice/dossiers/filter_framed', locals:{preference: preference, filter_framed_id: "framed_filter_#{smart_listing.name.to_s}_#{preference.table_attr.sub('.', '_')}"}

-    %th.col-md-1.col-lg-1.center Actions
-    %th.col-md-1.col-lg-1.center Abonnés
+    %th.col-md-1.col-lg-1.col-sm-1.col-xs-1.col-sm-1.col-xs-1.center Actions
+    %th.col-md-1.col-lg-1.col-sm-1.col-xs-1.col-sm-1.col-xs-1.center Abonnés

  - unless smart_listing.empty?
    - smart_listing.collection.each do |dossier|
-      %tr{id: "tr_dossier_#{dossier.id}", 'data-dossier_url' => backoffice_dossier_url(id: dossier.id)}
+      %tr.dossier-row{id: "tr_dossier_#{dossier.id}", 'data-dossier_url' => backoffice_dossier_url(id: dossier.id)}
        - if smart_listing.name.to_s == 'follow_dossiers'
          %td.center
            - total_notif = dossier.notifications.count
--- a/app/views/backoffice/dossiers/_pref_list.html.haml
+++ b/app/views/backoffice/dossiers/_pref_list.html.haml
@ -27,7 +27,7 @@
    - if index%2 == 0 || tables.first.to_s.include?('champs')
      %tr

-    %td.col-sm-5.col-md-5.col-lg-5{style: 'vertical-align: top', colspan: (tables.first == :champs ? 2 : 1)}
+    %td.col-sm-5.col-md-5.col-sm-5.col-xs-5.col-lg-5{style: 'vertical-align: top', colspan: (tables.first == :champs ? 2 : 1)}
      %h5= tables.first.to_s.gsub('_', ' ').capitalize
      %ul
        - if tables.second
--- a/app/views/backoffice/dossiers/_state_description.html.haml
+++ b/app/views/backoffice/dossiers/_state_description.html.haml
@ -2,9 +2,9 @@
  .panel.panel-info
    .panel-body.center
      .row
-        .col-md-1.col-lg-1
+        .col-md-1.col-lg-1.col-sm-1.col-xs-1.col-sm-1.col-xs-1
          .fa.fa-info-circle.text-info{style:'font-size: 2em; margin-top: 20%'}
-        .col-md-11.col-lg-11
+        .col-md-11.col-sm-11.col-xs-11.col-lg-11
          -if dossiers_list_facade.liste == 'nouveaux'
            Tous les dossiers présents dans cette liste sont ceux qui
            %b
--- a/app/views/backoffice/dossiers/index.html.haml
+++ b/app/views/backoffice/dossiers/index.html.haml
@ -5,11 +5,11 @@
  .default_data_block
    %div.row.show-block#new_dossiers
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          Nouveaux dossiers
-        %div.col-lg-2.col-md-2.count
+        %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
          =@facade_data_view.nouveaux_total
          dossiers
      %div.body
@ -18,11 +18,11 @@
  .default_data_block.default_visible
    %div.row.show-block#follow_dossiers
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          Dossiers suivis
-        %div.col-lg-2.col-md-2.count
+        %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
          =@facade_data_view.suivi_total
          dossiers
      %div.body
@ -31,11 +31,11 @@
  .default_data_block
    %div.row.show-block#all_dossiers
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          Tous les dossiers
-        %div.col-lg-2.col-md-2.count
+        %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
          =@facade_data_view.all_state_total
          dossiers
      %div.body
--- a/app/views/backoffice/dossiers/search.html.haml
+++ b/app/views/backoffice/dossiers/search.html.haml
@ -5,11 +5,11 @@
  .default_data_block.default_visible
    %div.row.show-block#new_dossiers
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          Résultat de la recherche
-        %div.col-lg-2.col-md-2.count
+        %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
          =@dossiers.count
          dossiers
      %div.body
--- a/app/views/backoffice/dossiers/show.html.haml
+++ b/app/views/backoffice/dossiers/show.html.haml
@ -1,2 +1,2 @@
-%div.col-lg-12.col-md-12#backoffice_dossier_show
+%div.col-lg-12.col-md-12.col-sm-12.col-xs-12#backoffice_dossier_show
  = render partial: "dossiers/dossier_show"
--- a/app/views/demo/_list.html.haml
+++ b/app/views/demo/_list.html.haml
@ -14,11 +14,11 @@
      %tr
        %td
          = procedure.id
-        %td.col-md-4.col-lg-4
+        %td.col-md-4.col-sm-4.col-xs-4.col-lg-4
          = link_to procedure.libelle, procedure.lien
        %td
          = procedure.description
-        %td.col-md-3.col-lg-3
+        %td.col-md-3.col-sm-3.col-xs-3.col-lg-3
          = procedure.organisation

  = smart_listing.paginate
--- a/app/views/dossiers/_commentaires_files.html.haml
+++ b/app/views/dossiers/_commentaires_files.html.haml
@ -4,11 +4,11 @@
 - if @facade.commentaires_files.size > 0
  %table.table
    %thead
-      %th.col-md-3
+      %th.col-md-3.col-sm-3.col-xs-3
        Email
-      %th.col-md-2
+      %th.col-md-2.col-sm-2.col-xs-2
        Date
-      %th.col-md-6
+      %th.col-md-6.col-sm-6.col-xs-6
        Fichier


--- a/app/views/dossiers/_dossier_show.html.haml
+++ b/app/views/dossiers/_dossier_show.html.haml
@ -1,11 +1,11 @@
 .default_data_block{style:'margin-top: 40px'}
  .row.show-block#messages
    %div.header
-      %div.col-lg-10.col-md-10.title
+      %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
        .carret-right
        .carret-down
        MESSAGES
-      %div.col-lg-2.col-md-2.count
+      %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
        - message_count = @facade.commentaires.count
        = (message_count == 1) ? "1 message" : "#{message_count} messages"
    %div.body
@ -14,10 +14,10 @@
          - @facade.commentaires.object.sort.each do |commentaire|
            = render partial: commentaire
      .row
-        .col-lg-12.col-md-12
+        .col-lg-12.col-md-12.col-sm-12.col-xs-12
          %div.split-hr
      .row
-        %div.col-lg-12.col-md-12#new-commentaire
+        %div.col-lg-12.col-md-12.col-sm-12.col-xs-12#new-commentaire
          = form_tag(url_for({ controller: 'commentaires', action: :create, dossier_id: @facade.dossier.id, champ_id: @facade.champ_id }), class: 'form-inline', method: 'POST', multipart: true) do
            %textarea.form-control{id: 'texte_commentaire', class: 'wysihtml5', name: 'texte_commentaire', style: 'width: 100%; margin-bottom:2%', rows: '5', placeholder:"Commentaire"}
            %h4.text-primary{style: 'margin-top: 0px'} Ajouter un fichier
@ -26,26 +26,26 @@
    - if last_comment = @facade.commentaires.first
      %div.last-commentaire
        .row
-          %div.col-lg-12.col-md-12.comment-header
+          %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.comment-header
            = "DERNIER MESSAGE (#{last_comment.header})"
        .row
-          %div.col-lg-12.col-md-12.content
+          %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.content
            = last_comment.body.html_safe
        - if file = last_comment.piece_justificative
          .row
-            %div.col-lg-12.col-md-12.file
+            %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.file
              = link_to file.content_url, class: 'link', target: '_blank' do
                %span.fa.fa-file
                %div
                  = file.original_filename
        .row
-          .col-lg-12.col-md-12
+          .col-lg-12.col-md-12.col-sm-12.col-xs-12
            %div#open-message.new-action
              ENVOYER UN MESSAGE
    - else
      .last-commentaire
        .row
-          .col-lg-12.col-md-12
+          .col-lg-12.col-md-12.col-sm-12.col-xs-12
            %div#open-message.new-action
              ENVOYER UN MESSAGE

@ -53,18 +53,18 @@
  .default_data_block
    %div.row.show-block.infos
      %div.header
-        %div.col-lg-8.col-md-8.title-no-expanse
+        %div.col-lg-8.col-md-8.col-sm-8.col-xs-8.title-no-expanse
          %div.carret-right
          INFORMATIONS ENTREPRISE / ASSOCIATION
        %a#add_siret.action{href: users_dossier_add_siret_path(dossier_id: @facade.dossier.id)}
-          %div.col-lg-4.col-md-4.action
+          %div.col-lg-4.col-md-4.col-sm-4.col-xs-4.action
            = "Renseigner un SIRET"

 - unless @facade.entreprise.nil?
  .default_data_block
    %div.row.show-block.infos#infos_entreprise
      %div.header
-        %div.col-lg-12.col-md-12.title
+        %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.title
          %div.carret-right
          %div.carret-down
          INFORMATIONS ENTREPRISE / ASSOCIATION
@ -74,7 +74,7 @@
 .default_data_block.default_visible
  %div.row.show-block.infos#infos_dossier
    %div.header
-      %div.col-lg-10.col-md-10.title
+      %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
        %div.carret-right
        %div.carret-down
        CONSTRUCTION DU DOSSIER
@ -86,7 +86,7 @@
  .default_data_block.default_visible
    %div.row.show-block#carto
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          CARTOGRAPHIE
@ -104,11 +104,11 @@
  .default_data_block.default_visible
    %div.row.show-block#private-fields
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          = "formulaire privé".upcase
-        %div.col-lg-2.col-md-2.count
+        %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
          - private_fields_count = @champs_private.count
          = (private_fields_count == 1) ? "1 champ" : "#{private_fields_count} champs"
      %div.body
--- a/app/views/dossiers/_edit_carto.html.haml
+++ b/app/views/dossiers/_edit_carto.html.haml
@ -1,5 +1,5 @@
 - unless @facade.dossier.read_only?
  - if user_signed_in? && (@facade.dossier.owner?(current_user.email) || @facade.dossier.invite_by_user?(current_user.email))
    %a#maj_carte.action{href: "/users/dossiers/#{@facade.dossier.id}/carte"}
-      %div.col-lg-2.col-md-2.action
+      %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.action
        = 'éditer'.upcase
--- a/app/views/dossiers/_edit_dossier.html.haml
+++ b/app/views/dossiers/_edit_dossier.html.haml
@ -1,5 +1,5 @@
 - unless @facade.dossier.read_only?
  - if user_signed_in? && (@facade.dossier.owner?(current_user.email) || @facade.dossier.invite_by_user?(current_user.email))
    %a#maj_infos.action{href: "/users/dossiers/#{@facade.dossier.id}/description"}
-      %div#edit-dossier.col-lg-2.col-md-2.action
+      %div#edit-dossier.col-lg-2.col-md-2.col-sm-2.col-xs-2.action
        = "éditer".upcase
--- a/app/views/dossiers/_edit_pieces_jointes.html.haml
+++ b/app/views/dossiers/_edit_pieces_jointes.html.haml
@ -1,7 +1,7 @@
 - unless @facade.dossier.read_only?
  - 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
-      %div.col-lg-4.col-md-4.action
+      %div.col-lg-4.col-md-4.col-sm-4.col-xs-4.action
        %a#maj_pj.action{"data-target" => "#UploadPJmodal",
                           "data-toggle" => "modal",
                           :type => "button",
--- a/app/views/dossiers/_infos_carto.html.haml
+++ b/app/views/dossiers/_infos_carto.html.haml
@ -1,5 +1,5 @@
 .row
-  .col-md-12.col-lg-12
+  .col-md-12.col-sm-12.col-xs-12.col-lg-12
    #map.mini{class: @facade.dossier.procedure.module_api_carto.classes}

    %input{id: 'json_latlngs', type:'hidden', value: "#{@facade.dossier.json_latlngs}"}
--- a/app/views/dossiers/_infos_dossier.html.haml
+++ b/app/views/dossiers/_infos_dossier.html.haml
@ -1,40 +1,40 @@
 %div.row
-  .col-lg-12.col-md-12
+  .col-lg-12.col-md-12.col-sm-12.col-xs-12
    - if @facade.procedure.for_individual?
      .row.title-row
-        %div.col-md-4.col-lg-4.split-hr
-        %div.col-md-4.col-lg-4.dossier-title= t('utils.depositaire').upcase
-        %div.col-md-4.col-lg-4.split-hr
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.split-hr
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.dossier-title= t('utils.depositaire').upcase
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.split-hr
      .row
-        %div.col-md-6.col-lg-6.depositaire-label Civilité
-        %div.col-md-1.col-lg-1.comments-off= "-"
-        %div.col-md-5.col-lg-5.depositaire-info= @facade.individual.gender
+        %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label Civilité
+        %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+        %div.col-md-5.col-sm-5.col-xs-5.col-lg-5.depositaire-info= @facade.individual.gender
      .row
-        %div.col-md-6.col-lg-6.depositaire-label Nom
-        %div.col-md-1.col-lg-1.comments-off= "-"
-        %div.col-md-5.col-lg-5.depositaire-info= @facade.individual.nom
+        %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label Nom
+        %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+        %div.col-md-5.col-sm-5.col-xs-5.col-lg-5.depositaire-info= @facade.individual.nom
      .row
-        %div.col-md-6.col-lg-6.depositaire-label Prénom
-        %div.col-md-1.col-lg-1.comments-off= "-"
-        %div.col-md-5.col-lg-5.despositaire-info= @facade.individual.prenom
+        %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label Prénom
+        %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+        %div.col-md-5.col-sm-5.col-xs-5.col-lg-5.despositaire-info= @facade.individual.prenom
      - unless Features.opensimplif
        .row
-          %div.col-md-6.col-lg-6.depositaire-label Date de naissance
-          %div.col-md-1.col-lg-1.comments-off= "-"
-          %div.col-md-5.col-lg-5.depositaire-info= @facade.individual.birthdate
+          %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label Date de naissance
+          %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+          %div.col-md-5.col-sm-5.col-xs-5.col-lg-5.depositaire-info= @facade.individual.birthdate

    - unless @facade.champs.nil?
      - @facade.champs.each do |champ|
        - if champ.type_champ == 'header_section'
          .row.title-row.margin-top-40
-            %div.col-md-3.col-lg-3.split-hr
-            %div.col-md-6.col-lg-6.dossier-title= champ.libelle.upcase
-            %div.col-md-3.col-lg-3.split-hr
+            %div.col-md-3.col-sm-3.col-xs-3.col-lg-3.split-hr
+            %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.dossier-title= champ.libelle.upcase
+            %div.col-md-3.col-sm-3.col-xs-3.col-lg-3.split-hr
        - else
          .row
-            %div.col-md-6.col-lg-6.depositaire-label= champ.libelle
+            %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label= champ.libelle
            - if Features.opensimplif
-              %div.col-md-1.col-lg-1.comments
+              %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments
                - if gestionnaire_signed_in?
                  = link_to "", "data-href" => backoffice_dossier_commentaires_path(@facade.dossier, champs_id: champ.id), "data-toggle" => "modal", "data-target" => "#modalCommentairesDossierParChamp" do
                    %i.fa.fa-comment-o
@ -42,9 +42,9 @@
                  = link_to "", "data-href" => users_dossier_commentaires_path(@facade.dossier, champs_id: champ.id), "data-toggle" => "modal", "data-target" => "#modalCommentairesDossierParChamp" do
                    %i.fa.fa-commenting-o
            - else
-              %div.col-md-1.col-lg-1.comments-off
+              %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off
                = "-"
-            %div.col-md-5.col-lg-5.depositaire-info{ id: "champ-#{champ.id}-value" }
+            %div.col-md-5.col-sm-5.col-xs-5.col-lg-5.depositaire-info{ id: "champ-#{champ.id}-value" }
              - unless champ.decorate.value.blank?
                = champ.decorate.value.html_safe

@ -57,20 +57,20 @@
        =")"
 %div.row
  - if @facade.procedure.cerfa_flag? || @facade.dossier.types_de_piece_justificative.count > 0
-    .col-lg-12.col-md-12
+    .col-lg-12.col-md-12.col-sm-12.col-xs-12
      .row.title-row
-        %div.col-md-4.col-lg-4.split-hr
-        %div.col-md-4.col-lg-4.dossier-title= t('utils.pieces').upcase
-        %div.col-md-4.col-lg-4.split-hr
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.split-hr
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.dossier-title= t('utils.pieces').upcase
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.split-hr

-  .col-lg-12.col-md-12#pieces_justificatives.margin-bot-40
+  .col-lg-12.col-md-12.col-sm-12.col-xs-12#pieces_justificatives.margin-bot-40
    .row
      - if @facade.procedure.cerfa_flag?
-        .col-md-12.col-lg-12#piece_justificative_0
+        .col-md-12.col-sm-12.col-xs-12.col-lg-12#piece_justificative_0
          .row.piece-row
-            .col-md-6.col-lg-6.depositaire-label= 'Formulaire'
-            .col-md-1.col-lg-1.comments-off= "-"
-            .col-md-5.col-lg-5.despositaire-info
+            .col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label= 'Formulaire'
+            .col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+            .col-md-5.col-sm-5.col-xs-5.col-lg-5.despositaire-info
              - if @facade.dossier.cerfa_available?
                %a{ href: "#{@facade.dossier.cerfa.last.content_url}", target: '_blank' } Consulter
                %span{style:'margin-left:12px'}
@ -80,14 +80,14 @@
              - else
                = 'Pièce non fournie'
    .row
-      .col-md-12.col-lg-12
+      .col-md-12.col-sm-12.col-xs-12.col-lg-12
        - @facade.types_de_pieces_justificatives.each do |type_de_piece_justificative|
          .row.piece-row
-            .col-md-12.col-lg-12{ id: "piece_justificative_#{type_de_piece_justificative.id}" }
+            .col-md-12.col-sm-12.col-xs-12.col-lg-12{ id: "piece_justificative_#{type_de_piece_justificative.id}" }
              .row
-                %div.col-md-6.col-lg-6.depositaire-label= type_de_piece_justificative.libelle
-                %div.col-md-1.col-lg-1.comments-off= "-"
-                %div.col-md-5.col-lg-5.despositaire-info
+                %div.col-md-6.col-sm-6.col-xs-6.col-lg-6.depositaire-label= type_de_piece_justificative.libelle
+                %div.col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+                %div.col-md-5.col-sm-5.col-xs-5.col-lg-5.despositaire-info
                  - if type_de_piece_justificative.api_entreprise
                    %span.text-success Nous l'avons récupéré pour vous.
                  - elsif !(@pj = @facade.dossier.retrieve_last_piece_justificative_by_type(type_de_piece_justificative.id)).nil?
@ -103,13 +103,13 @@
      - 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
          .row
-            .col-lg-4.col-md-4
+            .col-lg-4.col-md-4.col-sm-4.col-xs-4
            %a#maj_pj.action{"data-target" => "#UploadPJmodal", "data-toggle" => "modal", :type => "button"}
-              .col-lg-4.col-md-4.action
+              .col-lg-4.col-md-4.col-sm-4.col-xs-4.action
                Modifier les documents
              %br
            = render partial: 'users/recapitulatif/modal_upload_pj'
-            .col-lg-4.col-md-4
+            .col-lg-4.col-md-4.col-sm-4.col-xs-4

    - if gestionnaire_signed_in?
      #PJmodal.modal.fade{"aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
@ -135,21 +135,21 @@
                    - if @facade.dossier.cerfa_available?
                      - @facade.cerfas_ordered.each do |cerfa|
                        %tr
-                          %td.col-md-6.col-lg-4
+                          %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
                            = cerfa.user.email
-                          %td.col-md-6.col-lg-4
+                          %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
                            = cerfa.created_at
-                          %td.col-md-6.col-lg-4
+                          %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}"}
                    - @facade.dossier.retrieve_all_piece_justificative_by_type(type_de_piece_justificative.id).each do |piece_justificative|
                      %tr
-                        %td.col-md-6.col-lg-4
+                        %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
                          = piece_justificative.user.email
-                        %td.col-md-6.col-lg-4
+                        %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
                          = piece_justificative.created_at
-                        %td.col-md-6.col-lg-4
+                        %td.col-md-6.col-sm-6.col-xs-6.col-lg-4
                          =link_to 'Récupérer', piece_justificative.content_url, {target: :blank}
            .modal-footer

--- a/app/views/dossiers/_infos_entreprise.html.haml
+++ b/app/views/dossiers/_infos_entreprise.html.haml
@ -1,52 +1,52 @@
-.col-md-12.col-xs-12
+.col-md-12.col-sm-12.col-xs-12.col-xs-12
  %h4
    = @facade.entreprise.raison_sociale_or_name
  .row.split-row
-    %div.col-md-12.col-lg-12.split-hr
+    %div.col-md-12.col-sm-12.col-xs-12.col-lg-12.split-hr
 %div.row
-  .col-lg-12.col-md-12
+  .col-lg-12.col-md-12.col-sm-12.col-xs-12

    .row
-      %div.col-md-4.col-lg-4.entreprise-label Siret :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.etablissement.siret
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Siret :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.etablissement.siret
    - if @facade.etablissement.siret != @facade.entreprise.siret_siege_social
      .row
-        %div.col-md-4.col-lg-4.entreprise-label SIRET siège social :
-        %div.col-md-8.col-lg-8.entreprise-info= @facade.entreprise.siret_siege_social
+        %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label SIRET siège social :
+        %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.entreprise.siret_siege_social
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Forme juridique :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.entreprise.forme_juridique
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Forme juridique :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.entreprise.forme_juridique
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Libellé naf :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.etablissement.libelle_naf
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Libellé naf :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.etablissement.libelle_naf
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Code naf :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.etablissement.naf
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Code naf :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.etablissement.naf
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Date de création :
-      %div.col-md-8.col-lg-8.entreprise-info= Time.at(@facade.entreprise.date_creation).strftime "%d-%m-%Y"
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Date de création :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= Time.at(@facade.entreprise.date_creation).strftime "%d-%m-%Y"
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Effectif organisation :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.entreprise.effectif
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Effectif organisation :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.entreprise.effectif
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Code effectif :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.entreprise.code_effectif_entreprise
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Code effectif :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.entreprise.code_effectif_entreprise
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Numéro TVA intracommunautaire :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.entreprise.numero_tva_intracommunautaire
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Numéro TVA intracommunautaire :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.entreprise.numero_tva_intracommunautaire

    .row
-      %div.col-md-4.col-lg-4.entreprise-label Adresse :
-      %div.col-md-8.col-lg-8.entreprise-info
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Adresse :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info
        - @facade.etablissement.adresse.split("\n").each do |line|
          = line
    .row
-      %div.col-md-4.col-lg-4.entreprise-label Capital social :
-      %div.col-md-8.col-lg-8.entreprise-info= @facade.entreprise.pretty_capital_social
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Capital social :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info= @facade.entreprise.pretty_capital_social

    .row
-      %div.col-md-4.col-lg-4.entreprise-label Exercices :
-      %div.col-md-8.col-lg-8.entreprise-info
+      %div.col-md-4.col-sm-4.col-xs-4.col-lg-4.entreprise-label Exercices :
+      %div.col-md-8.col-sm-8.col-xs-8.col-lg-8.entreprise-info
        - @facade.etablissement.exercices.each_with_index do |exercice, index|
          %strong
            = "#{exercice.dateFinExercice.year} : "
@ -54,7 +54,7 @@
          %br

    .row.split-row
-      %div.col-md-12.col-lg-12.split-hr
+      %div.col-md-12.col-sm-12.col-xs-12.col-lg-12.split-hr
 - unless @facade.entreprise.rna_information.nil?
  = render partial: '/dossiers/infos_rna'

--- a/app/views/dossiers/_infos_pieces_jointes.html.haml
+++ b/app/views/dossiers/_infos_pieces_jointes.html.haml
@ -1,11 +1,11 @@
 #pieces_justificatives
  .row
    - if @facade.procedure.cerfa_flag?
-      .col-md-12.col-lg-12#piece_justificative_0
+      .col-md-12.col-sm-12.col-xs-12.col-lg-12#piece_justificative_0
        .row.piece-row
-          .col-md-6.col-lg-6.piece-label= 'Formulaire'
-          .col-md-1.col-lg-1.comments-off= "-"
-          .col-md-5.col-lg-5
+          .col-md-6.col-sm-6.col-xs-6.col-lg-6.piece-label= 'Formulaire'
+          .col-md-1.col-lg-1.col-sm-1.col-xs-1.comments-off= "-"
+          .col-md-5.col-sm-5.col-xs-5.col-lg-5
            - if @facade.dossier.cerfa_available?
              %a{ href: "#{@facade.dossier.cerfa.last.content_url}", target: '_blank' } Consulter
              %span{style:'margin-left:12px'}
@ -20,13 +20,13 @@
              = 'Pièce non fournie'

  .row
-    .col-md-12.col-lg-12
+    .col-md-12.col-sm-12.col-xs-12.col-lg-12
      - @facade.dossier.types_de_piece_justificative.order('order_place ASC').each do |type_de_piece_justificative|
        .row.piece-row
-          .col-md-12.col-lg-12{ id: "piece_justificative_#{type_de_piece_justificative.id}" }
+          .col-md-12.col-sm-12.col-xs-12.col-lg-12{ id: "piece_justificative_#{type_de_piece_justificative.id}" }
            .row
-              .col-md-6.col-lg-6= type_de_piece_justificative.libelle
-              .col-md-6.col-lg-6
+              .col-md-6.col-sm-6.col-xs-6.col-lg-6= type_de_piece_justificative.libelle
+              .col-md-6.col-sm-6.col-xs-6.col-lg-6
                - if type_de_piece_justificative.api_entreprise
                  %span.text-success Nous l'avons récupéré pour vous.
                - elsif !(@pj = @facade.dossier.retrieve_last_piece_justificative_by_type(type_de_piece_justificative.id)).nil?
--- a/app/views/dossiers/_infos_private_fields.html.haml
+++ b/app/views/dossiers/_infos_private_fields.html.haml
@ -1,5 +1,5 @@
 .row{style: 'margin-top: -20px'}
-  .col-md-12.col-lg-12
+  .col-md-12.col-sm-12.col-xs-12.col-lg-12
    = form_for @facade.dossier, url: {controller: 'backoffice/private_formulaires', action: :update, dossier_id: @facade.dossier.id}, remote: true do
      = render partial: '/users/description/champs', locals:{private: true}
      .row.center
--- a/app/views/dossiers/_infos_rna.html.haml
+++ b/app/views/dossiers/_infos_rna.html.haml
@ -1,5 +1,5 @@
 .row#infos_rna
-  .col-lg-6.col-md-6
+  .col-lg-6.col-md-6.col-sm-6.col-xs-6
    %dl.dl-horizontal
      %dt Association ID :
      %dd.text-success= @facade.entreprise.rna_information.association_id
@ -10,7 +10,7 @@
      %dt Objet :
      %dd= @facade.entreprise.rna_information.objet

-  .col-lg-6.col-md-6
+  .col-lg-6.col-md-6.col-sm-6.col-xs-6
    %dl.dl-horizontal
      %dt Date création :
      %dd= @facade.entreprise.rna_information.date_creation
--- a/app/views/dossiers/_invites.html.haml
+++ b/app/views/dossiers/_invites.html.haml
@ -2,7 +2,7 @@

 %br
 .row
-  .col-md-4.col-lg-4
+  .col-md-4.col-sm-4.col-xs-4.col-lg-4
    - if @facade.invites.size > 0
      %ul
        - @facade.invites.each do |invite|
@ -11,7 +11,7 @@
    - else
      Aucune personne invitée

-  .col-md-3.col-lg-3
+  .col-md-3.col-sm-3.col-xs-3.col-lg-3
    =form_tag invites_dossier_path(dossier_id: @facade.dossier.id), method: :post, class: 'form-inline' do
      =text_field_tag :email, '', class: 'form-control', placeholder: 'Envoyer une invitation'
      =submit_tag 'Ajouter', class: 'btn btn-success'
--- a/app/views/dossiers/_pieces_justificatives.html.haml
+++ b/app/views/dossiers/_pieces_justificatives.html.haml
@ -4,7 +4,7 @@
      %tr{id: "piece_justificative_0"}
        %th{class:'col-lg-6'}
          ='Formulaire'
-        %td.col-lg-6.col-md-6
+        %td.col-lg-6.col-md-6.col-sm-6.col-xs-6
          - if @facade.dossier.cerfa_available?
            %a{ href: "#{@facade.dossier.cerfa.last.content_url}", target: '_blank' } Consulter
            %span{style:'margin-left:12px'}
@ -22,7 +22,7 @@
      %tr{ id: "piece_justificative_#{type_de_piece_justificative.id}" }
        %th.col-lg-6
          = type_de_piece_justificative.libelle
-        %td.col-lg-6.col-md-6
+        %td.col-lg-6.col-md-6.col-sm-6.col-xs-6
          - if type_de_piece_justificative.api_entreprise
            %span.text-success Nous l'avons récupéré pour vous.
          - elsif !(@pj = @facade.dossier.retrieve_last_piece_justificative_by_type(type_de_piece_justificative.id)).nil?
--- a/app/views/dossiers/etapes/_etape1.html.haml
+++ b/app/views/dossiers/etapes/_etape1.html.haml
@ -1,4 +1,4 @@
-.col-md-3.col-lg-3.center
+.col-md-3.col-sm-3.col-xs-3.col-lg-3.center
  %h3 Ma procédure

  #logos.center{class: (@facade.entreprise.nil? ? '' : 'mask')}
@ -9,9 +9,9 @@
    #logo_procedure.flag
      =image_tag( @facade.procedure.decorate.logo_img )

-.etape.etapes_informations.col-md-9.col-lg-9
+.etape.etapes_informations.col-md-9.col-sm-9.col-xs-9.col-lg-9
  .row
-    .col-md-12.col-lg-12.padding-left-30
+    .col-md-12.col-sm-12.col-xs-12.col-lg-12.padding-left-30
      %h2#titre_procedure.text-info
        = @facade.procedure.libelle

--- a/app/views/dossiers/etapes/_etape3.html.haml
+++ b/app/views/dossiers/etapes/_etape3.html.haml
@ -1,6 +1,6 @@
-.etape.etapes_menu.col-md-3.col-lg-3
+.etape.etapes_menu.col-md-3.col-sm-3.col-xs-3.col-lg-3
  %h3
    Ma zone d'intervention

-.etape.etapes_informations.col-md-9.col-lg-9
+.etape.etapes_informations.col-md-9.col-sm-9.col-xs-9.col-lg-9
  .row
--- a/app/views/dossiers/etapes/_etape4.html.haml
+++ b/app/views/dossiers/etapes/_etape4.html.haml
@ -1,6 +1,6 @@
-.etape.etapes_menu.col-md-3.col-lg-3
+.etape.etapes_menu.col-md-3.col-sm-3.col-xs-3.col-lg-3
  %h3
    Mon dossier

-.etape.etapes_informations.col-md-9.col-lg-9
+.etape.etapes_informations.col-md-9.col-sm-9.col-xs-9.col-lg-9
  .row
--- 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-md-3.col-lg-3
+.etape.etapes_menu.col-md-3.col-sm-3.col-xs-3.col-lg-3
  %h3
    Mes informations
  %br
@ -12,7 +12,7 @@
        = f.submit 'Changer de SIRET', class: %w(btn btn-xs btn-primary)


-.etape.etapes_informations.col-md-9.col-lg-9
+.etape.etapes_informations.col-md-9.col-sm-9.col-xs-9.col-lg-9
  .row
    - if @facade.entreprise.nil?
      #new_siret{style:'margin-left: 20%; margin-top: 5%'}
--- a/app/views/dossiers/etapes/etape_2/_individual.html.haml
+++ b/app/views/dossiers/etapes/etape_2/_individual.html.haml
@ -1,14 +1,14 @@
-.col-md-3.col-lg-3.center
+.col-md-3.col-sm-3.col-xs-3.col-lg-3.center
  %h3 Mes informations
  %p
    Les informations de bases
    %br
    vous concernant.

-.etape.etapes_informations.col-md-9.col-lg-9
+.etape.etapes_informations.col-md-9.col-sm-9.col-xs-9.col-lg-9
  = form_for @facade.dossier, url: { controller: '/users/dossiers', action: :update } do |f|
    .row
-      .col-md-12.col-lg-12.padding-left-30
+      .col-md-12.col-sm-12.col-xs-12.col-lg-12.padding-left-30
        = f.hidden_field :id

        = f.fields_for :individual, @facade.individual do |ff|
@ -40,7 +40,7 @@
            Vos informations personnelles ne seront jamais utilisées dans un but lucratif ou commercial. Elles ne pourront être communiquées à de tiers personnes sans votre accord préalable. Elles pourront en revanche être communiquées aux administrations compétentes afin d'instruire votre dossier, conformément à la déclaration CNIL effectué par le service TPS.
            =link_to 'en savoir plus', cgu_path, target: '_blank'
    .row
-      .col-md-5.col-lg-5.col-xs-5
-      .col-md-2.col-lg-2.col-xs-2
+      .col-md-5.col-sm-5.col-xs-5.col-lg-5.col-xs-5
+      .col-md-2.col-sm-2.col-xs-2.col-lg-2.col-xs-2
        = f.submit 'Etape suivante', class: "action", id: 'etape_suivante'
-      .col-md-5.col-lg-5.col-xs-5
+      .col-md-5.col-sm-5.col-xs-5.col-lg-5.col-xs-5
--- a/app/views/layouts/_navbar.html.haml
+++ b/app/views/layouts/_navbar.html.haml
@ -1,4 +1,4 @@
-%div.col-lg-2.col-md-2
+%div.col-lg-2.col-md-2.col-sm-2.col-xs-2
  %a#title_navbar{href: '/'}
    %div.row#home
      %div.col-lg-6.no-padding
@ -6,7 +6,7 @@
      %div.col-lg-6.no-padding#tps-title
        TPS

-%div.col-lg-10.col-md-10.no-padding
+%div.col-lg-10.col-md-10.col-sm-10.col-xs-10.no-padding
  %div#navbar-body
    %div.row
      -begin
--- a/app/views/layouts/_support_navigator_banner.html.haml
+++ b/app/views/layouts/_support_navigator_banner.html.haml
@ -1,6 +1,6 @@
 - unless BrowserService.recommended_browser?
  #support_navigator_banner.row
-    .col-md-12.col-lg-12
+    .col-md-12.col-sm-12.col-xs-12.col-lg-12
      = BROWSER.value.name
      = BROWSER.value.version
      \-
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@ -34,7 +34,7 @@
          = render partial: "layouts/navbar"
      %div.row.no-margin
        - if RenderPartialService.left_panel_exist? @left_pannel_url
-          %div.col-lg-2.col-md-2#left-pannel
+          %div.col-lg-2.col-md-2.col-sm-2.col-xs-2#left-pannel
            - if gestionnaire_signed_in?
              #search-block
                = render partial: 'layouts/left_panels/search_area'
--- a/app/views/layouts/navbars/_navbar_admin_procedurescontroller_index.html.haml
+++ b/app/views/layouts/navbars/_navbar_admin_procedurescontroller_index.html.haml
@ -1,6 +1,6 @@
-%div.col-lg-8.col-md-8.main-info
+%div.col-lg-8.col-md-8.col-sm-8.col-xs-8.main-info

-%div.col-lg-3.col-md-3.options
+%div.col-lg-3.col-md-3.col-sm-3.col-xs-3.options
  %div{ style: "decorate:none; display: flex;box-shadow:none; float:right; display: flex; margin-top: 5px" }
    %div{ style: "vertical-align: middle; margin-right: 10px; margin-top: auto; margin-bottom: auto;" }
      = current_administrateur.email
--- a/app/views/layouts/navbars/_navbar_backoffice_dossiers_procedurecontroller_index.html.haml
+++ b/app/views/layouts/navbars/_navbar_backoffice_dossiers_procedurecontroller_index.html.haml
@ -1,12 +1,12 @@
-%div.col-lg-8.col-md-8.main-info
+%div.col-lg-8.col-md-8.col-sm-8.col-xs-8.main-info
  = @facade_data_view.procedure_id.nil? ? "Tous les dossiers" :  @facade_data_view.procedure.libelle
-%div.col-lg-3.col-md-3.options
+%div.col-lg-3.col-md-3.col-sm-3.col-xs-3.options
  %div.row
-    %div.col-lg-12.col-md-12
+    %div.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 }
        %i.fa.fa-pencil
        Modifier le tableau
      %span.caret-right
  %div.row
-    %div.col-lg-12.col-md-12
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12
      = render partial: "dossiers/download_dossiers"
--- a/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml
+++ b/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml
@ -1,2 +1,2 @@
-%div.col-lg-11.col-md-11.main-info
+%div.col-lg-11.col-md-11.col-sm-11.col-xs-11.main-info
  Recherche dans tous les dossiers
--- a/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_show.html.haml
+++ b/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_show.html.haml
@ -1,9 +1,9 @@
-%div.col-lg-8.col-md-8.main-info
+%div.col-lg-8.col-md-8.col-sm-8.col-xs-8.main-info
  %span{ 'data-toggle' => :tooltip, "data-placement" => :bottom, title: @facade.dossier.procedure.libelle }
    = @facade.dossier.procedure.libelle
-%div.col-lg-3.col-md-3.options
+%div.col-lg-3.col-md-3.col-sm-3.col-xs-3.options
  %div.row
-    %div.col-lg-12.col-md-12
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12
      - if current_gestionnaire.follow?(@facade.dossier.id)
        = link_to backoffice_dossier_follow_path(dossier_id: @facade.dossier.id), "data-method" => :put, class: "button-navbar-action",id: "suivre_dossier_#{@facade.dossier.id}" do
          %i.fa.fa-user-times
@ -13,7 +13,7 @@
          %i.fa.fa-user-plus
          Suivre le dossier
  %div.row
-    %div.col-lg-12.col-md-12
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12
      %div.dropdown-toggle{ 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
        %i.fa.fa-user
        = t('utils.involved')
--- a/app/views/layouts/navbars/_navbar_default.html.haml
+++ b/app/views/layouts/navbars/_navbar_default.html.haml
@ -1 +1 @@
-.col-lg-11.col-md-11
+.col-lg-11.col-md-11.col-sm-11.col-xs-11
--- a/app/views/layouts/navbars/_navbar_log_options.html.haml
+++ b/app/views/layouts/navbars/_navbar_log_options.html.haml
@ -1,17 +1,17 @@
 -#%span.fa.fa-sign-out

 -if user_signed_in?
-  .col-lg-1.col-md-1#sign_out.no-padding
+  .col-lg-1.col-md-1.col-sm-1.col-xs-1#sign_out.no-padding
    = render partial: 'users/login_banner'
    = render partial: 'layouts/credentials'
 -elsif gestionnaire_signed_in?
-  .col-lg-1.col-md-1#sign_out.no-padding
+  .col-lg-1.col-md-1.col-sm-1.col-xs-1#sign_out.no-padding
    = render partial: 'gestionnaires/login_banner'
    = render partial: 'layouts/credentials'
 -elsif administrateur_signed_in?
-  .col-lg-1.col-md-1#sign_out.no-padding
+  .col-lg-1.col-md-1.col-sm-1.col-xs-1#sign_out.no-padding
    = render partial: 'administrateurs/login_banner'
    = render partial: 'layouts/credentials'
 -else
-  .col-lg-1.col-md-1#sign_in
+  .col-lg-1.col-md-1.col-sm-1.col-xs-1#sign_in
    = link_to "Connexion", '/users/sign_in', :class => 'btn btn-lg'
--- a/app/views/layouts/navbars/_navbar_users_recapitulatifcontroller_show.html.haml
+++ b/app/views/layouts/navbars/_navbar_users_recapitulatifcontroller_show.html.haml
@ -1,9 +1,9 @@
-%div.col-lg-8.col-md-8.main-info
+%div.col-lg-8.col-md-8.col-sm-8.col-xs-8.main-info
  %span{ 'data-toggle' => :tooltip, "data-placement" => :bottom, title: @facade.dossier.procedure.libelle }
    = @facade.dossier.procedure.libelle.truncate(60)
-%div.col-lg-3.col-md-3.options
+%div.col-lg-3.col-md-3.col-sm-3.col-xs-3.options
  %div.row.centered-option
-    %div.col-lg-12.col-md-12
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12
      %div.dropdown-toggle{ 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false }
        %i.fa.fa-user
        = t('utils.involved')
--- a/app/views/root/landing_v1.html.haml
+++ b/app/views/root/landing_v1.html.haml
@ -18,9 +18,9 @@

 #suite.max-size
  .row.word.simplifier
-    .col-md-6.col-lg-6
+    .col-md-6.col-sm-6.col-xs-6.col-lg-6
      = image_tag image_url('keywords/simplifier.png')
-    .col-md-6.col-lg-6
+    .col-md-6.col-sm-6.col-xs-6.col-lg-6
      %ul.dynamic_ul
        %li
          Générateur simplifié de démarches en ligne pour les administrations
@ -33,7 +33,7 @@
            FranceConnect

  .row.word.echanger
-    .col-md-6.col-lg-6
+    .col-md-6.col-sm-6.col-xs-6.col-lg-6
      %ul.dynamic_ul
        %li
          Tchatter avec les services traitant jusqu’à la complétude du dossier
@ -43,13 +43,13 @@
          Accompagner les usagers dans leur démarche
        %li
          Vérifier les pièces au fur et à mesure
-    .col-md-6.col-lg-6
+    .col-md-6.col-sm-6.col-xs-6.col-lg-6
      = image_tag image_url('keywords/echanger.png')

  .row.word.profiter
-    .col-md-6.col-lg-6
+    .col-md-6.col-sm-6.col-xs-6.col-lg-6
      = image_tag image_url('keywords/profiter.png')
-    .col-md-6.col-lg-6
+    .col-md-6.col-sm-6.col-xs-6.col-lg-6
      %ul.dynamic_ul
        %li
          Profiter des ressources cartographiques directement mobilisées, si nécessaire
@ -57,7 +57,7 @@
          Récupérer des informations officielles collectées directement auprès des administrations

  .row.word.news
-    .latest_release.col-md-7.col-lg-7
+    .latest_release.col-md-7.col-sm-7.col-xs-7.col-lg-7
      - if @latest_release.nil?
        %p
          Erreur dans la récupération des données
@ -73,7 +73,7 @@
        %a{href: 'https://github.com/sgmap/tps/releases', target: '_blank'}
          = 'Voir toutes les versions'

-    .col-md-5.col-lg-5
+    .col-md-5.col-sm-5.col-xs-5.col-lg-5
      #video.center
        %iframe{:allowfullscreen => "", :frameborder => "0", :height => "270", :src => "//www.dailymotion.com/embed/video/x3lp4cs", :width => "480"}
        %br
@ -91,24 +91,24 @@
            =link_to "TPS: dernière étape, la validation du dossier et notification", "http://dai.ly/x3s2p6k", {target: '_blank'}

  .row.word.demo_account.center
-    .col-md-4.col-lg-4
+    .col-md-4.col-sm-4.col-xs-4.col-lg-4
      %h3.text-primary Acteurs publics
      %h4 Créez des démarches en ligne simplifiées et sécurisées.
      =link_to 'Démonstration', 'https://tps-dev.apientreprise.fr/administrateurs/sign_in/demo', {class: 'btn btn-lg btn-primary'}
-    .col-md-4.col-lg-4
+    .col-md-4.col-sm-4.col-xs-4.col-lg-4
      %h3.text-warning Agents et services
      %h4 Accompagnez et co-traitez les projets avec les usagers.
      =link_to 'Démonstration', 'https://tps-dev.apientreprise.fr/gestionnaires/sign_in/demo', {class: 'btn btn-lg btn-warning'}

-    .col-md-4.col-lg-4
+    .col-md-4.col-sm-4.col-xs-4.col-lg-4
      %h3.text-success Usagers
      %h4 Profitez de démarches simplifiées et d’échanges continus avec les services traitants.
      =link_to 'Démonstration', 'https://tps-dev.apientreprise.fr/users/sign_in/demo', {class: 'btn btn-lg btn-success'}

  .row.word.documentation
-    .col-md-4.col-lg-4.center
+    .col-md-4.col-sm-4.col-xs-4.col-lg-4.center
      = image_tag image_url('keywords/documentation.png')
-    .col-md-4.col-lg-4
+    .col-md-4.col-sm-4.col-xs-4.col-lg-4
      %ul.dynamic_ul
        %li
          =link_to 'Dépliant de présentation', '/data/TPS_Trois_volets.pdf', {target: '_blank'}
@ -116,7 +116,7 @@
          =link_to 'Documentation d’utilisation', '/data/TPS_documentations_v1_1.pdf', {target: '_blank'}
        -#%li
        -#  = link_to 'Documentation des APIs (béta)', '/docs', {target: '_blank'}
-    .col-md-4.col-lg-4.center
+    .col-md-4.col-sm-4.col-xs-4.col-lg-4.center
      = link_to 'Demander un accès administrateur', 'https://tps.apientreprise.fr/users/dossiers/new?procedure_id=31', {class: 'btn btn-lg btn-primary', target: '_blank'}


--- a/app/views/users/carte/show.html.haml
+++ b/app/views/users/carte/show.html.haml
@ -1,5 +1,5 @@
 .row#carto_page
-  .col-lg-12.col-md-12
+  .col-lg-12.col-md-12.col-sm-12.col-xs-12
    %h2
      ='Localisation'
    %h4.text-primary
--- a/app/views/users/commentaires/_commentaire.html.haml
+++ b/app/views/users/commentaires/_commentaire.html.haml
@ -1,13 +1,13 @@
 %div.commentaire
  .row
-    %div.col-lg-12.col-md-12.comment-header
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.comment-header
      = commentaire.header
  .row
-    %div.col-lg-12.col-md-12.content
+    %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.content
      = commentaire.body.html_safe
  - if file = commentaire.piece_justificative
    .row
-      %div.col-lg-12.col-md-12.file
+      %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.file
        = link_to file.content_url, class: 'link', target: '_blank' do
          %span.fa.fa-file
          %div
--- a/app/views/users/description/_show.html.haml
+++ b/app/views/users/description/_show.html.haml
@ -4,9 +4,9 @@
      .panel.panel-info{style:'margin-bottom:0'}
        .panel-body.center
          .row
-            .col-md-1.col-lg-1
+            .col-md-1.col-lg-1.col-sm-1.col-xs-1
              .fa.fa-info-circle.text-info{style:'font-size: 2em; margin-top: 20%'}
-            .col-md-10.col-lg-10{style:'padding-right: 0px'}
+            .col-md-10.col-sm-10.col-xs-10.col-lg-10{style:'padding-right: 0px'}
              %b
                =link_to 'Accéder au guide', @dossier.procedure.lien_notice, {target: '_blank'}
              pour remplir pour votre dossier
@ -39,9 +39,9 @@
        .panel.panel-info
          .panel-body.center
            .row
-              .col-md-1.col-lg-1
+              .col-md-1.col-lg-1.col-sm-1.col-xs-1
                .fa.fa-info-circle.text-info{style:'font-size: 2em; margin-top: 20%'}
-              .col-md-11.col-lg-11
+              .col-md-11.col-sm-11.col-xs-11.col-lg-11
                Les documents administratifs ne sont pas indispensables afin d'initier votre dossier.
                Vous pourrez dans tous les cas les compléter plus tard si vous ne les possédez pas de suite.

--- a/app/views/users/description/champs/_header_private_section.html.haml
+++ b/app/views/users/description/champs/_header_private_section.html.haml
@ -1,5 +1,5 @@
 .row
-  .col-lg-12.col-md-12
+  .col-lg-12.col-md-12.col-sm-12.col-xs-12
    %br
    %h3.text-info
      =libelle
--- a/app/views/users/description/champs/_header_section.html.haml
+++ b/app/views/users/description/champs/_header_section.html.haml
@ -1,7 +1,7 @@
 .default_data_block.default_visible
  %div.row.show-block.infos
    %div.header
-      %div.col-lg-12.col-md-12.title
+      %div.col-lg-12.col-md-12.col-sm-12.col-xs-12.title
        %div.carret-right
        %div.carret-down
        =libelle
--- a/app/views/users/description/champs/_render_list_champs.html.haml
+++ b/app/views/users/description/champs/_render_list_champs.html.haml
@ -50,5 +50,5 @@

  - unless champ.description.empty? || champ.type_champ == 'engagement'
    .row
-      .col-lg-8.col-md-8{class: 'description_div', id:"description_champs_#{champ.id}"}
+      .col-lg-8.col-md-8.col-sm-8.col-xs-8{class: 'description_div', id:"description_champs_#{champ.id}"}
        = champ.description
--- a/app/views/users/dossiers/_list.html.haml
+++ b/app/views/users/dossiers/_list.html.haml
@ -1,12 +1,12 @@
 - unless smart_listing.empty?
  %table#dossiers_list.table
    %thead
-      %th#sort-id.col-md-1.col-lg-1= smart_listing.sortable 'Numéro', 'id'
-      %th#sort-libelle.col-md-5.col-lg-5= smart_listing.sortable 'Procédure', 'procedure.libelle'
-      %th#sort-state.col-md-2.col-lg-2= smart_listing.sortable 'État', 'state'
-      %th#sort-updated.col-md-2.col-lg-2= smart_listing.sortable 'Date de mise à jour', 'updated_at'
+      %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-md-5.col-sm-5.col-xs-5.col-lg-5= smart_listing.sortable 'Procédure', 'procedure.libelle'
+      %th#sort-state.col-md-2.col-sm-2.col-xs-2.col-lg-2= smart_listing.sortable 'État', 'state'
+      %th#sort-updated.col-md-2.col-sm-2.col-xs-2.col-lg-2= smart_listing.sortable 'Date de mise à jour', 'updated_at'
      - if @liste == "brouillon"
-        %th.col-md-2.col-lg-2= 'Action'
+        %th.col-md-2.col-sm-2.col-xs-2.col-lg-2= 'Action'
    - @dossiers.each do |dossier|
      - if dossier.kind_of? Invite
        - invite = dossier
--- a/app/views/users/dossiers/_state_description.html.haml
+++ b/app/views/users/dossiers/_state_description.html.haml
@ -2,9 +2,9 @@
  .panel.panel-info
    .panel-body.center
      .row
-        .col-md-1.col-lg-1
+        .col-md-1.col-lg-1.col-sm-1.col-xs-1
          .fa.fa-info-circle.text-info{style:'font-size: 2em; margin-top: 20%'}
-        .col-md-11.col-lg-11
+        .col-md-11.col-sm-11.col-xs-11.col-lg-11
          -if dossiers_list_facade.liste == 'brouillon'
            Les dossiers présents dans cette liste
            %b
--- a/app/views/users/dossiers/index.html.haml
+++ b/app/views/users/dossiers/index.html.haml
@ -2,11 +2,11 @@
  .default_data_block.default_visible
    %div.row.show-block#new_dossiers
      %div.header
-        %div.col-lg-10.col-md-10.title
+        %div.col-lg-10.col-md-10.col-sm-10.col-xs-10.title
          %div.carret-right
          %div.carret-down
          Dossiers
-        %div.col-lg-2.col-md-2.count
+        %div.col-lg-2.col-md-2.col-sm-2.col-xs-2.count
          -#0
          -#dossiers
      %div.body
--- a/app/views/users/recapitulatif/show.html.haml
+++ b/app/views/users/recapitulatif/show.html.haml
@ -1,2 +1,2 @@
-%div.col-lg-12.col-md-12#users_recapitulatif_dossier_show
+%div.col-lg-12.col-md-12.col-sm-12.col-xs-12#users_recapitulatif_dossier_show
  = render partial: "dossiers/dossier_show"
--- a/spec/features/backoffice/index_show_procedure_spec.rb
+++ b/spec/features/backoffice/index_show_procedure_spec.rb
@ -22,7 +22,6 @@ feature 'As an Accompagnateur I can navigate and use each functionnality around

  context 'On index' do

-    if false
    scenario 'Switching between procedures' do
      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)
@ -49,20 +48,53 @@ feature 'As an Accompagnateur I can navigate and use each functionnality around
      page.all('#dossiers_list a').first.click
      expect(page.all('#follow_dossiers .smart-listing')[0]['data-item-count']).to eq ("1")
    end
-    end

-    scenario 'Using sort' do
-    end
-
-    if false
-    scenario 'Using pagination' do
+    scenario 'Using sort and pagination' do
+      visit "/backoffice/dossiers/procedure/1?all_state_dossiers_smart_listing[sort][id]=asc"
+      wait_for_ajax
+      expect(page.all("#all_state_dossiers .dossier-row")[0]['id']).to eq('tr_dossier_1')
+      visit "/backoffice/dossiers/procedure/1?all_state_dossiers_smart_listing[sort][id]=desc"
+      wait_for_ajax
+      expect(page.all(".dossier-row")[0]['id']).to eq('tr_dossier_20')
+      page.find('#all_state_dossiers .next_page a').trigger('click')
+      wait_for_ajax
+      page.find('#all_state_dossiers .next_page a').trigger('click')
+      wait_for_ajax
+      expect(page.all(".dossier-row")[0]['id']).to eq('tr_dossier_6')
+      page.find('#all_state_dossiers .prev a').trigger('click')
+      wait_for_ajax
+      expect(page.all(".dossier-row")[0]['id']).to eq('tr_dossier_13')
    end

    scenario 'Using filter' do
    end

    scenario 'Have an export button' do
+      expect(page.all('.export-link')[0].text).to eq('Au format CSV')
+      expect(page.all('.export-link')[1].text).to eq('Au format XLSX')
+      expect(page.all('.export-link')[2].text).to eq('Au format ODS')
    end
+  end
+
+  context 'On show' do
+
+    scenario 'Following dossier' do
+      expect(page.all('#follow_dossiers .count').first.text).to eq('0 dossiers')
+      visit "/backoffice/dossiers/procedure/1?all_state_dossiers_smart_listing[sort][id]=asc"
+      page.find_by_id("suivre_dossier_1").trigger('click')
+      visit "backoffice/dossiers/4"
+      page.find_by_id("suivre_dossier_4").trigger('click')
+      visit "/backoffice/dossiers/procedure/1"
+      expect(page.all('#follow_dossiers .count').first.text).to eq('2 dossiers')
+    end
+
+    scenario 'Adding message' do
+      page.find_by_id('tr_dossier_4').trigger('click')
+      expect(page).to have_current_path(backoffice_dossier_path(4), only_path: true)
+      page.find_by_id('open-message').click
+      page.execute_script("$('#texte_commentaire').data('wysihtml5').editor.setValue('Contenu du nouveau message')")
+      page.find_by_id('save-message').click
+      expect(page.find('.last-commentaire .content').text).to eq('Contenu du nouveau message')
    end
  end
 end