Merge branch 'develop' into staging

.circleci/config.yml

@@ -56,6 +56,9 @@ jobs:
       - run:
           name: Run haml-lint
           command: bundle exec haml-lint app/views/
+      - run:
+          name: Run scss-lint
+          command: bundle exec scss-lint app/assets/stylesheets/
       - add_ssh_keys:
           fingerprints:
             - "0a:67:42:7d:7e:b7:e1:3c:48:8f:bf:68:10:51:a8:44"

.scss-lint.yml

@@ -0,0 +1,256 @@
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: none
+
+  # To enable later
+  ChainedClasses:
+    enabled: false
+
+  ColorKeyword:
+    enabled: true
+
+  # To enable later
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: true
+    style: silent
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: false
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: long
+
+  HexNotation:
+    enabled: true
+    style: uppercase
+
+  HexValidation:
+    enabled: true
+
+  # To enable later
+  IdSelector:
+    enabled: false
+
+  # To enable later
+  ImportantRule:
+    enabled: false
+
+  ImportPath:
+    enabled: false
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: false
+    convention: hyphenated_lowercase
+
+  # To enable later
+  NestingDepth:
+    enabled: false
+    max_depth: 3
+    ignore_parent_selectors: false
+
+  # To enable later
+  PlaceholderInExtend:
+    enabled: false
+
+  PrivateNamingConvention:
+    enabled: false
+    prefix: _
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+    disabled_properties: []
+
+  # To enable later
+  PropertyUnits:
+    enabled: false
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  PseudoElement:
+    enabled: true
+
+  # To enable later
+  QualifyingElement:
+    enabled: false
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  # To enable later
+  SelectorDepth:
+    enabled: false
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+
+  Shorthand:
+    enabled: false
+    allowed_shorthands: [1, 2, 3, 4]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+    style: one_space
+
+  SpaceAfterComment:
+    enabled: true
+    style: one_space
+    allow_empty_comments: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  # To enable later
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: true
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: false
+
+  Compass::*:
+    enabled: false

Gemfile

@@ -124,6 +124,7 @@ group :development do
   gem 'rack-handlers'
   gem 'xray-rails'
   gem 'haml-lint'
+  gem 'scss_lint', require: false
 end
 
 group :development, :test do

Gemfile.lock

@@ -550,6 +550,9 @@ GEM
     scenic (1.3.0)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
+    scss_lint (0.53.0)
+      rake (>= 0.9, < 13)
+      sass (~> 3.4.20)
     sdoc (0.4.2)
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
@@ -715,6 +718,7 @@ DEPENDENCIES
   rspec-rails (~> 3.0)
   sass-rails (~> 5.0)
   scenic
+  scss_lint
   sdoc (~> 0.4.0)
   select2-rails
   sentry-raven

app/assets/images/footer/logo-beta-gouv-fr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="53" width="318"><g font-size="50" fill="#373c42"><path d="M10.4 37.632c2.496 2.208 5.044 3.36 8.528 3.36 7.02 0 13.208-5.568 13.208-13.392 0-7.968-5.928-13.44-13.052-13.44-3.328 0-6.188 1.152-8.684 3.456V4.992H3.484V40.32H10.4v-2.688zm7.28-17.616c4.576 0 7.488 3.36 7.488 7.536 0 4.368-3.172 7.584-7.488 7.584-4.264 0-7.592-3.024-7.592-7.632 0-4.464 3.172-7.488 7.592-7.488zm40.204 12.816c-1.924 1.728-3.9 2.496-6.864 2.496-3.952 0-7.072-2.112-7.748-5.904h22.256c0-.576.052-.864.052-1.44 0-8.064-5.928-13.824-14.664-13.824-8.892 0-14.352 6.432-14.352 13.392 0 7.488 5.668 13.44 14.456 13.44 5.824 0 9.724-1.728 12.688-5.616l-5.824-2.544zm-14.3-8.448c1.352-3.216 4.004-4.8 7.436-4.8 3.692 0 6.656 1.824 7.592 4.8H43.584zm28.27-9.552H68.32v5.472h3.535V40.32h6.916V20.304h4.11v-5.472h-4.11V5.424h-6.91v9.408zM107.1 40.32h6.916V14.832H107.1v2.784c-2.496-2.304-5.356-3.456-8.684-3.456-7.176 0-13 5.472-13 13.44 0 7.824 6.136 13.392 13.156 13.392 3.484 0 6.084-1.152 8.528-3.36v2.688zm-7.28-20.304c4.368 0 7.592 3.024 7.592 7.488 0 4.656-3.328 7.632-7.592 7.632-4.316 0-7.436-3.216-7.436-7.584 0-4.176 2.86-7.536 7.436-7.536zm24.968 13.632c-2.184 0-4.004 1.584-4.004 3.648 0 2.016 1.82 3.696 4.004 3.696 2.236 0 3.952-1.68 3.952-3.696s-1.768-3.648-3.952-3.648zm38.08-18.816h-6.917v2.784c-2.6-2.256-5.3-3.456-8.73-3.456-7.02 0-12.89 5.184-12.89 13.056 0 7.632 5.83 13.104 13.26 13.104 3.59 0 6.09-1.104 8.37-3.168 0 2.4-.05 4.128-1.71 5.568-1.25 1.056-3.33 1.68-5.87 1.68-2.91 0-4.99-.672-6.4-2.208h-7.64c1.87 5.328 6.71 8.064 14.3 8.064 4.21 0 7.54-.912 10.04-2.832 3.17-2.496 4.21-5.808 4.21-10.752v-21.84zm-14.093 5.184c4.576 0 7.54 3.168 7.54 7.296 0 4.32-3.172 7.152-7.436 7.152-4.32 0-7.6-2.976-7.6-7.2 0-3.936 2.91-7.248 7.49-7.248zm34.068-5.856c-7.54 0-14.3 5.712-14.3 13.44 0 7.488 6.344 13.392 14.352 13.392 8.424 0 14.612-6.048 14.612-13.44 0-7.536-6.604-13.392-14.664-13.392zm.104 6.048c4.524 0 7.592 3.072 7.592 7.392 0 4.464-3.33 7.344-7.6 7.344-4.47 0-7.44-3.072-7.44-7.392 0-4.224 3.12-7.344 7.43-7.344zm20.16 6.288c0 2.112-.105 3.312.26 5.376 1.09 5.952 5.2 9.072 11.855 9.072 3.848 0 6.708-.96 8.892-3.216 2.912-2.976 3.224-6.432 3.224-11.136v-11.76h-6.916v13.584c0 4.32-1.508 6.672-5.2 6.672-3.64 0-5.2-2.4-5.2-6.96V14.832h-6.916v11.664zm40.07 13.824h4.47L259.4 14.832h-7.02l-6.968 15.024-6.968-15.024h-7.072l11.804 25.488zM264.856 35.6q1.228 0 2.057.79.857.766.857 1.873 0 1.108-.857 1.9-.857.763-2.057.763t-2.057-.764q-.83-.79-.83-1.9 0-1.106.83-1.87.85-.792 2.05-.792zm27.108-18.51l-.515 1.74h-4.17l-3.15 11.523q-2.09 7.62-4.2 11.786-3 5.88-6.46 8.12-2.63 1.71-5.26 1.71-1.72 0-2.92-.95-.89-.66-.89-1.72 0-.85.74-1.48.71-.61 1.77-.61.77 0 1.31.45.51.45.51 1.03 0 .58-.6 1.08-.46.37-.46.55 0 .23.2.37.255.18.8.18 1.226 0 2.6-.72 1.34-.71 2.4-2.14 1.054-1.4 1.996-4.06.4-1.11 2.146-7.31l4.97-17.85h-4.97l.4-1.74q2.37 0 3.315-.29.942-.314 1.713-1.16.8-.87 2.056-3.214 1.69-3.16 3.23-4.9 2.11-2.345 4.424-3.506 2.343-1.18 4.4-1.18 2.17 0 3.485 1.027 1.32 1.006 1.32 2.19 0 .926-.658 1.558-.658.63-1.687.63-.89 0-1.46-.47-.54-.475-.54-1.134 0-.42.37-1.03.37-.63.37-.84 0-.37-.26-.553-.37-.266-1.086-.266-1.8 0-3.23 1.058-1.913 1.4-3.43 4.38-.77 1.557-2.824 7.727h4.2z"/><path d="M293.906 17.934l9.855-1.476-4.11 12.814q5-7.884 9.09-11.02 2.32-1.794 3.77-1.794.95 0 1.49.527.55.5.55 1.477 0 1.74-.97 3.322-.68 1.186-1.97 1.186-.65 0-1.14-.395-.45-.396-.57-1.213-.06-.5-.26-.66-.22-.21-.54-.21-.48 0-.91.21-.74.37-2.25 2.057-2.37 2.58-5.14 6.69-1.19 1.74-2.05 3.93-1.2 3-1.37 3.61l-.912 3.32h-4.37l5.28-16.38q.915-2.85.915-4.06 0-.48-.43-.79-.57-.42-1.51-.42-.6 0-2.2.23l-.2-.98z"/></g></svg>

app/assets/images/header/logo-tps.svg

@@ -0,0 +1 @@
+<svg width="120" height="38" viewBox="0 0 120 38" xmlns="http://www.w3.org/2000/svg"><title>C03A1FFC-B3DD-48D2-8111-A47EEA63E68F</title><g fill="none" fill-rule="evenodd"><path d="M79.856 28V13.456h-5.568v-2.544h14.28v2.544h-5.592V28h-3.12zm10.848-17.088h7.416c1.84 0 3.272.444 4.296 1.332 1.024.888 1.536 2.1 1.536 3.636s-.516 2.752-1.548 3.648c-1.032.896-2.46 1.344-4.284 1.344H93.8V28h-3.096V10.912zm7.056 7.56c1.072 0 1.884-.22 2.436-.66.552-.44.828-1.076.828-1.908 0-.848-.272-1.492-.816-1.932-.544-.44-1.36-.66-2.448-.66H93.8v5.16h3.96zm11.028 9.216c-1.144-.352-2.116-.856-2.916-1.512l1.056-2.256a9.004 9.004 0 0 0 2.604 1.38c.904.296 1.892.444 2.964.444 1.184 0 2.1-.208 2.748-.624.648-.416.972-1 .972-1.752 0-.64-.3-1.132-.9-1.476-.6-.344-1.588-.668-2.964-.972-2.144-.464-3.704-1.064-4.68-1.8-.976-.736-1.464-1.808-1.464-3.216 0-1.008.272-1.904.816-2.688.544-.784 1.316-1.4 2.316-1.848 1-.448 2.156-.672 3.468-.672 1.2 0 2.34.18 3.42.54 1.08.36 1.964.86 2.652 1.5l-1.032 2.256c-1.52-1.216-3.2-1.824-5.04-1.824-1.104 0-1.976.228-2.616.684-.64.456-.96 1.076-.96 1.86 0 .672.284 1.184.852 1.536.568.352 1.54.68 2.916.984 1.424.336 2.584.7 3.48 1.092.896.392 1.584.896 2.064 1.512s.72 1.388.72 2.316c0 1.024-.272 1.916-.816 2.676-.544.76-1.328 1.348-2.352 1.764-1.024.416-2.232.624-3.624.624-1.312 0-2.54-.176-3.684-.528z" fill="#4393F3"/><g stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M24.81 35.032a12.06 12.06 0 0 0 1.597-.658 16.934 16.934 0 0 0 2.885-1.735c6.716-4.68 14.029-13.692 14.029-13.692l-.28-.028S31.888 4.968 23.888 2.852v.012c-2-.56-3.177-.864-5.05-.864C9.455 2 2 9.612 2 19s7.686 17 17.072 17c1.984 0 3.967-.341 5.738-.968z" stroke="#4393F3"/><path d="M42.268 35.032a12.06 12.06 0 0 1-1.597-.658 16.934 16.934 0 0 1-2.885-1.735c-6.716-4.68-14.03-13.692-14.03-13.692l.13-.028S34.888 4.968 42.888 2.852v.012c2-.56 3.328-.864 5.2-.864 9.384 0 16.914 7.612 16.914 17S57.355 36 47.97 36c-1.985 0-3.93-.341-5.7-.968z" stroke="#FF5D60"/></g><path d="M0 0h122v38H0z"/></g></svg>

app/assets/images/landing/features/collaborer.svg

@@ -0,0 +1 @@
+<svg width="96" height="92" viewBox="0 0 96 92" xmlns="http://www.w3.org/2000/svg"><title>08D2E231-4C84-4B79-AC9D-982A43B5F62D</title><g fill="none" fill-rule="evenodd"><path d="M0-2h96v96H0z"/><path d="M35 85.679c3.208 3.278 7.675 5.32 12.624 5.32 4.95 0 9.417-2.043 12.625-5.321-.922-3.106-3.123-6.105-8.248-6.105 0 0-1.634 1.592-4.377 1.592-2.744 0-4.376-1.592-4.376-1.592-5.125 0-7.326 2.999-8.248 6.106zM47.624 74.63c3.783 0 6.854-3.05 6.854-6.811 0-3.768-3.07-6.82-6.854-6.82-3.782 0-6.854 3.052-6.854 6.82 0 3.76 3.073 6.812 6.854 6.812zM1 42.679c3.208 3.278 7.675 5.32 12.625 5.32 4.949 0 9.417-2.043 12.625-5.321-.922-3.106-3.124-6.105-8.249-6.105 0 0-1.634 1.592-4.376 1.592-2.745 0-4.376-1.592-4.376-1.592-5.126 0-7.327 2.999-8.249 6.106zM13.624 31.63c3.783 0 6.854-3.05 6.854-6.811 0-3.768-3.07-6.82-6.854-6.82-3.783 0-6.854 3.052-6.854 6.82 0 3.76 3.074 6.812 6.854 6.812zM69 42.679c3.207 3.278 7.675 5.32 12.624 5.32 4.95 0 9.418-2.043 12.626-5.321-.922-3.106-3.124-6.105-8.249-6.105 0 0-1.635 1.592-4.377 1.592-2.743 0-4.375-1.592-4.375-1.592-5.126 0-7.328 2.999-8.25 6.106zM81.624 31.63c3.784 0 6.855-3.05 6.855-6.811 0-3.768-3.072-6.82-6.855-6.82-3.782 0-6.853 3.052-6.853 6.82 0 3.76 3.073 6.812 6.853 6.812zm-4.089-18.51C69.795 5.622 59.253 1 47.625 1s-22.17 4.622-29.91 12.12m50.143 68.825c10.966-5.859 19.089-16.33 21.788-28.825m-84.043 0c2.736 12.67 11.055 23.255 22.255 29.064" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

app/assets/images/landing/features/creer.svg

@@ -0,0 +1 @@
+<svg width="96" height="80" viewBox="0 0 96 80" xmlns="http://www.w3.org/2000/svg"><title>BB9A4BB9-1A5D-4E79-92B9-D2AF8B16FCF3</title><g fill="none" fill-rule="evenodd"><path d="M0-8h96v96H0z"/><path d="M17 17h63" stroke="#F8F8F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.423 13.029a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0" fill="#FFF"/><path d="M69 36H29m40 8H29m23-16H29m51 23V12c0-1.657-1.843-3-3.5-3h-57c-1.657 0-2.5 1.343-2.5 3v39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M95 62.023a3.918 3.918 0 0 1-3.912 3.923H4.908A3.914 3.914 0 0 1 1 62.023v-56.6A3.914 3.914 0 0 1 4.908 1.5h86.18A3.918 3.918 0 0 1 95 5.423v56.6zM66.998 78.5c-5.837-1.744-10.642-2.479-11.383-8.78v-3.774H38.08v3.386c-.582 6.664-5.468 7.388-11.423 9.168h40.341zM2 51h93" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

app/assets/images/landing/features/gerer.svg

@@ -0,0 +1 @@
+<svg width="77" height="95" viewBox="0 0 77 95" xmlns="http://www.w3.org/2000/svg"><title>48989501-DD47-4082-8A9E-1AFAB7A24CFE</title><g fill="none" fill-rule="evenodd"><path d="M-10-1h96v96h-96z"/><path d="M65.917 16a4.917 4.917 0 1 1-9.834 0 4.917 4.917 0 0 1 9.834 0z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M74.74 13.84h-3.718a10.153 10.153 0 0 0-1.41-3.395l2.631-2.631a1.26 1.26 0 0 0 0-1.784l-1.272-1.272a1.264 1.264 0 0 0-1.785 0l-2.63 2.632a10.202 10.202 0 0 0-3.395-1.412V2.262C63.161 1.566 62.596 1 61.9 1h-1.798c-.696 0-1.26.566-1.26 1.262v3.716a10.216 10.216 0 0 0-3.396 1.412l-2.632-2.632a1.261 1.261 0 0 0-1.783 0L49.76 6.03a1.26 1.26 0 0 0 0 1.784l2.63 2.63a10.196 10.196 0 0 0-1.412 3.396h-3.717a1.26 1.26 0 0 0-1.26 1.262V16.9a1.26 1.26 0 0 0 1.26 1.26h3.717c.265 1.23.75 2.375 1.411 3.396l-2.63 2.632a1.258 1.258 0 0 0 0 1.782l1.271 1.274a1.261 1.261 0 0 0 1.783 0l2.632-2.631a10.256 10.256 0 0 0 3.395 1.41v3.716c0 .696.565 1.263 1.261 1.263H61.9c.697 0 1.262-.567 1.262-1.263v-3.715a10.242 10.242 0 0 0 3.394-1.411l2.631 2.63a1.264 1.264 0 0 0 1.785 0l1.272-1.273a1.258 1.258 0 0 0 0-1.782l-2.63-2.632a10.153 10.153 0 0 0 1.41-3.395h3.717A1.26 1.26 0 0 0 76 16.9v-1.798a1.26 1.26 0 0 0-1.26-1.262z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M45 2H3.727A2.727 2.727 0 0 0 1 4.726v86.545A2.727 2.727 0 0 0 3.727 94h69.546A2.727 2.727 0 0 0 76 91.272V31M1 12h39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.256 7.028a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001" fill="#FFF"/><path d="M66 39H11m55 9H11m55 8H11m55 9H11m31-35H11m31 44H11" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

app/assets/images/landing/testimonials/quotation-mark.svg

@@ -0,0 +1 @@
+<svg width="39" height="31" viewBox="0 0 39 31" xmlns="http://www.w3.org/2000/svg"><title>Slice</title><path d="M14.832 15.96v14.432H0v-10.13c0-3.886.672-7.471 2.016-10.756C3.36 6.222 5.616 3.053 8.784 0l5.472 4.163C10.512 8.05 8.4 11.981 7.92 15.96h6.912zm24.192 0v14.432H24.192v-10.13c0-3.886.672-7.471 2.016-10.756 1.344-3.284 3.6-6.453 6.768-9.506l5.472 4.163c-3.744 3.886-5.856 7.818-6.336 11.796h6.912z" fill="#4393F3" fill-rule="nonzero"/></svg>

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.removeClass('header-section');
-    parent.children(".drop_down_list").removeClass('show_inline');
+    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();

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) {
+  $('#publish-modal').on('show.bs.modal', function (event) {
-    $("#publishModal .modal-body .table .tr_content").hide();
+    $("#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);
+    modal.find('#publish-modal-title').html(modal_title);
-    $("#publishModal .modal-body .table #"+modal_index).show();
+    $("#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
   });

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());
   });

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);
 }

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 .body').toggle();
-  $('.default_data_block #dossier .carret-right').toggle();
+  $('.default-data-block #dossier .carret-right').toggle();
-  $('.default_data_block #dossier .carret-down').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);
   });
 

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');
+    $('#procedure-list').addClass('hidden');
-    $('#notifications_list').removeClass('hidden');
+    $('#notifications-list').removeClass('hidden');
     $(this).addClass('active');
     $('#switch-procedures').removeClass('active');
   })
   $('#switch-procedures').click(function () {
-    $('#notifications_list').addClass('hidden');
+    $('#notifications-list').addClass('hidden');
-    $('#procedure_list').removeClass('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-menu #logos').toggle(100);
-  $('.row.etape.etape_1 .etapes_informations #description_procedure').toggle(100);
+  $('.row.etape.etape_1 .etapes-informations #description_procedure').toggle(100);
 }

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'))
   });
 }

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) {
+  $('#pj-modal').on('show.bs.modal', function (event) {
-    $("#PJmodal .modal-body .table .tr_content").hide();
+    $("#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);
+    modal.find('#pj-modal-title').html(modal_title);
-    $("#PJmodal .modal-body .table #"+modal_index).show();
+    $("#pj-modal .modal-body .table #"+modal_index).show();
   })
 }

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-dossier-open-action").on('click', function () {
-    $("#pref_list_menu").css('display', 'block');
+    $("#pref-list-menu").css('display', 'block');
-    $("#pref_list_menu").css('visibility', 'visible');
+    $("#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-dossier-close-action").on('click', function () {
-    $("#pref_list_menu").animate({
+    $("#pref-list-menu").animate({
-        right: parseInt($("#pref_list_menu").css('width'), 10)*(-1)+'px'
+        right: parseInt($("#pref-list-menu").css('width'), 10)*(-1)+'px'
       },{
         duration: 250,
         complete: function () {
-          $("#pref_list_menu").css('display', 'none');
+          $("#pref-list-menu").css('display', 'none');
-          $("#pref_list_menu").css('visibility', 'hidden');
+          $("#pref-list-menu").css('visibility', 'hidden');
         }
       }
     )

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() {
+  $("#procedure-module-api-carto-use-api-carto").on('change', function() {
-    $("#modules_api_carto").toggle()
+    $("#modules-api-carto").toggle()
   });
 
-  if ($('#procedure_module_api_carto_use_api_carto').is(':checked'))
+  if ($('#procedure-module-api-carto-use-api-carto').is(':checked'))
-    $("#modules_api_carto").show();
+    $("#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();
 }

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);

app/assets/stylesheets/_card.scss

@@ -1,6 +1,6 @@
 .card {
-  background: white;
+  background: #FFFFFF;
   padding: 15px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   border-radius: 2px;
 }

app/assets/stylesheets/_colors.scss

@@ -0,0 +1,5 @@
+$blue: #4393F3;
+$light-blue: rgba(61, 149, 236, 0.8);
+$black: #333333;
+$grey: #999999;
+$light-grey: #F8F8F8;

app/assets/stylesheets/_constants.scss

@@ -1,5 +1,7 @@
 // colors
 $light-blue: #F2F6FA;
 
-// Bootstrap variables
+// Bootstrap constants
 $font-size-base: 16px;
+
+$page-width: 1040px;

app/assets/stylesheets/_mixins.scss

@@ -0,0 +1,9 @@
+@mixin horizontal-padding($value) {
+  padding-left: $value;
+  padding-right: $value;
+}
+
+@mixin vertical-padding($value) {
+  padding-top: $value;
+  padding-bottom: $value;
+}

app/assets/stylesheets/_placeholders.scss

@@ -0,0 +1,14 @@
+%horizontal-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0px;
+}
+
+%horizontal-list-item {
+  display: inline-block;
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+}

app/assets/stylesheets/_turbolinks.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import "constants";
 
 .turbolinks-progress-bar {
   background-color: $light-blue;

app/assets/stylesheets/_typography.scss

@@ -0,0 +1,6 @@
+@import "colors";
+
+%new-type {
+  font-family: "Muli";
+  color: $black;
+}

app/assets/stylesheets/admin_index.scss

@@ -1,22 +0,0 @@
-#admin_index{
-  margin-left: 2em;
-  margin-right: 2em;
-
-  .table {
-    #id {
-      width: 5%;
-    }
-
-    #libelle {
-      width: 40%;
-    }
-
-    #organisation {
-      width: 28%;
-    }
-
-    #direction {
-      width: 22%;
-    }
-  }
-}

app/assets/stylesheets/admin_procedures_modal.scss

@@ -1,17 +1,18 @@
-.path_mine_false {
+.path-mine-false {
-  color: red
+  color: #FF0000;
 }
 
-#path_messages {
+#path-messages {
   .message {
-    display: none
+    display: none;
   }
 }
 
-#publishModal {
+#publish-modal {
   .twitter-typeahead {
     width: 300px;
   }
+
   .tt-menu {
     width: 300px;
   }

app/assets/stylesheets/admin_type_de_champ.scss

@@ -1,13 +1,13 @@
-.header_section{
+.header-section {
   background-color: rgb(0, 49, 137);
   margin-top: 20px;
   margin-bottom: 10px;
   margin-left: 0;
   margin-right: 0;
-  text-align:center;
+  text-align: center;
   padding-bottom: 8px;
 
-  color: white;
+  color: #FFFFFF;
 
   .form-control.libelle {
     font-weight: bold;
@@ -22,26 +22,27 @@
   }
 }
 
-#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;
   }
 
   .form-group {
     vertical-align: top;
-    margin-right:  15px;
+    margin-right: 15px;
   }
 
   .description {
     padding: 0;
+
     textarea {
       padding: 6px 12px;
     }

app/assets/stylesheets/application.scss

@@ -1,28 +1,28 @@
-//= depend_on_asset "layers.png"
+// = depend_on_asset "layers.png"
-//= depend_on_asset "layers-2x.png"
+// = depend_on_asset "layers-2x.png"
-/*
+
- * This is a manifest file that'll be compiled into application.css, which will include all the files
+// This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
+// listed below.
- *
+//
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+// Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+// or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
+//
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+// You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
+// compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+// defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
+// file per style scope.
- *
+//
- *= require_tree .
+// = require_tree .
- *= require_self
+// = require_self
- *= require bootstrap-datepicker3
+// = require bootstrap-datepicker3
- *= require leaflet
+// = require leaflet
- *= require font-awesome
+// = require font-awesome
- *= require franceconnect
+// = require franceconnect
- *= require bootstrap-wysihtml5
+// = require bootstrap-wysihtml5
- *= require select2
+// = require select2
- *= require select2-bootstrap
+// = require select2-bootstrap
- */
+
-@import "variables";
+@import "constants";
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
@@ -30,7 +30,8 @@ body {
   background-color: $light-blue;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -53,12 +54,13 @@ form {
   overflow: hidden;
 }
 
-#wrap:after {
+#wrap::after {
   content: "";
   display: block;
 }
 
-#footer, #wrap:after {
+#footer,
+#wrap::after {
   height: 50px;
 }
 
@@ -66,35 +68,32 @@ form {
   background-color: $light-blue;
   text-align: center;
   padding: 0;
-  a, p {
+
+  a,
+  p {
     color: #000000;
   }
+
   a:hover {
     color: #000000;
   }
+
   p {
     line-height: 40px;
     padding: 0;
   }
 }
 
-.beta_staging {
+.beta-staging {
   background-color: #B00100 !important;
 }
 
-.staging_warning {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .text-purple {
-  color: #8B008B
+  color: #8B008B;
 }
 
 .text-default {
-  color: grey;
+  color: #808080;
 }
 
 .progress-bar-purple {
@@ -122,16 +121,16 @@ form {
   min-height: 100%;
   font-size: 100px;
   text-align: right;
-  filter: alpha(opacity=0);
+  filter: alpha(opacity = 0);
   opacity: 0;
   outline: none;
-  background: white;
+  background: #FFFFFF;
   cursor: inherit;
   display: block;
 }
 
 .vr {
-  border-left: 1px solid grey;
+  border-left: 1px solid #808080;
 }
 
 .center {
@@ -142,10 +141,6 @@ textarea#description {
   width: 100%;
 }
 
-.logo_fc_small {
-  max-width: 27px;
-}
-
 div.pagination {
   padding-top: 20px;
   display: block;
@@ -156,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;
@@ -199,11 +194,11 @@ div.pagination {
   right: 50px;
 }
 
-#fconnect-access:before {
+#fconnect-access::before {
   left: 22.7% !important;
 }
 
-#fconnect-access:after {
+#fconnect-access::after {
   left: 23% !important;
 }
 
@@ -217,7 +212,6 @@ div.pagination {
     font-size: 16px !important;
     margin-right: 0px !important;
   }
-
 }
 
 .no-padding {

app/assets/stylesheets/backoffice.scss

@@ -1,33 +1,31 @@
-#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;
+
     .show-block {
       width: 100%;
     }
+
     .body {
       height: auto;
     }
   }
+
   .fixed-right {
     position: fixed;
     right: 20px;
   }
 }
 
-#pref_list {
-  .dropdown-menu {
-    padding: 10px;
-    width: 500px;
-  }
-}
-
 #onglets {
   ul {
-    li, li.active {
+    li,
+    li.active {
       a {
         margin-top: 12px;
         height: 45px;

app/assets/stylesheets/carte.scss

@@ -3,26 +3,19 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 @import "bootstrap";
 
-#carte_page {
+#carte-page {
   #map {
-    @extend .col-md-12;
-    @extend .col-lg-12;
-
     margin-left: 15px;
     width: 90%;
     height: 600px;
   }
 
-  #map.qp, #map.cadastre {
+  #map.qp,
-    @extend .col-md-9;
+  #map.cadastre {
-    @extend .col-lg-9;
-
     width: 70%;
   }
 
   .list {
-    @extend .col-md-3;
-    @extend .col-lg-3;
     margin-bottom: 20px;
 
     h3 {
@@ -36,10 +29,10 @@
 }
 
 .leaflet-container path {
-  cursor: url('/assets/edit.png'), default !important;
+  cursor: url("/assets/edit.png"), default !important;
 }
 
-#infos_dossier {
+#infos-dossiers {
   #map.mini {
     height: 300px;
     width: 100%;
@@ -51,14 +44,14 @@
   top: 0;
   left: 0;
   pointer-events: none;
-  box-shadow: inset -100px 0 100px -100px rgba(0, 0, 0, .25);
+  box-shadow: inset -100px 0 100px -100px rgba(0, 0, 0, 0.25);
   width: 100%;
   height: 100%;
   z-index: 2001;
 }
 
 #map.mode-create {
-  cursor: url('/assets/pencil.png'), crosshair !important;
+  cursor: url("/assets/pencil.png"), crosshair !important;
 }
 
 #map g path.tracer {
@@ -69,8 +62,7 @@
   position: absolute;
   z-index: 1001;
   fill: #D7217E;
-  fill-opacity: .75;
+  fill-opacity: 0.75;
-  -webkit-filter: none;
 }
 
 #map.mode-delete path {
@@ -78,12 +70,11 @@
 }
 
 #map.mode-delete path:hover {
-  fill: #4d4d4d !important;
+  fill: #4D4D4D !important;
 }
 
 #map div.polygon-elbow {
-  -webkit-transition: opacity .25s;
+  box-shadow: 0 0 0 2px #FFFFFF, 0 0 10px rgba(0, 0, 0, 0.35);
-  box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, .35);
   border: 5px solid #D7217E;
   border-radius: 10px;
   transition: opacity 0.25s;
@@ -98,7 +89,7 @@
 #map div.polygon-elbow.non-polygon {
   opacity: 0 !important;
   pointer-events: none !important;
-  border: 5px solid darkgray;
+  border: 5px solid #A9A9A9;
 }
 
 #map.mode-edit div.polygon-elbow {
@@ -119,7 +110,6 @@
 .info {
   padding: 6px 8px;
   font: 14px/16px Arial, Helvetica, sans-serif;
-  background: white;
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
@@ -127,13 +117,14 @@
 
 .info h4 {
   margin: 0 0 5px;
-  color: #777;
+  color: #777777;
 }
 
-#search_by_address {
+#search-by-address {
   .twitter-typeahead {
     width: 555px;
   }
+
   .tt-menu {
     width: 555px;
   }

app/assets/stylesheets/custom-mails.scss

@@ -2,7 +2,7 @@
   padding: 20px;
 
   .wrapper {
-    background-color: #FFF;
+    background-color: #FFFFFF;
     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
     margin: 15px auto;
     max-width: 800px;

app/assets/stylesheets/default_data_block.scss

@@ -1,6 +1,6 @@
-@import "variables";
+@import "constants";
 
-.default_data_block {
+.default-data-block {
   font-family: Arial;
 
   .show-block {
@@ -9,6 +9,7 @@
     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
     margin-bottom: 40px;
   }
+
   .carret-right {
     float: left;
     width: 0;
@@ -18,6 +19,7 @@
     border-left: 14px solid #FFFFFF;
     margin: 12px 12px 0 15px;
   }
+
   .carret-down {
     float: left;
     width: 0;
@@ -28,24 +30,34 @@
     border-top: 14px solid #FFFFFF;
     margin: 12px 12px 0 15px;
   }
+
   .header {
     background-color: #003C92;
     height: 40px;
     color: #FFFFFF;
     font-size: 18px;
     font-weight: bold;
-    .title, .title-no-expanse, .action, .count {
+
+    .title,
+    .title-no-expanse,
+    .action,
+    .count {
       height: 100%;
       line-height: 40px;
       padding: 0px;
       text-transform: uppercase;
     }
+
     .title-no-expanse {
       cursor: not-allowed;
     }
-    .title, .action, .count {
+
+    .title,
+    .action,
+    .count {
       cursor: pointer;
     }
+
     .action {
       background-color: #E45B51;
       text-align: center;
@@ -54,14 +66,17 @@
       text-decoration: none;
       color: #FFFFFF;
     }
+
     .action:hover {
       color: $light-blue;
     }
+
     .count {
       font-size: 16px;
       text-align: center;
     }
   }
+
   .body {
     background-color: #FFFFFF;
     display: none;

app/assets/stylesheets/description.scss

@@ -1,12 +1,13 @@
 @import "bootstrap";
 @import "bootstrap-datepicker3";
 
-#description_page #liste_champs {
+#description-page #liste-champs {
 
-  .default_data_block {
+  .default-data-block {
     .show-block {
       width: 90%;
-      .body{
+
+      .body {
         padding: 15px;
       }
     }
@@ -18,16 +19,16 @@
   }
 }
 
-.page-header{
+.page-header {
   border-bottom: 1px solid #CCCCCC !important;
 }
 
 .input-error {
-  color: darkred !important;
+  color: #8B0000 !important;
-  border-color: darkred !important
+  border-color: #8B0000 !important;
 }
 
-.type_champ-text {
+.type-champ-text {
   @extend .col-md-6;
   @extend .col-lg-6;
 
@@ -36,28 +37,30 @@
   }
 }
 
-.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;
 
   .twitter-typeahead {
     width: 100%;
+
     input {
       width: 100%;
       display: block !important;
     }
   }
+
   .tt-menu {
     width: 100%;
   }
 }
 
-.type_champ-email {
+.type-champ-email {
   @extend .col-md-4;
   @extend .col-lg-4;
 
@@ -66,23 +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;
 
@@ -92,11 +98,11 @@
 }
 
 .datepicker-switch {
-  color: #0086b3;
+  color: #0086B3;
   text-decoration: underline;
 }
 
-.type_champ-textarea {
+.type-champ-textarea {
   @extend .col-md-8;
   @extend .col-lg-8;
 
@@ -106,7 +112,7 @@
   }
 }
 
-.type_champ-number {
+.type-champ-number {
   @extend .col-md-3;
   @extend .col-lg-3;
 
@@ -115,7 +121,7 @@
   }
 }
 
-.type_champ-date {
+.type-champ-date {
   @extend .col-md-2;
   @extend .col-lg-2;
 
@@ -124,7 +130,7 @@
   }
 }
 
-.type_champ-datetime {
+.type-champ-datetime {
   @extend .col-md-5;
   @extend .col-lg-5;
 

app/assets/stylesheets/dossier_show.scss

@@ -1,27 +1,35 @@
-#backoffice_dossier_show, #users_recapitulatif_dossier_show {
+#backoffice-dossier-show,
+#users-recapitulatif-dossier-show {
 
   #messages {
     .last-commentaire {
       display: block;
       background-color: #FFFFFF;
-      .content, .new-action {
+
+      .content,
+      .new-action {
         margin-bottom: 20px;
       }
     }
+
     .body {
       .commentaires {
         max-height: 350px;
         overflow-y: scroll;
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.075) 0%, rgba(219, 219, 219, 0) 50%, rgba(250, 251, 253, 0.18) 51%, #ffffff 100%);
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.075) 0%, rgba(219, 219, 219, 0) 50%, rgba(250, 251, 253, 0.18) 51%, #FFFFFF 100%);
       }
+
       .no-commentaires {
         text-align: center;
         font-size: 18px;
         padding-top: 20px;
       }
     }
-    .last-commentaire, .commentaire {
+
+    .last-commentaire,
+    .commentaire {
       padding: 20px 0 0 20px;
+
       .comment-header {
         font-family: Arial;
         font-size: 14px;
@@ -30,10 +38,12 @@
         color: #000000;
         margin-bottom: 10px;
       }
+
       .file {
         padding-right: 70px;
         text-align: center;
         margin-bottom: 20px;
+
         .link {
           span {
             width: 100%;
@@ -42,41 +52,48 @@
         }
       }
     }
+
     .split-hr {
       margin: 20px 20px 0 20px;
       border-bottom: 1px solid #979797;
     }
+
     #new-commentaire {
       padding: 15px;
     }
   }
+
   .infos {
     .split-row {
       margin: 0 0 20px 0;
     }
+
     .entreprise-info {
       font-size: 14px;
     }
+
     .entreprise-label {
       font-weight: bold;
       text-align: end;
     }
   }
-  #carto {
+
-  }
   #private-fields {
     .text-primary {
-      color: #337ab7;
+      color: #337AB7;
     }
   }
+
   #pieces-jointes {
     .piece-row {
       margin: 20px;
+
       .piece-label {
         text-align: right;
         font-weight: bold;
       }
     }
+
     .modal-title {
       color: #000000;
     }
@@ -89,31 +106,40 @@
     }
   }
 
-  #dossier, #pieces-jointes, .infos, #carto, #private-fields {
+  #dossier,
+  #pieces-jointes,
+  .infos,
+  #carto,
+  #private-fields {
     .body {
       padding: 20px 20px 0 20px;
       color: #000000;
+
       .libelle-procedure {
         font-style: italic;
         padding: 10px;
       }
+
       .depositaire-label {
         font-weight: bold;
         text-align: end;
       }
-      .depositaire-info {
+
-      }
+      .btn-action {
-      .btn-action{
         border: none;
         margin: 20px 0 40px 0;
       }
+
       .btn-action:hover {
         color: #EEEEEE;
       }
+
       .action {
         margin: 50px 0 0 15px;
       }
-      .action, .btn-action {
+
+      .action,
+      .btn-action {
         background-color: #E45B51;
         text-align: center;
         cursor: pointer;
@@ -125,44 +151,55 @@
         font-size: 16px;
         font-weight: bold;
         text-decoration: none;
+
         a:hover {
           color: #EEEEEE;
         }
       }
+
       .historique {
         color: #000000;
         margin-left: 20px;
       }
+
       .comments {
         margin-right: -10px;
       }
+
       .comments-off {
         margin-right: -35px;
       }
+
       .dossier-title {
         font-size: 16px;
         min-height: 40px;
         text-align: center;
       }
+
       .split-hr {
         border-bottom: 1px solid #979797;
         height: 12px;
         min-height: 10px;
       }
+
       .title-row {
         margin: 20px 10px 10px 10px;
       }
+
       .margin-top-40 {
         margin-top: 40px;
       }
+
       .margin-top-20 {
         margin-top: 20px;
       }
+
       .margin-bot-40 {
         margin-bottom: 40px;
       }
     }
-    #pieces_justificatives {
+
+    #pieces-justificatives {
       .piece-row {
         margin: 0 0 0 0;
       }

app/assets/stylesheets/dossiers.scss

@@ -3,10 +3,10 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 h5 span {
-  font-weight: normal
+  font-weight: normal;
 }
 
-#insee_infogreffe {
+#insee-infogreffe {
   font-size: 17px;
 }
 
@@ -23,13 +23,7 @@ h5 span {
   }
 }
 
-#recap_dossier {
+#dossiers-list {
-  #validate_button {
-    float: right;
-  }
-}
-
-#dossiers_list {
   .filter {
     cursor: pointer;
     font-size: 1.1em;
@@ -37,30 +31,40 @@ h5 span {
   }
 }
 
-#dossiers_list tr:hover{
+#dossiers-list tr:hover {
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   cursor: pointer;
 }
 
-#procedure_list, #notifications_list {
+#procedure-list,
+#notifications-list {
   margin-left: -10px;
   margin-top: 20px;
-  a, a:hover {
+
+  a,
+  a:hover {
     color: #FFFFFF;
     text-decoration: none;
   }
-  .procedure_list_element.active, .notification.active {
+
+  .procedure-list-element.active,
+  .notification.active {
     background-color: #668ABD;
   }
-  .procedure_list_element, .notification {
+
+  .procedure-list-element,
+  .notification {
     padding: 15px 40px 15px 20px;
     cursor: pointer;
     line-height: 1.8em;
+
     .progress-bar-warning {
       background-color: #E4594F;
     }
   }
-  .procedure_list_element:hover, .notification:hover {
+
+  .procedure-list-element:hover,
+  .notification:hover {
     background-color: #668ABD;
     cursor: pointer;
   }

app/assets/stylesheets/etapes.scss

@@ -1,14 +1,15 @@
-.etape_2{
+.etape-2 {
-  .etapes_menu{
+  .etapes-menu {
-    #dossier_siret{
+    #dossier-siret {
       width: 200px;
     }
 
-    button{
+    button {
       margin-top: 8px;
     }
   }
-  .etapes_informations{
+
+  .etapes-informations {
     padding-top: 15px;
   }
 }

app/assets/stylesheets/fonts.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "Muli";
+  src: asset-url("Muli-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Muli";
+  src: asset-url("Muli-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}

app/assets/stylesheets/france_connect_particulier.scss

@@ -1,5 +1,5 @@
-#france_connect_particulier_email{
+#france-connect-particulier-email {
   width: 300px;
-  margin-left:auto;
+  margin-left: auto;
-  margin-right:auto;
+  margin-right: auto;
 }

app/assets/stylesheets/header.scss

@@ -0,0 +1,53 @@
+@import "constants";
+@import "colors";
+@import "mixins";
+@import "typography";
+
+// FIXME: Rename when the header is generalized
+.new-header {
+  @extend %new-type;
+  height: 72px;
+  background-color: #FFFFFF;
+  // FIXME: Delete when the header is generalized
+  margin-top: -60px;
+}
+
+.header-inner-content {
+  width: $page-width;
+  margin: 0 auto;
+}
+
+.header-logo {
+  margin-top: 17px;
+}
+
+$header-login-button-height: 36px;
+$header-login-button-border-size: 1px;
+
+.header-login-button {
+  @include horizontal-padding(16px);
+
+  display: inline-block;
+  height: $header-login-button-height;
+  line-height: $header-login-button-height - (2 * $header-login-button-border-size);
+  border-radius: $header-login-button-height;
+  border: $header-login-button-border-size solid $blue;
+  color: $blue;
+  font-size: 14px;
+  margin-top: 18px;
+
+  &:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: $light-blue;
+  }
+
+  &:focus {
+    color: $blue;
+    text-decoration: none;
+  }
+
+  &:hover:focus {
+    color: #FFFFFF;
+  }
+}

app/assets/stylesheets/landing.scss

@@ -1,62 +1,238 @@
-#logo-tps {
+@import "constants";
-  width: 200px;
+@import "colors";
+@import "mixins";
+@import "placeholders";
+@import "typography";
+
+.landing {
+  @extend %new-type;
+  background-color: #FFFFFF;
 }
 
-#landing {
+.landing-panel {
-  background-image: image-url('landing_background.png');
+  @include vertical-padding(60px);
-  background-attachment: fixed;
+}
-  background-size: 130% auto;
-  background-position: top center;
-  background-repeat: no-repeat;
 
-  h5{
+.landing-panel-inner-content {
-    color: grey;
+  width: $page-width;
+  margin: 0 auto;
+}
+
+.hero-tagline {
+  width: 500px;
+  font-size: 30px;
+  margin-bottom: 0px;
+}
+
+.hero-tagline-em {
+  color: $blue;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.hero-text {
+  width: 500px;
+}
+
+.hero-illustration {
+  width: 500px;
+}
+
+.hero-button {
+  @include horizontal-padding(30px);
+
+  display: inline-block;
+  height: 60px;
+  line-height: 60px;
+  border-radius: 60px;
+  background-color: $blue;
+  color: #FFFFFF;
+  font-size: 24px;
+  margin-top: 30px;
+
+  &:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: $light-blue;
   }
 
-  .logos {
+  &:focus {
-    width: 150px;
+    color: #FFFFFF;
-  }
+    text-decoration: none;
-
-  #title {
-    padding-bottom: 2%;
-    padding-top: 1%;
-
-    h2 {
-      font-size: 35px;
-    }
-
-    .btn {
-      text-shadow: none;
-    }
-
-    color: white;
-    text-shadow: 0px 0px 10px rgb(0, 0, 0);
   }
 }
 
-.background-tps{
+.landing-panel-title {
-  background-color: #668AEA;
+  font-size: 30px;
-  color: white;
+  font-weight: normal;
+  text-align: center;
+  margin-bottom: 40px;
+  margin-top: 0;
 }
 
-.latest_release{
+.features-panel {
-  margin-left: 1%
+  background-color: $blue;
 }
 
-#landing_body{
+.features-panel-title {
-  .split-hr-left {
+  color: #FFFFFF;
-    margin-left: auto;
+}
-    margin-right: auto;
 
-    margin-top: 40px;
+.features {
-    margin-bottom: 20px;
+  @extend %horizontal-list;
+}
 
-    border-color: grey;
+$feature-width: 320px;
-    width: 40%;
+$features-count: 3;
-  }
 
-  #etapes, #request_access{
+.feature {
-    margin-top: 20px;
+  @extend %horizontal-list-item;
-    margin-bottom: 20px;
+  width: $feature-width;
+  margin-right: calc((#{$page-width} - (#{$feature-width} * #{$features-count})) / (#{$features-count} - 1));
+}
+
+.feature-text {
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 20px;
+}
+
+.feature-text-em {
+  font-weight: bold;
+  font-style: normal;
+}
+
+.feature-image {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 24px;
+}
+
+.quotes {
+  @extend %horizontal-list;
+}
+
+$quote-width: 500px;
+$quote-count: 2;
+
+.quote {
+  @extend %horizontal-list-item;
+  width: $quote-width;
+  margin-right: calc((#{$page-width} - (#{$quote-width} * #{$quote-count}))/ (#{$quote-count} - 1));
+  background-color: #FFFFFF;
+  box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
+  padding: 24px;
+}
+
+.quote-quotation-mark {
+  margin-top: 12px;
+}
+
+.quote-content {
+  font-size: 18px;
+  width: 388px;
+  margin-bottom: 24px;
+}
+
+.quote-author {
+  font-size: 14px;
+  margin-left: 64px;
+}
+
+.quote-author-name {
+  font-weight: bold;
+}
+
+.numbers-panel {
+  background-color: $light-grey;
+}
+
+.numbers {
+  @extend %horizontal-list;
+}
+
+$number-width: 320px;
+$number-count: 3;
+
+.number {
+  @extend %horizontal-list-item;
+  width: $number-width;
+  margin-right: calc((#{$page-width} - (#{$number-width} * #{$number-count}))/ (#{$number-count} - 1));
+  text-align: center;
+}
+
+.number-value {
+  color: $blue;
+  font-weight: bold;
+  font-size: 36px;
+}
+
+.number-label {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.users {
+  @extend %horizontal-list;
+}
+
+$image-width: 170px;
+$images-total-width: $image-width * 5;
+$images-count: 5;
+
+.user {
+  @extend %horizontal-list-item;
+  margin-right: calc((#{$page-width} - (#{$images-total-width}))/ (#{$images-count} - 1));
+
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
+.user-image {
+  width: $image-width;
+}
+
+.cta-panel {
+  background-color: $blue;
+  color: #FFFFFF;
+}
+
+.cta-panel-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: 0;
+}
+
+.cta-panel-explanation {
+  font-size: 24px;
+  margin-bottom: 0;
+}
+
+$cta-panel-button-height: 60px;
+$cta-panel-button-border-size: 2px;
+
+.cta-panel-button {
+  @include horizontal-padding(30px);
+
+  display: inline-block;
+  height: $cta-panel-button-height;
+  line-height: $cta-panel-button-height - (2 * $cta-panel-button-border-size);
+  border-radius: $cta-panel-button-height;
+  border: $cta-panel-button-border-size solid #FFFFFF;
+  color: #FFFFFF;
+  font-size: 24px;
+  margin-top: 5px;
+
+  &:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  &:focus {
+    color: #FFFFFF;
+    text-decoration: none;
   }
 }

app/assets/stylesheets/left_panel.scss

@@ -7,7 +7,7 @@
   top: 0;
   left: 0;
   bottom: 0;
-  color: white;
+  color: #FFFFFF;
   overflow-y: scroll;
 
   #first-block {
@@ -15,16 +15,19 @@
     font-size: 16px;
     line-height: 18px;
     margin-top: 20px;
+
     .infos {
       font-size: 25px;
       text-align: center;
       margin: 10px 10px 30px 0;
+
       .projet-name {
         font-size: 25px;
         line-height: normal;
         padding: 5px;
       }
     }
+
     .count {
       display: inline-block;
       padding: 3px;
@@ -33,37 +36,49 @@
       text-align: center;
       line-height: 23px;
     }
+
     .text {
       display: inline-block;
       width: 30px;
       margin: 0 0 0 8px;
     }
-    .dossiers-en-cours, .en-cours {
+
+    .dossiers-en-cours,
+    .en-cours {
       margin-top: 20px;
     }
+
     .dossiers-en-cours {
       .count {
         border: 1px solid #FFFFFF;
       }
     }
+
     .nouveaux-dossiers {
       .count {
         background-color: #5CB85C;
       }
     }
+
     .nouvelles-notifications {
       .count {
         background-color: #E4594F;
       }
     }
-    .dossiers-en-cours, .nouveaux-dossiers, .nouvelles-notifications, .en-cours {
+
+    .dossiers-en-cours,
+    .nouveaux-dossiers,
+    .nouvelles-notifications,
+    .en-cours {
       margin: 5px auto 0 20px;
       width: 150px;
     }
   }
+
   #action-block {
     text-align: center;
     margin: 10px;
+
     .action {
       background-color: #E45B51;
       text-align: center;
@@ -78,7 +93,10 @@
       border: none;
       width: 100%;
     }
-    .close-dossier, .refuse-dossier, .forget-dossier {
+
+    .close-dossier,
+    .refuse-dossier,
+    .forget-dossier {
       border: 1px solid #FFFFFF;
       border-radius: 25px;
       margin: 5px;
@@ -86,20 +104,27 @@
       margin-right: auto;
       width: 60px;
     }
-    .close-dossier:hover, .refuse-dossier:hover, .forget-dossier:hover {
+
+    .close-dossier:hover,
+    .refuse-dossier:hover,
+    .forget-dossier:hover {
       color: #000000;
       border-color: #000000;
     }
+
     .close-dossier {
       background-color: #2A9E2A;
     }
+
     .refuse-dossier {
       background-color: #E4594F;
     }
+
     .forget-dossier {
       background-color: #FF8300;
     }
   }
+
   #menu-block {
     #switch-buttons {
       height: 30px;
@@ -113,19 +138,24 @@
       padding: 0 0 0 10px;
       border-radius: 25px;
       cursor: pointer;
+
       .active {
         background-color: #668ABD !important;
         cursor: default;
       }
+
       .separator {
         height: 26px;
         width: 1px;
         display: inline-block;
         background-color: #FFFFFF;
       }
-      #switch-procedures:hover, #switch-notifications:hover {
+
+      #switch-procedures:hover,
+      #switch-notifications:hover {
         background-color: #668AEA;
       }
+
       #switch-procedures {
         height: 28px;
         margin: 0 0 0 -10px;
@@ -134,6 +164,7 @@
         display: inline-block;
         border-radius: 25px 0 0 25px;
       }
+
       #switch-notifications {
         width: 103px;
         display: inline-block;
@@ -143,45 +174,55 @@
         padding: 0 0 0 5px;
       }
     }
+
     .split-hr {
       border-bottom: 1px solid #FFFFFF;
       width: 200px;
       margin: 20px 0 20px 0;
     }
   }
+
   #infos-block {
     .split-hr {
       border-bottom: 1px solid #FFFFFF;
       width: 200px;
       margin: 20px 0 20px 0;
     }
+
     .dossier-state {
       text-align: center;
       font-size: 25px;
-      width: 200px;
       margin-top: 20px;
       width: 200px;
       margin-left: auto;
       margin-right: auto;
     }
-    #notifications_list {
+
+    #notifications-list {
       .no-notification {
         margin: 0 30px 0 30px;
       }
+
       .notification {
         padding: 10px 2px 10px 15px;
-        .dossier, .updated-at {
+
+        .dossier,
+        .updated-at {
           display: inline-block;
           color: #CCCCCC;
           font-size: 12px;
           text-align: left;
         }
-        .dossier-index, .updated-at-index, .count {
+
+        .dossier-index,
+        .updated-at-index,
+        .count {
           display: inline-block;
           color: #FFFFFF;
           font-size: 14px;
           text-align: left;
         }
+
         .count {
           background-color: #F0AD4E;
           border-radius: 25px;
@@ -189,33 +230,41 @@
           width: 25px;
           text-align: center;
         }
+
         .type-notif {
           font-size: 16px;
         }
       }
     }
+
     .notifications {
       margin: 20px 10px 0 5px;
+
       .fa {
         font-size: 25px;
         width: 100%;
         margin: 0 0 15px 0;
       }
+
       .type-notif {
         font-size: 16px;
         float: right;
         width: 30px;
       }
+
       .notification {
         margin: 10px 0 10px 10px;
+
         .type {
           margin-bottom: 20px;
         }
+
         .updated-at {
           color: #CCCCCC;
           font-size: 12px;
           text-align: left;
         }
+
         .split-hr {
           width: 40px;
           margin: auto;

app/assets/stylesheets/login.scss

@@ -1,28 +1,28 @@
-#form_login{
+#form-login {
   text-align: center;
-  max-width:500px;
+  max-width: 500px;
 
-  margin-left:auto;
+  margin-left: auto;
-  margin-right:auto;
+  margin-right: auto;
 
   padding: 20px;
 
-  .btn_fc {
+  .btn-fc {
 
     img {
       height: 100px;
     }
   }
 
-  #new_user{
+  #new-user {
     width: 80%;
-    margin-left:auto;
+    margin-left: auto;
-    margin-right:auto;
+    margin-right: auto;
   }
 
   hr {
     margin-bottom: 40px;
-    border: 0;
+    border: none;
     height: 1px;
     background-image: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 0.75), rgba(100, 100, 100, 0));
   }

app/assets/stylesheets/navbar.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import "constants";
 
 #header {
   top: 0;
@@ -8,25 +8,30 @@
   z-index: 10;
   border-radius: 0;
   height: 60px;
-  #title_navbar{
+
-    color: white;
+  #title-navbar {
+    color: #FFFFFF;
     font-weight: bold;
     font-size: 1.8em;
     z-index: 10;
     overflow: hidden;
   }
-  #title_navbar:hover{
+
+  #title-navbar:hover {
     text-decoration: none;
   }
+
   #home {
     text-align: center;
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
     background-color: #003189;
     height: 60px;
+
     .logo {
       margin-top: 10px;
       height: 40px;
     }
+
     #tps-title {
       font-family: Arial;
       font-size: 24px;
@@ -35,11 +40,13 @@
       margin-top: 17px;
     }
   }
+
   #navbar-body {
     min-height: 60px;
     background-color: #FFFFFF;
-    box-shadow: 0 1px 2px 0 rgba(50,50,50,0.5);
+    box-shadow: 0 1px 2px 0 rgba(50, 50, 50, 0.5);
     padding-left: 50px;
+
     .main-info {
       font-family: Arial;
       font-size: 18px;
@@ -51,6 +58,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
     .options {
       font-family: Arial;
       font-size: 14px;
@@ -60,18 +68,22 @@
       padding: 8px;
       border-right: 1px solid #C8C6C8;
       min-height: 60px;
+
       .dropdown-toggle {
         cursor: pointer;
       }
+
       .dropdown-pannel {
         min-height: 100px;
         width: 400px;
         padding-left: 10px;
       }
+
       .centered-option {
         line-height: 40px;
         height: 40px;
       }
+
       .caret-right {
         border-bottom: 4px solid transparent;
         border-top: 4px solid transparent;
@@ -84,15 +96,16 @@
       }
     }
 
-    #sign_in{
+    #sign-in {
       margin-top: 7px;
+
       .btn {
         float: right;
         margin-right: 15px;
       }
     }
 
-    #sign_out{
+    #sign-out {
       height: 60px;
 
       .fa {
@@ -103,6 +116,7 @@
         margin-right: 0.5em;
         font-size: 40px;
       }
+
       .fa:hover {
         color: #668ABD;
       }
@@ -118,37 +132,33 @@
 }
 
 .btn-nav {
-  color: white;
+  color: #FFFFFF;
   background-color: transparent;
   margin-top: 6px;
   height: 36px;
 }
 
 .btn-nav:hover {
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
-  border-color: #eeeeee #eeeeee #ddd;
+  border-color: #EEEEEE #EEEEEE #DDDDDD;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .btn-nav.text-info:hover {
-  color: #23527c;
+  color: #23527C;
 }
 
 .btn-nav.text-success:hover {
-  color: #3c763d;
+  color: #3C763D;
 }
 
 .btn-nav.text-danger:hover {
-  color: #a94442;
+  color: #A94442;
 }
 
 .navbar {
   border: 0 !important;
-  .sign_in_FC {
-    margin-top: -18px;
-    height: 70px;
-  }
 }
 
 #beta {
@@ -159,15 +169,15 @@
   right: -35px;
   transform: rotate(-45deg);
   width: 150px;
-  background-color: #008cba;
+  background-color: #008CBA;
-  color: #fff;
+  color: #FFFFFF;
   padding: 5px;
   font-size: 15px;
   font-weight: 700;
   z-index: 10;
 }
 
-.button_navbar {
+.button-navbar {
   color: #666666;
   cursor: pointer;
 }
@@ -181,16 +191,19 @@
   text-align: center;
   padding: 2px;
   float: right;
+
   .fa {
     font-size: 20px;
     margin-right: 10px;
   }
 }
+
 .button-navbar-action:hover {
   color: $light-blue;
 }
 
-.button_navbar:hover, .button-navbar-action:hover {
+.button-navbar:hover,
+.button-navbar-action:hover {
   text-decoration: none;
 }
 
@@ -200,6 +213,7 @@
   padding: 10px;
   left: -130px;
   text-align: center;
+
   .description {
     font-weight: bold;
     font-size: 20px;

app/assets/stylesheets/new_footer.scss

@@ -0,0 +1,69 @@
+@import "constants";
+@import "mixins";
+@import "placeholders";
+@import "typography";
+
+.footer {
+  @extend %new-type;
+  @include vertical-padding(72px);
+  background-color: $light-grey;
+}
+
+.footer-inner-content {
+  width: $page-width;
+  margin: 0 auto;
+}
+
+.footer-columns {
+  @extend %horizontal-list;
+}
+
+$footer-column-width: 320px;
+$footer-column-count: 3;
+
+.footer-column {
+  @extend %horizontal-list-item;
+  width: $footer-column-width;
+  margin-right: calc((#{$page-width} - (#{$footer-column-width} * #{$footer-column-count})) / (#{$footer-column-count} - 1));
+  font-size: 14px;
+  vertical-align: top;
+}
+
+.footer-logos,
+.footer-links {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-link {
+  margin-bottom: 14px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.footer-logo:hover {
+  opacity: 0.8;
+}
+
+.footer-logo-rf {
+  width: 75px;
+  margin-bottom: 14px;
+}
+
+.footer-logo-beta-gouv-fr {
+  width: 190px;
+}
+
+.footer-link a {
+  color: $black;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: $blue;
+    text-decoration: none;
+  }
+}

app/assets/stylesheets/notification_alert.scss

@@ -1,4 +1,4 @@
-#notification_alert {
+#notification-alert {
   position: fixed;
   top: 20px;
   right: -250px;
@@ -8,5 +8,5 @@
   width: 250px;
   height: 80px;
 
-  border: solid black 1px;
+  border: solid #000000 1px;
 }

app/assets/stylesheets/pieces_justificatives_fields.scss

@@ -1,3 +1,5 @@
-.pieces_justificatives_fields {
+.pieces-justificatives-fields {
-  .form-inline > .form-group { vertical-align: top; }
+  .form-inline > .form-group {
+    vertical-align: top;
+  }
 }

app/assets/stylesheets/pj_modal.scss

@@ -1,7 +1,7 @@
-#PJmodal {
+#pj-modal {
   .modal-body {
     .table {
-      .tr_content {
+      .tr-content {
         display: none;
       }
     }

app/assets/stylesheets/pref_list_menu.scss

@@ -1,4 +1,4 @@
-#pref_list_menu{
+#pref-list-menu {
   z-index: 100;
   display: none;
   position: fixed;
@@ -6,15 +6,10 @@
   top: 10px;
   right: -470px;
   background-color: rgba(255, 255, 255, 0.95);
-  border-left: solid 1px lightgrey;
+  border-left: solid 1px #D3D3D3;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
   width: 470px;
   height: calc(100% - 25px);
   padding: 15px;
   overflow-y: scroll;
 }
-
-.open_pref_list {
-  right: 0 !important;
-  display: block !important;
-}

app/assets/stylesheets/print.scss

@@ -1,30 +1,18 @@
 @media print {
-  html, body {
+  html,
+  body {
     margin: 0;
   }
 
-  #main_div{
+  #infos-dossiers .row:last-child {
-    margin-left: 50px;
-    margin-right: 0;
-  }
-
-  #commentaire_new {
     display: none;
   }
 
-  #commentaires_flux {
+  #infos-dossiers {
-    margin-top: -50px;
-  }
-
-  #infos_dossier .row:last-child {
-    display: none;
-  }
-
-  #infos_dossier {
     margin-bottom: -70px;
   }
 
-  #backoffice_dossier_show .nav-tabs {
+  #backoffice-dossier-show .nav-tabs {
     display: none;
   }
 

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;
 }
 

app/assets/stylesheets/recapitulatif.scss

@@ -1,4 +1,4 @@
-#UploadPJmodal {
+#upload-pj-modal {
   text-align: left;
 
   table {

app/assets/stylesheets/search.scss

@@ -1,13 +1,13 @@
-#search-block{
+#search-block {
   margin: 15px 10px 0 10px;
   height: 30px;
 }
 
-#search_button {
+#search-button {
   height: 34px;
 }
 
-#mask_search{
+#mask-search {
   display: none;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.4);

app/assets/stylesheets/siret.scss

@@ -6,7 +6,7 @@
   display: none;
 }
 
-#titre_procedure {
+#titre-procedure {
   margin-top: 3%;
   margin-bottom: 2%;
 }

app/assets/stylesheets/stats.scss

@@ -8,6 +8,7 @@ $blue-hover: rgba(61, 149, 236, 0.8);
 $default-space: 15px;
 
 $new-h1-margin-bottom: 4 * $default-space;
+
 .new-h1 {
   color: $dark-grey;
   text-align: center;
@@ -16,6 +17,7 @@ $new-h1-margin-bottom: 4 * $default-space;
 }
 
 $statistiques-padding-top: $default-space * 2;
+
 .statistiques {
   width: 1040px;
   margin: 0 auto;
@@ -29,8 +31,8 @@ $statistiques-padding-top: $default-space * 2;
 }
 
 $stat-card-margin-bottom: 3 * $default-space;
+
 .stat-card {
-  @extend .card;
   margin-bottom: $stat-card-margin-bottom;
   border-radius: 5px;
   box-shadow: none;
@@ -38,6 +40,7 @@ $stat-card-margin-bottom: 3 * $default-space;
 }
 
 $stat-card-half-horizontal-spacing: 4 * $default-space;
+
 .stat-card-half {
   width: calc((100% - #{$stat-card-half-horizontal-spacing}) / 2);
   margin-right: 3 * $default-space;
@@ -51,6 +54,7 @@ $stat-card-half-horizontal-spacing: 4 * $default-space;
 }
 
 $segmented-control-margin-top: $default-space;
+
 .segmented-control {
   border-radius: 36px;
   height: 36px;
@@ -63,8 +67,8 @@ $segmented-control-margin-top: $default-space;
 
 $segmented-control-item-horizontal-padding: $default-space;
 $segmented-control-item-border-radius: 2 * $default-space;
+
 .segmented-control-item {
-  color: $blue;
   display: inline-block;
   font-size: 15px;
   border: 2px solid $blue;
@@ -84,14 +88,14 @@ $segmented-control-item-border-radius: 2 * $default-space;
 
   &:hover {
     background-color: $blue-hover;
-    color: white;
+    color: #FFFFFF;
     cursor: pointer;
   }
 }
 
 .segmented-control-item-active {
   background-color: $blue;
-  color: white;
+  color: #FFFFFF;
 }
 
 .chart-container {
@@ -103,6 +107,7 @@ $segmented-control-item-border-radius: 2 * $default-space;
 }
 
 $big-number-card-padding: 2 * $segmented-control-item-border-radius;
+
 .big-number-card {
   padding: $big-number-card-padding;
 }

app/assets/stylesheets/support_navigator_banner.scss

@@ -1,15 +1,16 @@
-#support_navigator_banner{
+#support-navigator-banner {
   position: fixed;
-  text-align:center;
+  text-align: center;
   line-height: 2em;
-  color: white;
+  color: #FFFFFF;
   background-color: #990000;
   width: 100%;
   margin: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
-  a{
+
-    color: #c3d9ff;
+  a {
+    color: #C3D9FF;
   }
 }

app/assets/stylesheets/switch_menu.scss

@@ -1,4 +1,4 @@
-#switch_menu{
+#switch-menu {
   position: fixed;
   left: 10px;
   bottom: 10px;

app/assets/stylesheets/typeahead.scss

@@ -1,18 +1,13 @@
 .twitter-typeahead {
-    width: 100%; // http://stackoverflow.com/questions/17957513/extending-the-width-of-bootstrap-typeahead-to-match-input-field
+  width: 100%; // http://stackoverflow.com/questions/17957513/extending-the-width-of-bootstrap-typeahead-to-match-input-field
 }
 
 .tt-menu {
   padding: 8px 0;
-  background-color: #fff;
+  background-color: #FFFFFF;
-  border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
   border-radius: 8px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 }
 
 .tt-suggestion {
@@ -23,12 +18,12 @@
 
 .tt-suggestion:hover {
   cursor: pointer;
-  color: #fff;
+  color: #FFFFFF;
-  background-color: #0097cf;
+  background-color: #0097CF;
 }
 
 .tt-suggestion.tt-cursor {
-  color: #fff;
+  color: #FFFFFF;
-  background-color: #0097cf;
+  background-color: #0097CF;
 
 }

app/assets/stylesheets/ul.scss

@@ -1,14 +0,0 @@
-.dynamic_ul {
-  margin-left: 20px;
-  margin-top: 13%;
-
-  li {
-    font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
-    margin-top: 15px;
-    margin-bottom: 15px;
-  }
-
-  li:last-child {
-    border: none;
-  }
-}

app/assets/stylesheets/users.scss

@@ -1,43 +1,48 @@
-@import "variables";
+@import "constants";
 
-#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;
+
     .show-block {
       width: 100%;
     }
+
     .body {
       height: auto;
     }
   }
 }
 
-#users_siret_index {
+#users-siret-index {
   margin: 20px;
 }
 
-#description_page {
+#carto-page {
-}
-
-#carto_page {
   margin: 20px;
 }
 
 .white-back {
   margin: 20px !important;
+
   #previsualisation {
     margin-top: 30px;
   }
 }
 
-.white-back, #users_siret_index, #description_page, #carto_page {
+.white-back,
+#users-siret-index,
+#description-page,
+#carto-page {
   background-color: #FFFFFF;
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
   padding: 20px;
+
   .action {
     background-color: #E45B51;
     text-align: center;
@@ -49,12 +54,15 @@
     border: none;
     padding: 10px;
   }
+
   .action:hover {
     color: $light-blue;
   }
+
   .padding-left-30 {
     padding-left: 30px;
   }
+
   h3 {
     margin-bottom: 20px;
   }

app/controllers/root_controller.rb

@@ -39,6 +39,6 @@ class RootController < ApplicationController
 
     @demo_environment_host = "https://tps-dev.apientreprise.fr" unless Rails.env.development?
 
-    render 'landing'
+    render 'landing', :layout => 'new_application'
   end
 end

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

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

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

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

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 } ) %>");

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

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'

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

app/views/admin/procedures/index.html.haml

@@ -1,5 +1,5 @@
-#admins_index
+#admins-index
-  .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

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

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

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'

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 } ) %>");
+$('#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 ();

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

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

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')

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();
 });

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 %>

app/views/backoffice/dossiers/index.html.haml

@@ -1,8 +1,8 @@
-#backoffice_index
+#backoffice-index
-  #pref_list_menu
+  #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

app/views/backoffice/dossiers/search.html.haml

@@ -1,8 +1,8 @@
-#backoffice_search
+#backoffice-search
-  #pref_list_menu
+  #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

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"

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
+.default-data-block.default_visible
-  .row.show-block.infos#infos_dossier
+  .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