Form elements should not move anymore when focused

Gemfile.lock

@@ -341,7 +341,7 @@ GEM
     responders (2.4.0)
       actionpack (>= 4.2.0, < 5.3)
       railties (>= 4.2.0, < 5.3)
-    rubocop (0.49.0)
+    rubocop (0.49.1)
       parallel (~> 1.10)
       parser (>= 2.3.3.1, < 3.0)
       powerpack (~> 0.1)

app/assets/stylesheets/all.sass

@@ -53,7 +53,7 @@ a
   margin: 1em auto
   padding: 0.5em 1.1em
   max-width: 50em
-  font-size: x-large
+  font-size: larger
   text-align: justify
   box-shadow: 0 0 0.3em gray
   border-radius: 3px
@@ -82,10 +82,9 @@ header.top
     margin-right: 2%
   h1
     margin: 0
-    font-size: 2.1em
   h2
     font:
-      size: 1.2em
+      size: inherit
       style: italic
       weight: normal
     margin-top: 0
@@ -118,7 +117,7 @@ aside
   z-index: 10
   padding: 5px
   position: relative
-  font-size: 0.7em
+  font-size: smaller
   box-shadow: 4px 4px 1em gray
   margin-right: -4em
   border-radius: 1em
@@ -154,8 +153,6 @@ footer.bottom nav
     padding: 1.8%
     display: inline-block
     font-weight: bolder
-    em.fa
-      font-size: x-large
     &:hover
       text-shadow: 0 0 1em lightgray
 

app/assets/stylesheets/form.sass

@@ -33,24 +33,26 @@ body.mce-content-body
     margin: 0
     padding: 0.5em
     text-align: right
-  input, textarea, .radios, .mce-tinymce, div.tagsinput
+  input, textarea, .radios, .mce-tinymce, div.tagsinput, .field_with_errors:last-child
     flex-grow: 1
   select
     margin-left: 0
+    margin-right: 0
+  .field_with_errors:first-child
+    width: 10em
+  .field_with_errors > *
+    width: 100%
+    display: block
 
 input, textarea, select, a.button, .actions > button, .radios, .mce-tinymce, div.tagsinput
-  border: none
+  border: solid 0.25em transparent
   outline: none
-  padding: 0.5em
+  padding: 0.25em
   font-size: inherit
   font-family: inherit
   background-color: transparent
   &:focus
-    border: solid 0.4em #F0F8FF
+    border-color: #F0F8FF
-    padding: 0.1em 0.4em
-    background-color: transparent
-    border-left-width: 0.1em
-    border-right-width: 0.1em
   &[type=radio]
     box-shadow: none
   &[type=radio] + label
@@ -63,8 +65,6 @@ input, textarea, select, a.button, .actions > button, .radios, .mce-tinymce, div
     font-weight: bolder
     letter-spacing: 2px
     background-color: #9CC5EE
-select
-  padding: 0.4em
 
 .field_with_errors
   display: inline
@@ -93,12 +93,12 @@ select
 
 .field
   &.required
-    & > label, .field_with_errors > label
+    & > label, & .field_with_errors > label
       &:after
         color: darkred
         content: '*'
         font-size: smaller
-  & > label:before, th:before, th a:before
+  & > label:before, & .field_with_errors > label:before, th:before, th a:before
     margin-right: 0.4em
     +fa-icon()
   &.login label:before

app/assets/stylesheets/mobile.sass

@@ -10,14 +10,7 @@
 
 @media all and (max-width: 900px)
   body
-    font-size: larger
+    font-size: smaller
-    line-height: 1.5
-
-  header.top
-    nav
-      font-size: smaller
-    h1
-      padding-top: 0.5em
 
   body
     border: none
@@ -36,7 +29,6 @@
 @media all and (max-width: 34em)
   body
     padding: 0
-    font-size: initial
   p
     padding-left: 0.4em
     padding-right: 0.4em
@@ -117,7 +109,7 @@
 
 @media all and (min-width: 1600px)
   body
-    font-size: x-large
+    font-size: larger
 
   aside#orga-list
     width: auto

public/assets/tinymce-6c71e41a6eb309ce70a47dcc4f40527cdbf62ed4195e836e1121e8ae0a8a0ad8.js

@@ -0,0 +1,23 @@
+(function() {
+  $(document).on('turbolinks:load', function() {
+    return tinyMCE.init({
+      schema: 'html5',
+      height: '40em',
+      menubar: '',
+      branding: false,
+      language: 'fr_FR',
+      selector: 'input.description',
+      content_css: '/assets/application-38c34a3672d6f8be0e341df91848151b0342bab6641e7715418e87e548f88de7.css',
+      entity_encoding: 'raw',
+      add_unload_trigger: true,
+      browser_spellcheck: true,
+      toolbar: [' cut copy paste | undo redo | searchreplace | link image media charmap table | code visualblocks preview fullscreen', ' removeformat | bold italic strikethrough | superscript subscript | bullist numlist | alignleft aligncenter alignright alignjustify alignnone | outdent indent'],
+      plugins: 'lists, advlist, autolink, link, image, charmap, paste, print, preview, table, fullscreen, searchreplace, media, insertdatetime, visualblocks, wordcount, contextmenu, code'
+    });
+  });
+
+  $(document).on('turbolinks:before-cache', function() {
+    return tinymce.remove();
+  });
+
+}).call(this);