Refonte design system — Phase A : Bulma auto-hébergé compilé via Sass

Met en place les fondations du template Bulma décrit dans
regles/FORGE_ENGINE_TEMPLATE_BULMA.md : palette orange/ambre Forge
(--accent:#ff5f2e/--accent-2:#ffb020), typographie, rayons — appliqués
en recompilant Bulma lui-même plutôt qu'en le surchargeant après coup en
CSS, pour recolorer automatiquement ses composants internes (tags,
notifications, dropdowns...) sans avoir à les surcharger un par un.

- Bulma 0.9.4 vendoré en local (styles/bulma/, source Sass classique
  $variable + @import) — PAS 1.0.2 (la version jusqu'ici en CDN) : 1.0.2
  utilise le nouveau système de modules @use/@forward, que libsass (choisi
  pour rester 100% Python, sans Node/npm) ne sait pas compiler (testé :
  il ignore silencieusement le @use au lieu de le traiter). 0.9.4 est la
  dernière version compatible avec libsass et couvre à l'identique tous
  les composants utilisés ici (boutons, tableaux, onglets, modales,
  formulaires, navbar).
- requirements.txt : +libsass (pip pur, aucun binaire/Node.js).
- styles/forge-theme.scss (nouveau, point d'entrée) : variables Sass
  Bulma ($primary, $radius...) posées avant l'import, tokens Forge exposés
  en :root (--forge-bg, --accent, --gradient, --status-*...) avec des
  alias vers les noms de variables déjà utilisés par tout le CSS custom
  existant (--bg/--panel/--border/--text/--danger...) — pas besoin de
  renommer les ~600 lignes de règles déjà écrites, seules leurs VALEURS
  changent.
- styles/forge-custom.scss : ancien static/style.css, structurellement
  inchangé — seuls les hex/rgba en dur qui échappaient aux variables
  (ancien accent bleu #5b8cff, danger #e2685f, couleurs de types de
  nœuds du graphe de logique, fond du QR code recovery...) sont
  remplacés par les tokens de la charte.
- build_css.py (nouveau) : compile styles/forge-theme.scss en
  static/style.css via libsass — un seul fichier, un seul <link>
  inchangé dans les templates, à relancer manuellement après toute
  modification sous styles/.
- base.html/play.html : suppression du <link> CDN Bulma (auto-hébergé
  désormais), ajout d'un favicon (absent jusqu'ici) et du vrai logo Forge
  dans la navbar (assets/*.svg copiés dans static/branding/, seul dossier
  réellement servi par Flask).

197 tests toujours verts (aucune assertion sur des valeurs CSS).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.gitignore

@@ -9,6 +9,7 @@ __pycache__/
 venv/
 env/
 Bug/
+regles/
 
 # Variables d'environnement / secrets locaux
 .env

assets/forge-favicon.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Forge favicon">
+  <rect width="120" height="120" rx="24" fill="#161b25"/>
+  <polygon points="60,15 30,75 60,105" fill="#ff5f2e"/>
+  <polygon points="60,15 90,75 60,105" fill="#ffb020"/>
+  <polyline points="46,43 60,35 74,43" fill="none" stroke="#161b25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="38,59 60,51 82,59" fill="none" stroke="#161b25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="30,75 60,67 90,75" fill="none" stroke="#161b25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/forge-logo-onwhite.svg

@@ -0,0 +1,8 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Forge (sur fond blanc)">
+  <rect x="1" y="1" width="118" height="118" rx="16" fill="#ffffff" stroke="#e2e5eb" stroke-width="1"/>
+  <polygon points="60,15 30,75 60,105" fill="#ff5f2e"/>
+  <polygon points="60,15 90,75 60,105" fill="#ffb020"/>
+  <polyline points="46,43 60,35 74,43" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="38,59 60,51 82,59" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="30,75 60,67 90,75" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/forge-logo.svg

@@ -0,0 +1,12 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Forge">
+  <!-- Carte de fond — le mark n'est jamais utilisé sans sa carte -->
+  <rect width="120" height="120" rx="16" fill="#161b25"/>
+  <!-- Facette gauche — orange, accent 1 -->
+  <polygon points="60,15 30,75 60,105" fill="#ff5f2e"/>
+  <!-- Facette droite — ambre, accent 2 -->
+  <polygon points="60,15 90,75 60,105" fill="#ffb020"/>
+  <!-- Trois chevrons — entailles de la couleur de la carte -->
+  <polyline points="46,43 60,35 74,43" fill="none" stroke="#161b25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="38,59 60,51 82,59" fill="none" stroke="#161b25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="30,75 60,67 90,75" fill="none" stroke="#161b25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

build_css.py

@@ -0,0 +1,27 @@
+"""Compile styles/forge-theme.scss (tokens Forge + Bulma vendoré en local,
+voir regles/FORGE_ENGINE_TEMPLATE_BULMA.md) en static/style.css — le seul
+fichier CSS chargé par les templates (un seul <link>, inchangé). Pas de
+build automatique : lancer `python build_css.py` après toute modification
+sous styles/."""
+import os
+
+import sass
+
+_BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+_ENTRY = os.path.join(_BASE_DIR, "styles", "forge-theme.scss")
+_OUTPUT = os.path.join(_BASE_DIR, "static", "style.css")
+
+
+def build():
+    css = sass.compile(
+        filename=_ENTRY,
+        include_paths=[os.path.join(_BASE_DIR, "styles")],
+        output_style="expanded",
+    )
+    with open(_OUTPUT, "w", encoding="utf-8") as f:
+        f.write(css)
+    print(f"Compilé : {_ENTRY} -> {_OUTPUT} ({len(css)} octets)")
+
+
+if __name__ == "__main__":
+    build()

requirements.txt

@@ -1,3 +1,4 @@
 Flask==3.0.3
 pyotp==2.10.0
 qrcode==8.2
+libsass==0.23.0

static/branding/forge-favicon.svg

@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Forge favicon">
+  <rect width="120" height="120" rx="24" fill="#161b25"/>
+  <polygon points="60,15 30,75 60,105" fill="#ff5f2e"/>
+  <polygon points="60,15 90,75 60,105" fill="#ffb020"/>
+  <polyline points="46,43 60,35 74,43" fill="none" stroke="#161b25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="38,59 60,51 82,59" fill="none" stroke="#161b25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="30,75 60,67 90,75" fill="none" stroke="#161b25" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/branding/forge-logo-onwhite.svg

@@ -0,0 +1,8 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Forge (sur fond blanc)">
+  <rect x="1" y="1" width="118" height="118" rx="16" fill="#ffffff" stroke="#e2e5eb" stroke-width="1"/>
+  <polygon points="60,15 30,75 60,105" fill="#ff5f2e"/>
+  <polygon points="60,15 90,75 60,105" fill="#ffb020"/>
+  <polyline points="46,43 60,35 74,43" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="38,59 60,51 82,59" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="30,75 60,67 90,75" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/branding/forge-logo.svg

@@ -0,0 +1,12 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Forge">
+  <!-- Carte de fond — le mark n'est jamais utilisé sans sa carte -->
+  <rect width="120" height="120" rx="16" fill="#161b25"/>
+  <!-- Facette gauche — orange, accent 1 -->
+  <polygon points="60,15 30,75 60,105" fill="#ff5f2e"/>
+  <!-- Facette droite — ambre, accent 2 -->
+  <polygon points="60,15 90,75 60,105" fill="#ffb020"/>
+  <!-- Trois chevrons — entailles de la couleur de la carte -->
+  <polyline points="46,43 60,35 74,43" fill="none" stroke="#161b25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="38,59 60,51 82,59" fill="none" stroke="#161b25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <polyline points="30,75 60,67 90,75" fill="none" stroke="#161b25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

styles/bulma/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Jeremy Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

styles/bulma/bulma.sass

@@ -0,0 +1,10 @@
+@charset "utf-8"
+/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
+@import "sass/utilities/_all"
+@import "sass/base/_all"
+@import "sass/elements/_all"
+@import "sass/form/_all"
+@import "sass/components/_all"
+@import "sass/grid/_all"
+@import "sass/helpers/_all"
+@import "sass/layout/_all"

styles/bulma/sass/base/_all.sass

@@ -0,0 +1,6 @@
+/* Bulma Base */
+@charset "utf-8"
+
+@import "minireset"
+@import "generic"
+@import "animations"

styles/bulma/sass/base/animations.sass

@@ -0,0 +1,5 @@
+@keyframes spinAround
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(359deg)

styles/bulma/sass/base/generic.sass

@@ -0,0 +1,145 @@
+@import "../utilities/mixins"
+
+$body-background-color: $scheme-main !default
+$body-size: 16px !default
+$body-min-width: 300px !default
+$body-rendering: optimizeLegibility !default
+$body-family: $family-primary !default
+$body-overflow-x: hidden !default
+$body-overflow-y: scroll !default
+
+$body-color: $text !default
+$body-font-size: 1em !default
+$body-weight: $weight-normal !default
+$body-line-height: 1.5 !default
+
+$code-family: $family-code !default
+$code-padding: 0.25em 0.5em 0.25em !default
+$code-weight: normal !default
+$code-size: 0.875em !default
+
+$small-font-size: 0.875em !default
+
+$hr-background-color: $background !default
+$hr-height: 2px !default
+$hr-margin: 1.5rem 0 !default
+
+$strong-color: $text-strong !default
+$strong-weight: $weight-bold !default
+
+$pre-font-size: 0.875em !default
+$pre-padding: 1.25rem 1.5rem !default
+$pre-code-font-size: 1em !default
+
+html
+  background-color: $body-background-color
+  font-size: $body-size
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  min-width: $body-min-width
+  overflow-x: $body-overflow-x
+  overflow-y: $body-overflow-y
+  text-rendering: $body-rendering
+  text-size-adjust: 100%
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section
+  display: block
+
+body,
+button,
+input,
+optgroup,
+select,
+textarea
+  font-family: $body-family
+
+code,
+pre
+  -moz-osx-font-smoothing: auto
+  -webkit-font-smoothing: auto
+  font-family: $code-family
+
+body
+  color: $body-color
+  font-size: $body-font-size
+  font-weight: $body-weight
+  line-height: $body-line-height
+
+// Inline
+
+a
+  color: $link
+  cursor: pointer
+  text-decoration: none
+  strong
+    color: currentColor
+  &:hover
+    color: $link-hover
+
+code
+  background-color: $code-background
+  color: $code
+  font-size: $code-size
+  font-weight: $code-weight
+  padding: $code-padding
+
+hr
+  background-color: $hr-background-color
+  border: none
+  display: block
+  height: $hr-height
+  margin: $hr-margin
+
+img
+  height: auto
+  max-width: 100%
+
+input[type="checkbox"],
+input[type="radio"]
+  vertical-align: baseline
+
+small
+  font-size: $small-font-size
+
+span
+  font-style: inherit
+  font-weight: inherit
+
+strong
+  color: $strong-color
+  font-weight: $strong-weight
+
+// Block
+
+fieldset
+  border: none
+
+pre
+  +overflow-touch
+  background-color: $pre-background
+  color: $pre
+  font-size: $pre-font-size
+  overflow-x: auto
+  padding: $pre-padding
+  white-space: pre
+  word-wrap: normal
+  code
+    background-color: transparent
+    color: currentColor
+    font-size: $pre-code-font-size
+    padding: 0
+
+table
+  td,
+  th
+    vertical-align: top
+    &:not([align])
+      text-align: inherit
+  th
+    color: $text-strong

styles/bulma/sass/base/helpers.sass

@@ -0,0 +1 @@
+@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."

styles/bulma/sass/base/minireset.sass

@@ -0,0 +1,79 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  margin: 0
+  padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  font-size: 100%
+  font-weight: normal
+
+// List
+ul
+  list-style: none
+
+// Form
+button,
+input,
+select,
+textarea
+  margin: 0
+
+// Box sizing
+html
+  box-sizing: border-box
+
+*
+  &,
+  &::before,
+  &::after
+    box-sizing: inherit
+
+// Media
+img,
+video
+  height: auto
+  max-width: 100%
+
+// Iframe
+iframe
+  border: 0
+
+// Table
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+td,
+th
+  padding: 0
+  &:not([align])
+    text-align: inherit

styles/bulma/sass/components/_all.sass

@@ -0,0 +1,15 @@
+/* Bulma Components */
+@charset "utf-8"
+
+@import "breadcrumb"
+@import "card"
+@import "dropdown"
+@import "level"
+@import "media"
+@import "menu"
+@import "message"
+@import "modal"
+@import "navbar"
+@import "pagination"
+@import "panel"
+@import "tabs"

styles/bulma/sass/components/breadcrumb.sass

@@ -0,0 +1,77 @@
+@import "../utilities/mixins"
+
+$breadcrumb-item-color: $link !default
+$breadcrumb-item-hover-color: $link-hover !default
+$breadcrumb-item-active-color: $text-strong !default
+
+$breadcrumb-item-padding-vertical: 0 !default
+$breadcrumb-item-padding-horizontal: 0.75em !default
+
+$breadcrumb-item-separator-color: $border-hover !default
+
+.breadcrumb
+  @extend %block
+  @extend %unselectable
+  font-size: $size-normal
+  white-space: nowrap
+  a
+    align-items: center
+    color: $breadcrumb-item-color
+    display: flex
+    justify-content: center
+    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
+    &:hover
+      color: $breadcrumb-item-hover-color
+  li
+    align-items: center
+    display: flex
+    &:first-child a
+      +ltr-property("padding", 0, false)
+    &.is-active
+      a
+        color: $breadcrumb-item-active-color
+        cursor: default
+        pointer-events: none
+    & + li::before
+      color: $breadcrumb-item-separator-color
+      content: "\0002f"
+  ul,
+  ol
+    align-items: flex-start
+    display: flex
+    flex-wrap: wrap
+    justify-content: flex-start
+  .icon
+    &:first-child
+      +ltr-property("margin", 0.5em)
+    &:last-child
+      +ltr-property("margin", 0.5em, false)
+  // Alignment
+  &.is-centered
+    ol,
+    ul
+      justify-content: center
+  &.is-right
+    ol,
+    ul
+      justify-content: flex-end
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  // Styles
+  &.has-arrow-separator
+    li + li::before
+      content: "\02192"
+  &.has-bullet-separator
+    li + li::before
+      content: "\02022"
+  &.has-dot-separator
+    li + li::before
+      content: "\000b7"
+  &.has-succeeds-separator
+    li + li::before
+      content: "\0227B"

styles/bulma/sass/components/card.sass

@@ -0,0 +1,103 @@
+@import "../utilities/mixins"
+
+$card-color: $text !default
+$card-background-color: $scheme-main !default
+$card-shadow: $shadow !default
+$card-radius: 0.25rem !default
+
+$card-header-background-color: transparent !default
+$card-header-color: $text-strong !default
+$card-header-padding: 0.75rem 1rem !default
+$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
+$card-header-weight: $weight-bold !default
+
+$card-content-background-color: transparent !default
+$card-content-padding: 1.5rem !default
+
+$card-footer-background-color: transparent !default
+$card-footer-border-top: 1px solid $border-light !default
+$card-footer-padding: 0.75rem !default
+
+$card-media-margin: $block-spacing !default
+
+.card
+  background-color: $card-background-color
+  border-radius: $card-radius
+  box-shadow: $card-shadow
+  color: $card-color
+  max-width: 100%
+  position: relative
+
+%card-item
+  &:first-child
+    border-top-left-radius: $card-radius
+    border-top-right-radius: $card-radius
+  &:last-child
+    border-bottom-left-radius: $card-radius
+    border-bottom-right-radius: $card-radius
+
+.card-header
+  @extend %card-item
+  background-color: $card-header-background-color
+  align-items: stretch
+  box-shadow: $card-header-shadow
+  display: flex
+
+.card-header-title
+  align-items: center
+  color: $card-header-color
+  display: flex
+  flex-grow: 1
+  font-weight: $card-header-weight
+  padding: $card-header-padding
+  &.is-centered
+    justify-content: center
+
+.card-header-icon
+  +reset
+  align-items: center
+  cursor: pointer
+  display: flex
+  justify-content: center
+  padding: $card-header-padding
+
+.card-image
+  display: block
+  position: relative
+  &:first-child
+    img
+      border-top-left-radius: $card-radius
+      border-top-right-radius: $card-radius
+  &:last-child
+    img
+      border-bottom-left-radius: $card-radius
+      border-bottom-right-radius: $card-radius
+
+.card-content
+  @extend %card-item
+  background-color: $card-content-background-color
+  padding: $card-content-padding
+
+.card-footer
+  @extend %card-item
+  background-color: $card-footer-background-color
+  border-top: $card-footer-border-top
+  align-items: stretch
+  display: flex
+
+.card-footer-item
+  align-items: center
+  display: flex
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 0
+  justify-content: center
+  padding: $card-footer-padding
+  &:not(:last-child)
+    +ltr-property("border", $card-footer-border-top)
+
+// Combinations
+
+.card
+  .media:not(:last-child)
+    margin-bottom: $card-media-margin

styles/bulma/sass/components/dropdown.sass

@@ -0,0 +1,83 @@
+@import "../utilities/mixins"
+
+$dropdown-menu-min-width: 12rem !default
+
+$dropdown-content-background-color: $scheme-main !default
+$dropdown-content-arrow: $link !default
+$dropdown-content-offset: 4px !default
+$dropdown-content-padding-bottom: 0.5rem !default
+$dropdown-content-padding-top: 0.5rem !default
+$dropdown-content-radius: $radius !default
+$dropdown-content-shadow: $shadow !default
+$dropdown-content-z: 20 !default
+
+$dropdown-item-color: $text !default
+$dropdown-item-hover-color: $scheme-invert !default
+$dropdown-item-hover-background-color: $background !default
+$dropdown-item-active-color: $link-invert !default
+$dropdown-item-active-background-color: $link !default
+
+$dropdown-divider-background-color: $border-light !default
+
+.dropdown
+  display: inline-flex
+  position: relative
+  vertical-align: top
+  &.is-active,
+  &.is-hoverable:hover
+    .dropdown-menu
+      display: block
+  &.is-right
+    .dropdown-menu
+      left: auto
+      right: 0
+  &.is-up
+    .dropdown-menu
+      bottom: 100%
+      padding-bottom: $dropdown-content-offset
+      padding-top: initial
+      top: auto
+
+.dropdown-menu
+  display: none
+  +ltr-position(0, false)
+  min-width: $dropdown-menu-min-width
+  padding-top: $dropdown-content-offset
+  position: absolute
+  top: 100%
+  z-index: $dropdown-content-z
+
+.dropdown-content
+  background-color: $dropdown-content-background-color
+  border-radius: $dropdown-content-radius
+  box-shadow: $dropdown-content-shadow
+  padding-bottom: $dropdown-content-padding-bottom
+  padding-top: $dropdown-content-padding-top
+
+.dropdown-item
+  color: $dropdown-item-color
+  display: block
+  font-size: 0.875rem
+  line-height: 1.5
+  padding: 0.375rem 1rem
+  position: relative
+
+a.dropdown-item,
+button.dropdown-item
+  +ltr-property("padding", 3rem)
+  text-align: inherit
+  white-space: nowrap
+  width: 100%
+  &:hover
+    background-color: $dropdown-item-hover-background-color
+    color: $dropdown-item-hover-color
+  &.is-active
+    background-color: $dropdown-item-active-background-color
+    color: $dropdown-item-active-color
+
+.dropdown-divider
+  background-color: $dropdown-divider-background-color
+  border: none
+  display: block
+  height: 1px
+  margin: 0.5rem 0

styles/bulma/sass/components/level.sass

@@ -0,0 +1,79 @@
+@import "../utilities/mixins"
+
+$level-item-spacing: ($block-spacing * 0.5) !default
+
+.level
+  @extend %block
+  align-items: center
+  justify-content: space-between
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Modifiers
+  &.is-mobile
+    display: flex
+    .level-left,
+    .level-right
+      display: flex
+    .level-left + .level-right
+      margin-top: 0
+    .level-item
+      &:not(:last-child)
+        margin-bottom: 0
+        +ltr-property("margin", $level-item-spacing)
+      &:not(.is-narrow)
+        flex-grow: 1
+  // Responsiveness
+  +tablet
+    display: flex
+    & > .level-item
+      &:not(.is-narrow)
+        flex-grow: 1
+
+.level-item
+  align-items: center
+  display: flex
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+  justify-content: center
+  .title,
+  .subtitle
+    margin-bottom: 0
+  // Responsiveness
+  +mobile
+    &:not(:last-child)
+      margin-bottom: $level-item-spacing
+
+.level-left,
+.level-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+  .level-item
+    // Modifiers
+    &.is-flexible
+      flex-grow: 1
+    // Responsiveness
+    +tablet
+      &:not(:last-child)
+        +ltr-property("margin", $level-item-spacing)
+
+.level-left
+  align-items: center
+  justify-content: flex-start
+  // Responsiveness
+  +mobile
+    & + .level-right
+      margin-top: 1.5rem
+  +tablet
+    display: flex
+
+.level-right
+  align-items: center
+  justify-content: flex-end
+  // Responsiveness
+  +tablet
+    display: flex

styles/bulma/sass/components/media.sass

@@ -0,0 +1,59 @@
+@import "../utilities/mixins"
+
+$media-border-color: bulmaRgba($border, 0.5) !default
+$media-border-size: 1px !default
+$media-spacing: 1rem !default
+$media-spacing-large: 1.5rem !default
+$media-content-spacing: 0.75rem !default
+$media-level-1-spacing: 0.75rem !default
+$media-level-1-content-spacing: 0.5rem !default
+$media-level-2-spacing: 0.5rem !default
+
+.media
+  align-items: flex-start
+  display: flex
+  text-align: inherit
+  .content:not(:last-child)
+    margin-bottom: $media-content-spacing
+  .media
+    border-top: $media-border-size solid $media-border-color
+    display: flex
+    padding-top: $media-level-1-spacing
+    .content:not(:last-child),
+    .control:not(:last-child)
+      margin-bottom: $media-level-1-content-spacing
+    .media
+      padding-top: $media-level-2-spacing
+      & + .media
+        margin-top: $media-level-2-spacing
+  & + .media
+    border-top: $media-border-size solid $media-border-color
+    margin-top: $media-spacing
+    padding-top: $media-spacing
+  // Sizes
+  &.is-large
+    & + .media
+      margin-top: $media-spacing-large
+      padding-top: $media-spacing-large
+
+.media-left,
+.media-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+
+.media-left
+  +ltr-property("margin", $media-spacing)
+
+.media-right
+  +ltr-property("margin", $media-spacing, false)
+
+.media-content
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  text-align: inherit
+
++mobile
+  .media-content
+    overflow-x: auto

styles/bulma/sass/components/menu.sass

@@ -0,0 +1,59 @@
+@import "../utilities/mixins"
+
+$menu-item-color: $text !default
+$menu-item-radius: $radius-small !default
+$menu-item-hover-color: $text-strong !default
+$menu-item-hover-background-color: $background !default
+$menu-item-active-color: $link-invert !default
+$menu-item-active-background-color: $link !default
+
+$menu-list-border-left: 1px solid $border !default
+$menu-list-line-height: 1.25 !default
+$menu-list-link-padding: 0.5em 0.75em !default
+$menu-nested-list-margin: 0.75em !default
+$menu-nested-list-padding-left: 0.75em !default
+
+$menu-label-color: $text-light !default
+$menu-label-font-size: 0.75em !default
+$menu-label-letter-spacing: 0.1em !default
+$menu-label-spacing: 1em !default
+
+.menu
+  font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+
+.menu-list
+  line-height: $menu-list-line-height
+  a
+    border-radius: $menu-item-radius
+    color: $menu-item-color
+    display: block
+    padding: $menu-list-link-padding
+    &:hover
+      background-color: $menu-item-hover-background-color
+      color: $menu-item-hover-color
+    // Modifiers
+    &.is-active
+      background-color: $menu-item-active-background-color
+      color: $menu-item-active-color
+  li
+    ul
+      +ltr-property("border", $menu-list-border-left, false)
+      margin: $menu-nested-list-margin
+      +ltr-property("padding", $menu-nested-list-padding-left, false)
+
+.menu-label
+  color: $menu-label-color
+  font-size: $menu-label-font-size
+  letter-spacing: $menu-label-letter-spacing
+  text-transform: uppercase
+  &:not(:first-child)
+    margin-top: $menu-label-spacing
+  &:not(:last-child)
+    margin-bottom: $menu-label-spacing

styles/bulma/sass/components/message.sass

@@ -0,0 +1,101 @@
+@import "../utilities/mixins"
+
+$message-background-color: $background !default
+$message-radius: $radius !default
+
+$message-header-background-color: $text !default
+$message-header-color: $text-invert !default
+$message-header-weight: $weight-bold !default
+$message-header-padding: 0.75em 1em !default
+$message-header-radius: $radius !default
+
+$message-body-border-color: $border !default
+$message-body-border-width: 0 0 0 4px !default
+$message-body-color: $text !default
+$message-body-padding: 1.25em 1.5em !default
+$message-body-radius: $radius !default
+
+$message-body-pre-background-color: $scheme-main !default
+$message-body-pre-code-background-color: transparent !default
+
+$message-header-body-border-width: 0 !default
+$message-colors: $colors !default
+
+.message
+  @extend %block
+  background-color: $message-background-color
+  border-radius: $message-radius
+  font-size: $size-normal
+  strong
+    color: currentColor
+  a:not(.button):not(.tag):not(.dropdown-item)
+    color: currentColor
+    text-decoration: underline
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  // Colors
+  @each $name, $components in $message-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    $color-light: null
+    $color-dark: null
+
+    @if length($components) >= 3
+      $color-light: nth($components, 3)
+      @if length($components) >= 4
+        $color-dark: nth($components, 4)
+      @else
+        $color-luminance: colorLuminance($color)
+        $darken-percentage: $color-luminance * 70%
+        $desaturate-percentage: $color-luminance * 30%
+        $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+    @else
+      $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+      $color-light: lighten($color, $color-lightning)
+
+    &.is-#{$name}
+      background-color: $color-light
+      .message-header
+        background-color: $color
+        color: $color-invert
+      .message-body
+        border-color: $color
+        color: $color-dark
+
+.message-header
+  align-items: center
+  background-color: $message-header-background-color
+  border-radius: $message-header-radius $message-header-radius 0 0
+  color: $message-header-color
+  display: flex
+  font-weight: $message-header-weight
+  justify-content: space-between
+  line-height: 1.25
+  padding: $message-header-padding
+  position: relative
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    +ltr-property("margin", 0.75em, false)
+  & + .message-body
+    border-width: $message-header-body-border-width
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+
+.message-body
+  border-color: $message-body-border-color
+  border-radius: $message-body-radius
+  border-style: solid
+  border-width: $message-body-border-width
+  color: $message-body-color
+  padding: $message-body-padding
+  code,
+  pre
+    background-color: $message-body-pre-background-color
+  pre code
+    background-color: $message-body-pre-code-background-color

styles/bulma/sass/components/modal.sass

@@ -0,0 +1,117 @@
+@import "../utilities/mixins"
+
+$modal-z: 40 !default
+
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
+
+$modal-content-width: 640px !default
+$modal-content-margin-mobile: 20px !default
+$modal-content-spacing-mobile: 160px !default
+$modal-content-spacing-tablet: 40px !default
+
+$modal-close-dimensions: 40px !default
+$modal-close-right: 20px !default
+$modal-close-top: 20px !default
+
+$modal-card-spacing: 40px !default
+
+$modal-card-head-background-color: $background !default
+$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-padding: 20px !default
+$modal-card-head-radius: $radius-large !default
+
+$modal-card-title-color: $text-strong !default
+$modal-card-title-line-height: 1 !default
+$modal-card-title-size: $size-4 !default
+
+$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-border-top: 1px solid $border !default
+
+$modal-card-body-background-color: $scheme-main !default
+$modal-card-body-padding: 20px !default
+
+$modal-breakpoint: $tablet !default
+
+.modal
+  @extend %overlay
+  align-items: center
+  display: none
+  flex-direction: column
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: $modal-z
+  // Modifiers
+  &.is-active
+    display: flex
+
+.modal-background
+  @extend %overlay
+  background-color: $modal-background-background-color
+
+.modal-content,
+.modal-card
+  margin: 0 $modal-content-margin-mobile
+  max-height: calc(100vh - #{$modal-content-spacing-mobile})
+  overflow: auto
+  position: relative
+  width: 100%
+  // Responsiveness
+  +from($modal-breakpoint)
+    margin: 0 auto
+    max-height: calc(100vh - #{$modal-content-spacing-tablet})
+    width: $modal-content-width
+
+.modal-close
+  @extend %delete
+  background: none
+  height: $modal-close-dimensions
+  position: fixed
+  +ltr-position($modal-close-right)
+  top: $modal-close-top
+  width: $modal-close-dimensions
+
+.modal-card
+  display: flex
+  flex-direction: column
+  max-height: calc(100vh - #{$modal-card-spacing})
+  overflow: hidden
+  -ms-overflow-y: visible
+
+.modal-card-head,
+.modal-card-foot
+  align-items: center
+  background-color: $modal-card-head-background-color
+  display: flex
+  flex-shrink: 0
+  justify-content: flex-start
+  padding: $modal-card-head-padding
+  position: relative
+
+.modal-card-head
+  border-bottom: $modal-card-head-border-bottom
+  border-top-left-radius: $modal-card-head-radius
+  border-top-right-radius: $modal-card-head-radius
+
+.modal-card-title
+  color: $modal-card-title-color
+  flex-grow: 1
+  flex-shrink: 0
+  font-size: $modal-card-title-size
+  line-height: $modal-card-title-line-height
+
+.modal-card-foot
+  border-bottom-left-radius: $modal-card-foot-radius
+  border-bottom-right-radius: $modal-card-foot-radius
+  border-top: $modal-card-foot-border-top
+  .button
+    &:not(:last-child)
+      +ltr-property("margin", 0.5em)
+
+.modal-card-body
+  +overflow-touch
+  background-color: $modal-card-body-background-color
+  flex-grow: 1
+  flex-shrink: 1
+  overflow: auto
+  padding: $modal-card-body-padding

styles/bulma/sass/components/navbar.sass

@@ -0,0 +1,446 @@
+@import "../utilities/mixins"
+
+$navbar-background-color: $scheme-main !default
+$navbar-box-shadow-size: 0 2px 0 0 !default
+$navbar-box-shadow-color: $background !default
+$navbar-height: 3.25rem !default
+$navbar-padding-vertical: 1rem !default
+$navbar-padding-horizontal: 2rem !default
+$navbar-z: 30 !default
+$navbar-fixed-z: 30 !default
+
+$navbar-item-color: $text !default
+$navbar-item-hover-color: $link !default
+$navbar-item-hover-background-color: $scheme-main-bis !default
+$navbar-item-active-color: $scheme-invert !default
+$navbar-item-active-background-color: transparent !default
+$navbar-item-img-max-height: 1.75rem !default
+
+$navbar-burger-color: $navbar-item-color !default
+
+$navbar-tab-hover-background-color: transparent !default
+$navbar-tab-hover-border-bottom-color: $link !default
+$navbar-tab-active-color: $link !default
+$navbar-tab-active-background-color: transparent !default
+$navbar-tab-active-border-bottom-color: $link !default
+$navbar-tab-active-border-bottom-style: solid !default
+$navbar-tab-active-border-bottom-width: 3px !default
+
+$navbar-dropdown-background-color: $scheme-main !default
+$navbar-dropdown-border-top: 2px solid $border !default
+$navbar-dropdown-offset: -4px !default
+$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-z: 20 !default
+
+$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
+
+$navbar-dropdown-item-hover-color: $scheme-invert !default
+$navbar-dropdown-item-hover-background-color: $background !default
+$navbar-dropdown-item-active-color: $link !default
+$navbar-dropdown-item-active-background-color: $background !default
+
+$navbar-divider-background-color: $background !default
+$navbar-divider-height: 2px !default
+
+$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
+
+$navbar-breakpoint: $desktop !default
+
+$navbar-colors: $colors !default
+
+=navbar-fixed
+  left: 0
+  position: fixed
+  right: 0
+  z-index: $navbar-fixed-z
+
+.navbar
+  background-color: $navbar-background-color
+  min-height: $navbar-height
+  position: relative
+  z-index: $navbar-z
+  @each $name, $pair in $navbar-colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      .navbar-brand
+        & > .navbar-item,
+        .navbar-link
+          color: $color-invert
+        & > a.navbar-item,
+        .navbar-link
+          &:focus,
+          &:hover,
+          &.is-active
+            background-color: bulmaDarken($color, 5%)
+            color: $color-invert
+        .navbar-link
+          &::after
+            border-color: $color-invert
+      .navbar-burger
+        color: $color-invert
+      +from($navbar-breakpoint)
+        .navbar-start,
+        .navbar-end
+          & > .navbar-item,
+          .navbar-link
+            color: $color-invert
+          & > a.navbar-item,
+          .navbar-link
+            &:focus,
+            &:hover,
+            &.is-active
+              background-color: bulmaDarken($color, 5%)
+              color: $color-invert
+          .navbar-link
+            &::after
+              border-color: $color-invert
+        .navbar-item.has-dropdown:focus .navbar-link,
+        .navbar-item.has-dropdown:hover .navbar-link,
+        .navbar-item.has-dropdown.is-active .navbar-link
+          background-color: bulmaDarken($color, 5%)
+          color: $color-invert
+        .navbar-dropdown
+          a.navbar-item
+            &.is-active
+              background-color: $color
+              color: $color-invert
+  & > .container
+    align-items: stretch
+    display: flex
+    min-height: $navbar-height
+    width: 100%
+  &.has-shadow
+    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
+  &.is-fixed-bottom,
+  &.is-fixed-top
+    +navbar-fixed
+  &.is-fixed-bottom
+    bottom: 0
+    &.has-shadow
+      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
+  &.is-fixed-top
+    top: 0
+
+html,
+body
+  &.has-navbar-fixed-top
+    padding-top: $navbar-height
+  &.has-navbar-fixed-bottom
+    padding-bottom: $navbar-height
+
+.navbar-brand,
+.navbar-tabs
+  align-items: stretch
+  display: flex
+  flex-shrink: 0
+  min-height: $navbar-height
+
+.navbar-brand
+  a.navbar-item
+    &:focus,
+    &:hover
+      background-color: transparent
+
+.navbar-tabs
+  +overflow-touch
+  max-width: 100vw
+  overflow-x: auto
+  overflow-y: hidden
+
+.navbar-burger
+  @extend %reset
+  color: $navbar-burger-color
+  +hamburger($navbar-height)
+  +ltr-property("margin", auto, false)
+
+.navbar-menu
+  display: none
+
+.navbar-item,
+.navbar-link
+  color: $navbar-item-color
+  display: block
+  line-height: 1.5
+  padding: 0.5rem 0.75rem
+  position: relative
+  .icon
+    &:only-child
+      margin-left: -0.25rem
+      margin-right: -0.25rem
+
+a.navbar-item,
+.navbar-link
+  cursor: pointer
+  &:focus,
+  &:focus-within,
+  &:hover,
+  &.is-active
+    background-color: $navbar-item-hover-background-color
+    color: $navbar-item-hover-color
+
+.navbar-item
+  flex-grow: 0
+  flex-shrink: 0
+  img
+    max-height: $navbar-item-img-max-height
+  &.has-dropdown
+    padding: 0
+  &.is-expanded
+    flex-grow: 1
+    flex-shrink: 1
+  &.is-tab
+    border-bottom: 1px solid transparent
+    min-height: $navbar-height
+    padding-bottom: calc(0.5rem - 1px)
+    &:focus,
+    &:hover
+      background-color: $navbar-tab-hover-background-color
+      border-bottom-color: $navbar-tab-hover-border-bottom-color
+    &.is-active
+      background-color: $navbar-tab-active-background-color
+      border-bottom-color: $navbar-tab-active-border-bottom-color
+      border-bottom-style: $navbar-tab-active-border-bottom-style
+      border-bottom-width: $navbar-tab-active-border-bottom-width
+      color: $navbar-tab-active-color
+      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
+
+.navbar-content
+  flex-grow: 1
+  flex-shrink: 1
+
+.navbar-link:not(.is-arrowless)
+  +ltr-property("padding", 2.5em)
+  &::after
+    @extend %arrow
+    border-color: $navbar-dropdown-arrow
+    margin-top: -0.375em
+    +ltr-position(1.125em)
+
+.navbar-dropdown
+  font-size: 0.875rem
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
+  .navbar-item
+    padding-left: 1.5rem
+    padding-right: 1.5rem
+
+.navbar-divider
+  background-color: $navbar-divider-background-color
+  border: none
+  display: none
+  height: $navbar-divider-height
+  margin: 0.5rem 0
+
++until($navbar-breakpoint)
+  .navbar > .container
+    display: block
+  .navbar-brand,
+  .navbar-tabs
+    .navbar-item
+      align-items: center
+      display: flex
+  .navbar-link
+    &::after
+      display: none
+  .navbar-menu
+    background-color: $navbar-background-color
+    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
+    padding: 0.5rem 0
+    &.is-active
+      display: block
+  // Fixed navbar
+  .navbar
+    &.is-fixed-bottom-touch,
+    &.is-fixed-top-touch
+      +navbar-fixed
+    &.is-fixed-bottom-touch
+      bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+    &.is-fixed-top-touch
+      top: 0
+    &.is-fixed-top,
+    &.is-fixed-top-touch
+      .navbar-menu
+        +overflow-touch
+        max-height: calc(100vh - #{$navbar-height})
+        overflow: auto
+  html,
+  body
+    &.has-navbar-fixed-top-touch
+      padding-top: $navbar-height
+    &.has-navbar-fixed-bottom-touch
+      padding-bottom: $navbar-height
+
++from($navbar-breakpoint)
+  .navbar,
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end
+    align-items: stretch
+    display: flex
+  .navbar
+    min-height: $navbar-height
+    &.is-spaced
+      padding: $navbar-padding-vertical $navbar-padding-horizontal
+      .navbar-start,
+      .navbar-end
+        align-items: center
+      a.navbar-item,
+      .navbar-link
+        border-radius: $radius
+    &.is-transparent
+      a.navbar-item,
+      .navbar-link
+        &:focus,
+        &:hover,
+        &.is-active
+          background-color: transparent !important
+      .navbar-item.has-dropdown
+        &.is-active,
+        &.is-hoverable:focus,
+        &.is-hoverable:focus-within,
+        &.is-hoverable:hover
+          .navbar-link
+            background-color: transparent !important
+      .navbar-dropdown
+        a.navbar-item
+          &:focus,
+          &:hover
+            background-color: $navbar-dropdown-item-hover-background-color
+            color: $navbar-dropdown-item-hover-color
+          &.is-active
+            background-color: $navbar-dropdown-item-active-background-color
+            color: $navbar-dropdown-item-active-color
+  .navbar-burger
+    display: none
+  .navbar-item,
+  .navbar-link
+    align-items: center
+    display: flex
+  .navbar-item
+    &.has-dropdown
+      align-items: stretch
+    &.has-dropdown-up
+      .navbar-link::after
+        transform: rotate(135deg) translate(0.25em, -0.25em)
+      .navbar-dropdown
+        border-bottom: $navbar-dropdown-border-top
+        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+        border-top: none
+        bottom: 100%
+        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
+        top: auto
+    &.is-active,
+    &.is-hoverable:focus,
+    &.is-hoverable:focus-within,
+    &.is-hoverable:hover
+      .navbar-dropdown
+        display: block
+        .navbar.is-spaced &,
+        &.is-boxed
+          opacity: 1
+          pointer-events: auto
+          transform: translateY(0)
+  .navbar-menu
+    flex-grow: 1
+    flex-shrink: 0
+  .navbar-start
+    justify-content: flex-start
+    +ltr-property("margin", auto)
+  .navbar-end
+    justify-content: flex-end
+    +ltr-property("margin", auto, false)
+  .navbar-dropdown
+    background-color: $navbar-dropdown-background-color
+    border-bottom-left-radius: $navbar-dropdown-radius
+    border-bottom-right-radius: $navbar-dropdown-radius
+    border-top: $navbar-dropdown-border-top
+    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
+    display: none
+    font-size: 0.875rem
+    +ltr-position(0, false)
+    min-width: 100%
+    position: absolute
+    top: 100%
+    z-index: $navbar-dropdown-z
+    .navbar-item
+      padding: 0.375rem 1rem
+      white-space: nowrap
+    a.navbar-item
+      +ltr-property("padding", 3rem)
+      &:focus,
+      &:hover
+        background-color: $navbar-dropdown-item-hover-background-color
+        color: $navbar-dropdown-item-hover-color
+      &.is-active
+        background-color: $navbar-dropdown-item-active-background-color
+        color: $navbar-dropdown-item-active-color
+    .navbar.is-spaced &,
+    &.is-boxed
+      border-radius: $navbar-dropdown-boxed-radius
+      border-top: none
+      box-shadow: $navbar-dropdown-boxed-shadow
+      display: block
+      opacity: 0
+      pointer-events: none
+      top: calc(100% + (#{$navbar-dropdown-offset}))
+      transform: translateY(-5px)
+      transition-duration: $speed
+      transition-property: opacity, transform
+    &.is-right
+      left: auto
+      right: 0
+  .navbar-divider
+    display: block
+  .navbar > .container,
+  .container > .navbar
+    .navbar-brand
+      +ltr-property("margin", -.75rem, false)
+    .navbar-menu
+      +ltr-property("margin", -.75rem)
+  // Fixed navbar
+  .navbar
+    &.is-fixed-bottom-desktop,
+    &.is-fixed-top-desktop
+      +navbar-fixed
+    &.is-fixed-bottom-desktop
+      bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+    &.is-fixed-top-desktop
+      top: 0
+  html,
+  body
+    &.has-navbar-fixed-top-desktop
+      padding-top: $navbar-height
+    &.has-navbar-fixed-bottom-desktop
+      padding-bottom: $navbar-height
+    &.has-spaced-navbar-fixed-top
+      padding-top: $navbar-height + ($navbar-padding-vertical * 2)
+    &.has-spaced-navbar-fixed-bottom
+      padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
+  // Hover/Active states
+  a.navbar-item,
+  .navbar-link
+    &.is-active
+      color: $navbar-item-active-color
+    &.is-active:not(:focus):not(:hover)
+      background-color: $navbar-item-active-background-color
+  .navbar-item.has-dropdown
+    &:focus,
+    &:hover,
+    &.is-active
+      .navbar-link
+        background-color: $navbar-item-hover-background-color
+
+// Combination
+
+.hero
+  &.is-fullheight-with-navbar
+    min-height: calc(100vh - #{$navbar-height})

styles/bulma/sass/components/pagination.sass

@@ -0,0 +1,167 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
+$pagination-color: $text-strong !default
+$pagination-border-color: $border !default
+$pagination-margin: -0.25rem !default
+$pagination-min-width: $control-height !default
+
+$pagination-item-font-size: 1em !default
+$pagination-item-margin: 0.25rem !default
+$pagination-item-padding-left: 0.5em !default
+$pagination-item-padding-right: 0.5em !default
+
+$pagination-nav-padding-left: 0.75em !default
+$pagination-nav-padding-right: 0.75em !default
+
+$pagination-hover-color: $link-hover !default
+$pagination-hover-border-color: $link-hover-border !default
+
+$pagination-focus-color: $link-focus !default
+$pagination-focus-border-color: $link-focus-border !default
+
+$pagination-active-color: $link-active !default
+$pagination-active-border-color: $link-active-border !default
+
+$pagination-disabled-color: $text-light !default
+$pagination-disabled-background-color: $border !default
+$pagination-disabled-border-color: $border !default
+
+$pagination-current-color: $link-invert !default
+$pagination-current-background-color: $link !default
+$pagination-current-border-color: $link !default
+
+$pagination-ellipsis-color: $grey-light !default
+
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
+
+.pagination
+  @extend %block
+  font-size: $size-normal
+  margin: $pagination-margin
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  &.is-rounded
+    .pagination-previous,
+    .pagination-next
+      padding-left: 1em
+      padding-right: 1em
+      border-radius: $radius-rounded
+    .pagination-link
+      border-radius: $radius-rounded
+
+.pagination,
+.pagination-list
+  align-items: center
+  display: flex
+  justify-content: center
+  text-align: center
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis
+  @extend %control
+  @extend %unselectable
+  font-size: $pagination-item-font-size
+  justify-content: center
+  margin: $pagination-item-margin
+  padding-left: $pagination-item-padding-left
+  padding-right: $pagination-item-padding-right
+  text-align: center
+
+.pagination-previous,
+.pagination-next,
+.pagination-link
+  border-color: $pagination-border-color
+  color: $pagination-color
+  min-width: $pagination-min-width
+  &:hover
+    border-color: $pagination-hover-border-color
+    color: $pagination-hover-color
+  &:focus
+    border-color: $pagination-focus-border-color
+  &:active
+    box-shadow: $pagination-shadow-inset
+  &[disabled],
+  &.is-disabled
+    background-color: $pagination-disabled-background-color
+    border-color: $pagination-disabled-border-color
+    box-shadow: none
+    color: $pagination-disabled-color
+    opacity: 0.5
+
+.pagination-previous,
+.pagination-next
+  padding-left: $pagination-nav-padding-left
+  padding-right: $pagination-nav-padding-right
+  white-space: nowrap
+
+.pagination-link
+  &.is-current
+    background-color: $pagination-current-background-color
+    border-color: $pagination-current-border-color
+    color: $pagination-current-color
+
+.pagination-ellipsis
+  color: $pagination-ellipsis-color
+  pointer-events: none
+
+.pagination-list
+  flex-wrap: wrap
+  li
+    list-style: none
+
++mobile
+  .pagination
+    flex-wrap: wrap
+  .pagination-previous,
+  .pagination-next
+    flex-grow: 1
+    flex-shrink: 1
+  .pagination-list
+    li
+      flex-grow: 1
+      flex-shrink: 1
+
++tablet
+  .pagination-list
+    flex-grow: 1
+    flex-shrink: 1
+    justify-content: flex-start
+    order: 1
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis
+    margin-bottom: 0
+    margin-top: 0
+  .pagination-previous
+    order: 2
+  .pagination-next
+    order: 3
+  .pagination
+    justify-content: space-between
+    margin-bottom: 0
+    margin-top: 0
+    &.is-centered
+      .pagination-previous
+        order: 1
+      .pagination-list
+        justify-content: center
+        order: 2
+      .pagination-next
+        order: 3
+    &.is-right
+      .pagination-previous
+        order: 1
+      .pagination-next
+        order: 2
+      .pagination-list
+        justify-content: flex-end
+        order: 3

styles/bulma/sass/components/panel.sass

@@ -0,0 +1,121 @@
+@import "../utilities/mixins"
+
+$panel-margin: $block-spacing !default
+$panel-item-border: 1px solid $border-light !default
+$panel-radius: $radius-large !default
+$panel-shadow: $shadow !default
+
+$panel-heading-background-color: $border-light !default
+$panel-heading-color: $text-strong !default
+$panel-heading-line-height: 1.25 !default
+$panel-heading-padding: 0.75em 1em !default
+$panel-heading-radius: $radius !default
+$panel-heading-size: 1.25em !default
+$panel-heading-weight: $weight-bold !default
+
+$panel-tabs-font-size: 0.875em !default
+$panel-tab-border-bottom: 1px solid $border !default
+$panel-tab-active-border-bottom-color: $link-active-border !default
+$panel-tab-active-color: $link-active !default
+
+$panel-list-item-color: $text !default
+$panel-list-item-hover-color: $link !default
+
+$panel-block-color: $text-strong !default
+$panel-block-hover-background-color: $background !default
+$panel-block-active-border-left-color: $link !default
+$panel-block-active-color: $link-active !default
+$panel-block-active-icon-color: $link !default
+
+$panel-icon-color: $text-light !default
+$panel-colors: $colors !default
+
+.panel
+  border-radius: $panel-radius
+  box-shadow: $panel-shadow
+  font-size: $size-normal
+  &:not(:last-child)
+    margin-bottom: $panel-margin
+  // Colors
+  @each $name, $components in $panel-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    &.is-#{$name}
+      .panel-heading
+        background-color: $color
+        color: $color-invert
+      .panel-tabs a.is-active
+        border-bottom-color: $color
+      .panel-block.is-active .panel-icon
+        color: $color
+
+.panel-tabs,
+.panel-block
+  &:not(:last-child)
+    border-bottom: $panel-item-border
+
+.panel-heading
+  background-color: $panel-heading-background-color
+  border-radius: $panel-radius $panel-radius 0 0
+  color: $panel-heading-color
+  font-size: $panel-heading-size
+  font-weight: $panel-heading-weight
+  line-height: $panel-heading-line-height
+  padding: $panel-heading-padding
+
+.panel-tabs
+  align-items: flex-end
+  display: flex
+  font-size: $panel-tabs-font-size
+  justify-content: center
+  a
+    border-bottom: $panel-tab-border-bottom
+    margin-bottom: -1px
+    padding: 0.5em
+    // Modifiers
+    &.is-active
+      border-bottom-color: $panel-tab-active-border-bottom-color
+      color: $panel-tab-active-color
+
+.panel-list
+  a
+    color: $panel-list-item-color
+    &:hover
+      color: $panel-list-item-hover-color
+
+.panel-block
+  align-items: center
+  color: $panel-block-color
+  display: flex
+  justify-content: flex-start
+  padding: 0.5em 0.75em
+  input[type="checkbox"]
+    +ltr-property("margin", 0.75em)
+  & > .control
+    flex-grow: 1
+    flex-shrink: 1
+    width: 100%
+  &.is-wrapped
+    flex-wrap: wrap
+  &.is-active
+    border-left-color: $panel-block-active-border-left-color
+    color: $panel-block-active-color
+    .panel-icon
+      color: $panel-block-active-icon-color
+  &:last-child
+    border-bottom-left-radius: $panel-radius
+    border-bottom-right-radius: $panel-radius
+
+a.panel-block,
+label.panel-block
+  cursor: pointer
+  &:hover
+    background-color: $panel-block-hover-background-color
+
+.panel-icon
+  +fa(14px, 1em)
+  color: $panel-icon-color
+  +ltr-property("margin", 0.75em)
+  .fa
+    font-size: inherit
+    line-height: inherit

styles/bulma/sass/components/tabs.sass

@@ -0,0 +1,176 @@
+@import "../utilities/mixins"
+
+$tabs-border-bottom-color: $border !default
+$tabs-border-bottom-style: solid !default
+$tabs-border-bottom-width: 1px !default
+$tabs-link-color: $text !default
+$tabs-link-hover-border-bottom-color: $text-strong !default
+$tabs-link-hover-color: $text-strong !default
+$tabs-link-active-border-bottom-color: $link !default
+$tabs-link-active-color: $link !default
+$tabs-link-padding: 0.5em 1em !default
+
+$tabs-boxed-link-radius: $radius !default
+$tabs-boxed-link-hover-background-color: $background !default
+$tabs-boxed-link-hover-border-bottom-color: $border !default
+
+$tabs-boxed-link-active-background-color: $scheme-main !default
+$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-border-bottom-color: transparent !default
+
+$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-style: solid !default
+$tabs-toggle-link-border-width: 1px !default
+$tabs-toggle-link-hover-background-color: $background !default
+$tabs-toggle-link-hover-border-color: $border-hover !default
+$tabs-toggle-link-radius: $radius !default
+$tabs-toggle-link-active-background-color: $link !default
+$tabs-toggle-link-active-border-color: $link !default
+$tabs-toggle-link-active-color: $link-invert !default
+
+.tabs
+  @extend %block
+  +overflow-touch
+  @extend %unselectable
+  align-items: stretch
+  display: flex
+  font-size: $size-normal
+  justify-content: space-between
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  a
+    align-items: center
+    border-bottom-color: $tabs-border-bottom-color
+    border-bottom-style: $tabs-border-bottom-style
+    border-bottom-width: $tabs-border-bottom-width
+    color: $tabs-link-color
+    display: flex
+    justify-content: center
+    margin-bottom: -#{$tabs-border-bottom-width}
+    padding: $tabs-link-padding
+    vertical-align: top
+    &:hover
+      border-bottom-color: $tabs-link-hover-border-bottom-color
+      color: $tabs-link-hover-color
+  li
+    display: block
+    &.is-active
+      a
+        border-bottom-color: $tabs-link-active-border-bottom-color
+        color: $tabs-link-active-color
+  ul
+    align-items: center
+    border-bottom-color: $tabs-border-bottom-color
+    border-bottom-style: $tabs-border-bottom-style
+    border-bottom-width: $tabs-border-bottom-width
+    display: flex
+    flex-grow: 1
+    flex-shrink: 0
+    justify-content: flex-start
+    &.is-left
+      padding-right: 0.75em
+    &.is-center
+      flex: none
+      justify-content: center
+      padding-left: 0.75em
+      padding-right: 0.75em
+    &.is-right
+      justify-content: flex-end
+      padding-left: 0.75em
+  .icon
+    &:first-child
+      +ltr-property("margin", 0.5em)
+    &:last-child
+      +ltr-property("margin", 0.5em, false)
+  // Alignment
+  &.is-centered
+    ul
+      justify-content: center
+  &.is-right
+    ul
+      justify-content: flex-end
+  // Styles
+  &.is-boxed
+    a
+      border: 1px solid transparent
+      +ltr
+        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+      +rtl
+        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
+      &:hover
+        background-color: $tabs-boxed-link-hover-background-color
+        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
+    li
+      &.is-active
+        a
+          background-color: $tabs-boxed-link-active-background-color
+          border-color: $tabs-boxed-link-active-border-color
+          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
+  &.is-fullwidth
+    li
+      flex-grow: 1
+      flex-shrink: 0
+  &.is-toggle
+    a
+      border-color: $tabs-toggle-link-border-color
+      border-style: $tabs-toggle-link-border-style
+      border-width: $tabs-toggle-link-border-width
+      margin-bottom: 0
+      position: relative
+      &:hover
+        background-color: $tabs-toggle-link-hover-background-color
+        border-color: $tabs-toggle-link-hover-border-color
+        z-index: 2
+    li
+      & + li
+        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
+      &:first-child a
+        +ltr
+          border-top-left-radius: $tabs-toggle-link-radius
+          border-bottom-left-radius: $tabs-toggle-link-radius
+        +rtl
+          border-top-right-radius: $tabs-toggle-link-radius
+          border-bottom-right-radius: $tabs-toggle-link-radius
+      &:last-child a
+        +ltr
+          border-top-right-radius: $tabs-toggle-link-radius
+          border-bottom-right-radius: $tabs-toggle-link-radius
+        +rtl
+          border-top-left-radius: $tabs-toggle-link-radius
+          border-bottom-left-radius: $tabs-toggle-link-radius
+      &.is-active
+        a
+          background-color: $tabs-toggle-link-active-background-color
+          border-color: $tabs-toggle-link-active-border-color
+          color: $tabs-toggle-link-active-color
+          z-index: 1
+    ul
+      border-bottom: none
+    &.is-toggle-rounded
+      li
+        &:first-child a
+          +ltr
+            border-bottom-left-radius: $radius-rounded
+            border-top-left-radius: $radius-rounded
+            padding-left: 1.25em
+          +rtl
+            border-bottom-right-radius: $radius-rounded
+            border-top-right-radius: $radius-rounded
+            padding-right: 1.25em
+        &:last-child a
+          +ltr
+            border-bottom-right-radius: $radius-rounded
+            border-top-right-radius: $radius-rounded
+            padding-right: 1.25em
+          +rtl
+            border-bottom-left-radius: $radius-rounded
+            border-top-left-radius: $radius-rounded
+            padding-left: 1.25em
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large

styles/bulma/sass/elements/_all.sass

@@ -0,0 +1,16 @@
+/* Bulma Elements */
+@charset "utf-8"
+
+@import "box"
+@import "button"
+@import "container"
+@import "content"
+@import "icon"
+@import "image"
+@import "notification"
+@import "progress"
+@import "table"
+@import "tag"
+@import "title"
+
+@import "other"

styles/bulma/sass/elements/box.sass

@@ -0,0 +1,26 @@
+@import "../utilities/mixins"
+
+$box-color: $text !default
+$box-background-color: $scheme-main !default
+$box-radius: $radius-large !default
+$box-shadow: $shadow !default
+$box-padding: 1.25rem !default
+
+$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
+$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
+
+.box
+  @extend %block
+  background-color: $box-background-color
+  border-radius: $box-radius
+  box-shadow: $box-shadow
+  color: $box-color
+  display: block
+  padding: $box-padding
+
+a.box
+  &:hover,
+  &:focus
+    box-shadow: $box-link-hover-shadow
+  &:active
+    box-shadow: $box-link-active-shadow

styles/bulma/sass/elements/button.sass

@@ -0,0 +1,357 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
+$button-color: $text-strong !default
+$button-background-color: $scheme-main !default
+$button-family: false !default
+
+$button-border-color: $border !default
+$button-border-width: $control-border-width !default
+
+$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
+$button-padding-horizontal: 1em !default
+
+$button-hover-color: $link-hover !default
+$button-hover-border-color: $link-hover-border !default
+
+$button-focus-color: $link-focus !default
+$button-focus-border-color: $link-focus-border !default
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
+
+$button-active-color: $link-active !default
+$button-active-border-color: $link-active-border !default
+
+$button-text-color: $text !default
+$button-text-decoration: underline !default
+$button-text-hover-background-color: $background !default
+$button-text-hover-color: $text-strong !default
+
+$button-ghost-background: none !default
+$button-ghost-border-color: transparent !default
+$button-ghost-color: $link !default
+$button-ghost-decoration: none !default
+$button-ghost-hover-color: $link !default
+$button-ghost-hover-decoration: underline !default
+
+$button-disabled-background-color: $scheme-main !default
+$button-disabled-border-color: $border !default
+$button-disabled-shadow: none !default
+$button-disabled-opacity: 0.5 !default
+
+$button-static-color: $text-light !default
+$button-static-background-color: $scheme-main-ter !default
+$button-static-border-color: $border !default
+
+$button-colors: $colors !default
+$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
+
+// The button sizes use mixins so they can be used at different breakpoints
+=button-small
+  &:not(.is-rounded)
+    border-radius: $radius-small
+  font-size: $size-small
+=button-normal
+  font-size: $size-normal
+=button-medium
+  font-size: $size-medium
+=button-large
+  font-size: $size-large
+
+.button
+  @extend %control
+  @extend %unselectable
+  background-color: $button-background-color
+  border-color: $button-border-color
+  border-width: $button-border-width
+  color: $button-color
+  cursor: pointer
+  @if $button-family
+    font-family: $button-family
+  justify-content: center
+  padding-bottom: $button-padding-vertical
+  padding-left: $button-padding-horizontal
+  padding-right: $button-padding-horizontal
+  padding-top: $button-padding-vertical
+  text-align: center
+  white-space: nowrap
+  strong
+    color: inherit
+  .icon
+    &,
+    &.is-small,
+    &.is-medium,
+    &.is-large
+      height: 1.5em
+      width: 1.5em
+    &:first-child:not(:last-child)
+      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", $button-padding-horizontal * 0.25)
+    &:last-child:not(:first-child)
+      +ltr-property("margin", $button-padding-horizontal * 0.25, false)
+      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
+    &:first-child:last-child
+      margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+  // States
+  &:hover,
+  &.is-hovered
+    border-color: $button-hover-border-color
+    color: $button-hover-color
+  &:focus,
+  &.is-focused
+    border-color: $button-focus-border-color
+    color: $button-focus-color
+    &:not(:active)
+      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
+  &:active,
+  &.is-active
+    border-color: $button-active-border-color
+    color: $button-active-color
+  // Colors
+  &.is-text
+    background-color: transparent
+    border-color: transparent
+    color: $button-text-color
+    text-decoration: $button-text-decoration
+    &:hover,
+    &.is-hovered,
+    &:focus,
+    &.is-focused
+      background-color: $button-text-hover-background-color
+      color: $button-text-hover-color
+    &:active,
+    &.is-active
+      background-color: bulmaDarken($button-text-hover-background-color, 5%)
+      color: $button-text-hover-color
+    &[disabled],
+    fieldset[disabled] &
+      background-color: transparent
+      border-color: transparent
+      box-shadow: none
+  &.is-ghost
+    background: $button-ghost-background
+    border-color: $button-ghost-border-color
+    color: $button-ghost-color
+    text-decoration: $button-ghost-decoration
+    &:hover,
+    &.is-hovered
+      color: $button-ghost-hover-color
+      text-decoration: $button-ghost-hover-decoration
+  @each $name, $pair in $button-colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      border-color: transparent
+      color: $color-invert
+      &:hover,
+      &.is-hovered
+        background-color: bulmaDarken($color, 2.5%)
+        border-color: transparent
+        color: $color-invert
+      &:focus,
+      &.is-focused
+        border-color: transparent
+        color: $color-invert
+        &:not(:active)
+          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
+      &:active,
+      &.is-active
+        background-color: bulmaDarken($color, 5%)
+        border-color: transparent
+        color: $color-invert
+      &[disabled],
+      fieldset[disabled] &
+        background-color: $color
+        border-color: $color
+        box-shadow: none
+      &.is-inverted
+        background-color: $color-invert
+        color: $color
+        &:hover,
+        &.is-hovered
+          background-color: bulmaDarken($color-invert, 5%)
+        &[disabled],
+        fieldset[disabled] &
+          background-color: $color-invert
+          border-color: transparent
+          box-shadow: none
+          color: $color
+      &.is-loading
+        &::after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background-color: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused
+          background-color: $color
+          border-color: $color
+          color: $color-invert
+        &.is-loading
+          &::after
+            border-color: transparent transparent $color $color !important
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color-invert $color-invert !important
+        &[disabled],
+        fieldset[disabled] &
+          background-color: transparent
+          border-color: $color
+          box-shadow: none
+          color: $color
+      &.is-inverted.is-outlined
+        background-color: transparent
+        border-color: $color-invert
+        color: $color-invert
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused
+          background-color: $color-invert
+          color: $color
+        &.is-loading
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color $color !important
+        &[disabled],
+        fieldset[disabled] &
+          background-color: transparent
+          border-color: $color-invert
+          box-shadow: none
+          color: $color-invert
+      // If light and dark colors are provided
+      @if length($pair) >= 4
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark
+          &:hover,
+          &.is-hovered
+            background-color: bulmaDarken($color-light, 2.5%)
+            border-color: transparent
+            color: $color-dark
+          &:active,
+          &.is-active
+            background-color: bulmaDarken($color-light, 5%)
+            border-color: transparent
+            color: $color-dark
+  // Sizes
+  &.is-small
+    +button-small
+  &.is-normal
+    +button-normal
+  &.is-medium
+    +button-medium
+  &.is-large
+    +button-large
+  // Modifiers
+  &[disabled],
+  fieldset[disabled] &
+    background-color: $button-disabled-background-color
+    border-color: $button-disabled-border-color
+    box-shadow: $button-disabled-shadow
+    opacity: $button-disabled-opacity
+  &.is-fullwidth
+    display: flex
+    width: 100%
+  &.is-loading
+    color: transparent !important
+    pointer-events: none
+    &::after
+      @extend %loader
+      +center(1em)
+      position: absolute !important
+  &.is-static
+    background-color: $button-static-background-color
+    border-color: $button-static-border-color
+    color: $button-static-color
+    box-shadow: none
+    pointer-events: none
+  &.is-rounded
+    border-radius: $radius-rounded
+    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
+    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
+
+.buttons
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  .button
+    margin-bottom: 0.5rem
+    &:not(:last-child):not(.is-fullwidth)
+      +ltr-property("margin", 0.5rem)
+  &:last-child
+    margin-bottom: -0.5rem
+  &:not(:last-child)
+    margin-bottom: 1rem
+  // Sizes
+  &.are-small
+    .button:not(.is-normal):not(.is-medium):not(.is-large)
+      +button-small
+  &.are-medium
+    .button:not(.is-small):not(.is-normal):not(.is-large)
+      +button-medium
+  &.are-large
+    .button:not(.is-small):not(.is-normal):not(.is-medium)
+      +button-large
+  &.has-addons
+    .button
+      &:not(:first-child)
+        border-bottom-left-radius: 0
+        border-top-left-radius: 0
+      &:not(:last-child)
+        border-bottom-right-radius: 0
+        border-top-right-radius: 0
+        +ltr-property("margin", -1px)
+      &:last-child
+        +ltr-property("margin", 0)
+      &:hover,
+      &.is-hovered
+        z-index: 2
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active,
+      &.is-selected
+        z-index: 3
+        &:hover
+          z-index: 4
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+  &.is-centered
+    justify-content: center
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem
+  &.is-right
+    justify-content: flex-end
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem
+
+@each $bp-name, $bp-sizes in $button-responsive-sizes
+  +breakpoint($bp-name)
+    @each $size, $value in $bp-sizes
+      @if $size != "normal"
+        .button.is-responsive.is-#{$size}
+          font-size: $value
+      @else
+        .button.is-responsive,
+        .button.is-responsive.is-normal
+          font-size: $value

styles/bulma/sass/elements/container.sass

@@ -0,0 +1,29 @@
+@import "../utilities/mixins"
+
+$container-offset: (2 * $gap) !default
+$container-max-width: $fullhd !default
+
+.container
+  flex-grow: 1
+  margin: 0 auto
+  position: relative
+  width: auto
+  &.is-fluid
+    max-width: none !important
+    padding-left: $gap
+    padding-right: $gap
+    width: 100%
+  +desktop
+    max-width: $desktop - $container-offset
+  +until-widescreen
+    &.is-widescreen:not(.is-max-desktop)
+      max-width: min($widescreen, $container-max-width) - $container-offset
+  +until-fullhd
+    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
+      max-width: min($fullhd, $container-max-width) - $container-offset
+  +widescreen
+    &:not(.is-max-desktop)
+      max-width: min($widescreen, $container-max-width) - $container-offset
+  +fullhd
+    &:not(.is-max-desktop):not(.is-max-widescreen)
+      max-width: min($fullhd, $container-max-width) - $container-offset

styles/bulma/sass/elements/content.sass

@@ -0,0 +1,162 @@
+@import "../utilities/mixins"
+
+$content-heading-color: $text-strong !default
+$content-heading-weight: $weight-semibold !default
+$content-heading-line-height: 1.125 !default
+
+$content-block-margin-bottom: 1em !default
+
+$content-blockquote-background-color: $background !default
+$content-blockquote-border-left: 5px solid $border !default
+$content-blockquote-padding: 1.25em 1.5em !default
+
+$content-pre-padding: 1.25em 1.5em !default
+
+$content-table-cell-border: 1px solid $border !default
+$content-table-cell-border-width: 0 0 1px !default
+$content-table-cell-padding: 0.5em 0.75em !default
+$content-table-cell-heading-color: $text-strong !default
+$content-table-head-cell-border-width: 0 0 2px !default
+$content-table-head-cell-color: $text-strong !default
+$content-table-body-last-row-cell-border-bottom-width: 0 !default
+$content-table-foot-cell-border-width: 2px 0 0 !default
+$content-table-foot-cell-color: $text-strong !default
+
+.content
+  @extend %block
+  // Inline
+  li + li
+    margin-top: 0.25em
+  // Block
+  p,
+  dl,
+  ol,
+  ul,
+  blockquote,
+  pre,
+  table
+    &:not(:last-child)
+      margin-bottom: $content-block-margin-bottom
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    color: $content-heading-color
+    font-weight: $content-heading-weight
+    line-height: $content-heading-line-height
+  h1
+    font-size: 2em
+    margin-bottom: 0.5em
+    &:not(:first-child)
+      margin-top: 1em
+  h2
+    font-size: 1.75em
+    margin-bottom: 0.5714em
+    &:not(:first-child)
+      margin-top: 1.1428em
+  h3
+    font-size: 1.5em
+    margin-bottom: 0.6666em
+    &:not(:first-child)
+      margin-top: 1.3333em
+  h4
+    font-size: 1.25em
+    margin-bottom: 0.8em
+  h5
+    font-size: 1.125em
+    margin-bottom: 0.8888em
+  h6
+    font-size: 1em
+    margin-bottom: 1em
+  blockquote
+    background-color: $content-blockquote-background-color
+    +ltr-property("border", $content-blockquote-border-left, false)
+    padding: $content-blockquote-padding
+  ol
+    list-style-position: outside
+    +ltr-property("margin", 2em, false)
+    margin-top: 1em
+    &:not([type])
+      list-style-type: decimal
+      &.is-lower-alpha
+        list-style-type: lower-alpha
+      &.is-lower-roman
+        list-style-type: lower-roman
+      &.is-upper-alpha
+        list-style-type: upper-alpha
+      &.is-upper-roman
+        list-style-type: upper-roman
+  ul
+    list-style: disc outside
+    +ltr-property("margin", 2em, false)
+    margin-top: 1em
+    ul
+      list-style-type: circle
+      margin-top: 0.5em
+      ul
+        list-style-type: square
+  dd
+    +ltr-property("margin", 2em, false)
+  figure
+    margin-left: 2em
+    margin-right: 2em
+    text-align: center
+    &:not(:first-child)
+      margin-top: 2em
+    &:not(:last-child)
+      margin-bottom: 2em
+    img
+      display: inline-block
+    figcaption
+      font-style: italic
+  pre
+    +overflow-touch
+    overflow-x: auto
+    padding: $content-pre-padding
+    white-space: pre
+    word-wrap: normal
+  sup,
+  sub
+    font-size: 75%
+  table
+    width: 100%
+    td,
+    th
+      border: $content-table-cell-border
+      border-width: $content-table-cell-border-width
+      padding: $content-table-cell-padding
+      vertical-align: top
+    th
+      color: $content-table-cell-heading-color
+      &:not([align])
+        text-align: inherit
+    thead
+      td,
+      th
+        border-width: $content-table-head-cell-border-width
+        color: $content-table-head-cell-color
+    tfoot
+      td,
+      th
+        border-width: $content-table-foot-cell-border-width
+        color: $content-table-foot-cell-color
+    tbody
+      tr
+        &:last-child
+          td,
+          th
+            border-bottom-width: $content-table-body-last-row-cell-border-bottom-width
+  .tabs
+    li + li
+      margin-top: 0
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-normal
+    font-size: $size-normal
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large

styles/bulma/sass/elements/form.sass

@@ -0,0 +1 @@
+@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."

styles/bulma/sass/elements/icon.sass

@@ -0,0 +1,46 @@
+$icon-dimensions: 1.5rem !default
+$icon-dimensions-small: 1rem !default
+$icon-dimensions-medium: 2rem !default
+$icon-dimensions-large: 3rem !default
+$icon-text-spacing: 0.25em !default
+
+.icon
+  align-items: center
+  display: inline-flex
+  justify-content: center
+  height: $icon-dimensions
+  width: $icon-dimensions
+  // Sizes
+  &.is-small
+    height: $icon-dimensions-small
+    width: $icon-dimensions-small
+  &.is-medium
+    height: $icon-dimensions-medium
+    width: $icon-dimensions-medium
+  &.is-large
+    height: $icon-dimensions-large
+    width: $icon-dimensions-large
+
+.icon-text
+  align-items: flex-start
+  color: inherit
+  display: inline-flex
+  flex-wrap: wrap
+  line-height: $icon-dimensions
+  vertical-align: top
+  .icon
+    flex-grow: 0
+    flex-shrink: 0
+    &:not(:last-child)
+      +ltr
+        margin-right: $icon-text-spacing
+      +rtl
+        margin-left: $icon-text-spacing
+    &:not(:first-child)
+      +ltr
+        margin-left: $icon-text-spacing
+      +rtl
+        margin-right: $icon-text-spacing
+
+div.icon-text
+  display: flex

styles/bulma/sass/elements/image.sass

@@ -0,0 +1,73 @@
+@import "../utilities/mixins"
+
+$dimensions: 16 24 32 48 64 96 128 !default
+
+.image
+  display: block
+  position: relative
+  img
+    display: block
+    height: auto
+    width: 100%
+    &.is-rounded
+      border-radius: $radius-rounded
+  &.is-fullwidth
+    width: 100%
+  // Ratio
+  &.is-square,
+  &.is-1by1,
+  &.is-5by4,
+  &.is-4by3,
+  &.is-3by2,
+  &.is-5by3,
+  &.is-16by9,
+  &.is-2by1,
+  &.is-3by1,
+  &.is-4by5,
+  &.is-3by4,
+  &.is-2by3,
+  &.is-3by5,
+  &.is-9by16,
+  &.is-1by2,
+  &.is-1by3
+    img,
+    .has-ratio
+      @extend %overlay
+      height: 100%
+      width: 100%
+  &.is-square,
+  &.is-1by1
+    padding-top: 100%
+  &.is-5by4
+    padding-top: 80%
+  &.is-4by3
+    padding-top: 75%
+  &.is-3by2
+    padding-top: 66.6666%
+  &.is-5by3
+    padding-top: 60%
+  &.is-16by9
+    padding-top: 56.25%
+  &.is-2by1
+    padding-top: 50%
+  &.is-3by1
+    padding-top: 33.3333%
+  &.is-4by5
+    padding-top: 125%
+  &.is-3by4
+    padding-top: 133.3333%
+  &.is-2by3
+    padding-top: 150%
+  &.is-3by5
+    padding-top: 166.6666%
+  &.is-9by16
+    padding-top: 177.7777%
+  &.is-1by2
+    padding-top: 200%
+  &.is-1by3
+    padding-top: 300%
+  // Sizes
+  @each $dimension in $dimensions
+    &.is-#{$dimension}x#{$dimension}
+      height: $dimension * 1px
+      width: $dimension * 1px

styles/bulma/sass/elements/notification.sass

@@ -0,0 +1,52 @@
+@import "../utilities/mixins"
+
+$notification-background-color: $background !default
+$notification-code-background-color: $scheme-main !default
+$notification-radius: $radius !default
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
+$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
+
+$notification-colors: $colors !default
+
+.notification
+  @extend %block
+  background-color: $notification-background-color
+  border-radius: $notification-radius
+  position: relative
+  +ltr
+    padding: $notification-padding-ltr
+  +rtl
+    padding: $notification-padding-rtl
+  a:not(.button):not(.dropdown-item)
+    color: currentColor
+    text-decoration: underline
+  strong
+    color: currentColor
+  code,
+  pre
+    background: $notification-code-background-color
+  pre code
+    background: transparent
+  & > .delete
+    +ltr-position(0.5rem)
+    position: absolute
+    top: 0.5rem
+  .title,
+  .subtitle,
+  .content
+    color: currentColor
+  // Colors
+  @each $name, $pair in $notification-colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      // If light and dark colors are provided
+      @if length($pair) >= 4
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark

styles/bulma/sass/elements/other.sass

@@ -0,0 +1,31 @@
+@import "../utilities/mixins"
+
+.block
+  @extend %block
+
+.delete
+  @extend %delete
+
+.heading
+  display: block
+  font-size: 11px
+  letter-spacing: 1px
+  margin-bottom: 5px
+  text-transform: uppercase
+
+.loader
+  @extend %loader
+
+.number
+  align-items: center
+  background-color: $background
+  border-radius: $radius-rounded
+  display: inline-flex
+  font-size: $size-medium
+  height: 2em
+  justify-content: center
+  margin-right: 1.5rem
+  min-width: 2.5em
+  padding: 0.25rem 0.5rem
+  text-align: center
+  vertical-align: top

styles/bulma/sass/elements/progress.sass

@@ -0,0 +1,73 @@
+@import "../utilities/mixins"
+
+$progress-bar-background-color: $border-light !default
+$progress-value-background-color: $text !default
+$progress-border-radius: $radius-rounded !default
+
+$progress-indeterminate-duration: 1.5s !default
+
+$progress-colors: $colors !default
+
+.progress
+  @extend %block
+  -moz-appearance: none
+  -webkit-appearance: none
+  border: none
+  border-radius: $progress-border-radius
+  display: block
+  height: $size-normal
+  overflow: hidden
+  padding: 0
+  width: 100%
+  &::-webkit-progress-bar
+    background-color: $progress-bar-background-color
+  &::-webkit-progress-value
+    background-color: $progress-value-background-color
+  &::-moz-progress-bar
+    background-color: $progress-value-background-color
+  &::-ms-fill
+    background-color: $progress-value-background-color
+    border: none
+  // Colors
+  @each $name, $pair in $progress-colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &::-webkit-progress-value
+        background-color: $color
+      &::-moz-progress-bar
+        background-color: $color
+      &::-ms-fill
+        background-color: $color
+      &:indeterminate
+        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+
+  &:indeterminate
+    animation-duration: $progress-indeterminate-duration
+    animation-iteration-count: infinite
+    animation-name: moveIndeterminate
+    animation-timing-function: linear
+    background-color: $progress-bar-background-color
+    background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
+    background-position: top left
+    background-repeat: no-repeat
+    background-size: 150% 150%
+    &::-webkit-progress-bar
+      background-color: transparent
+    &::-moz-progress-bar
+      background-color: transparent
+    &::-ms-fill
+      animation-name: none
+
+  // Sizes
+  &.is-small
+    height: $size-small
+  &.is-medium
+    height: $size-medium
+  &.is-large
+    height: $size-large
+
+@keyframes moveIndeterminate
+  from
+    background-position: 200% 0
+  to
+    background-position: -200% 0

styles/bulma/sass/elements/table.sass

@@ -0,0 +1,134 @@
+@import "../utilities/mixins"
+
+$table-color: $text-strong !default
+$table-background-color: $scheme-main !default
+
+$table-cell-border: 1px solid $border !default
+$table-cell-border-width: 0 0 1px !default
+$table-cell-padding: 0.5em 0.75em !default
+$table-cell-heading-color: $text-strong !default
+$table-cell-text-align: left !default
+
+$table-head-cell-border-width: 0 0 2px !default
+$table-head-cell-color: $text-strong !default
+$table-foot-cell-border-width: 2px 0 0 !default
+$table-foot-cell-color: $text-strong !default
+
+$table-head-background-color: transparent !default
+$table-body-background-color: transparent !default
+$table-foot-background-color: transparent !default
+
+$table-row-hover-background-color: $scheme-main-bis !default
+
+$table-row-active-background-color: $primary !default
+$table-row-active-color: $primary-invert !default
+
+$table-striped-row-even-background-color: $scheme-main-bis !default
+$table-striped-row-even-hover-background-color: $scheme-main-ter !default
+
+$table-colors: $colors !default
+
+.table
+  @extend %block
+  background-color: $table-background-color
+  color: $table-color
+  td,
+  th
+    border: $table-cell-border
+    border-width: $table-cell-border-width
+    padding: $table-cell-padding
+    vertical-align: top
+    // Colors
+    @each $name, $pair in $table-colors
+      $color: nth($pair, 1)
+      $color-invert: nth($pair, 2)
+      &.is-#{$name}
+        background-color: $color
+        border-color: $color
+        color: $color-invert
+    // Modifiers
+    &.is-narrow
+      white-space: nowrap
+      width: 1%
+    &.is-selected
+      background-color: $table-row-active-background-color
+      color: $table-row-active-color
+      a,
+      strong
+        color: currentColor
+    &.is-vcentered
+      vertical-align: middle
+  th
+    color: $table-cell-heading-color
+    &:not([align])
+      text-align: $table-cell-text-align
+  tr
+    &.is-selected
+      background-color: $table-row-active-background-color
+      color: $table-row-active-color
+      a,
+      strong
+        color: currentColor
+      td,
+      th
+        border-color: $table-row-active-color
+        color: currentColor
+  thead
+    background-color: $table-head-background-color
+    td,
+    th
+      border-width: $table-head-cell-border-width
+      color: $table-head-cell-color
+  tfoot
+    background-color: $table-foot-background-color
+    td,
+    th
+      border-width: $table-foot-cell-border-width
+      color: $table-foot-cell-color
+  tbody
+    background-color: $table-body-background-color
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 0
+  // Modifiers
+  &.is-bordered
+    td,
+    th
+      border-width: 1px
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 1px
+  &.is-fullwidth
+    width: 100%
+  &.is-hoverable
+    tbody
+      tr:not(.is-selected)
+        &:hover
+          background-color: $table-row-hover-background-color
+    &.is-striped
+      tbody
+        tr:not(.is-selected)
+          &:hover
+            background-color: $table-row-hover-background-color
+            &:nth-child(even)
+              background-color: $table-striped-row-even-hover-background-color
+  &.is-narrow
+    td,
+    th
+      padding: 0.25em 0.5em
+  &.is-striped
+    tbody
+      tr:not(.is-selected)
+        &:nth-child(even)
+          background-color: $table-striped-row-even-background-color
+
+.table-container
+  @extend %block
+  +overflow-touch
+  overflow: auto
+  overflow-y: hidden
+  max-width: 100%

styles/bulma/sass/elements/tag.sass

@@ -0,0 +1,140 @@
+@import "../utilities/mixins"
+
+$tag-background-color: $background !default
+$tag-color: $text !default
+$tag-radius: $radius !default
+$tag-delete-margin: 1px !default
+
+$tag-colors: $colors !default
+
+.tags
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  .tag
+    margin-bottom: 0.5rem
+    &:not(:last-child)
+      +ltr-property("margin", 0.5rem)
+  &:last-child
+    margin-bottom: -0.5rem
+  &:not(:last-child)
+    margin-bottom: 1rem
+  // Sizes
+  &.are-medium
+    .tag:not(.is-normal):not(.is-large)
+      font-size: $size-normal
+  &.are-large
+    .tag:not(.is-normal):not(.is-medium)
+      font-size: $size-medium
+  &.is-centered
+    justify-content: center
+    .tag
+      margin-right: 0.25rem
+      margin-left: 0.25rem
+  &.is-right
+    justify-content: flex-end
+    .tag
+      &:not(:first-child)
+        margin-left: 0.5rem
+      &:not(:last-child)
+        margin-right: 0
+  &.has-addons
+    .tag
+      +ltr-property("margin", 0)
+      &:not(:first-child)
+        +ltr-property("margin", 0, false)
+        +ltr
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
+        +rtl
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
+      &:not(:last-child)
+        +ltr
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
+        +rtl
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
+
+.tag:not(body)
+  align-items: center
+  background-color: $tag-background-color
+  border-radius: $tag-radius
+  color: $tag-color
+  display: inline-flex
+  font-size: $size-small
+  height: 2em
+  justify-content: center
+  line-height: 1.5
+  padding-left: 0.75em
+  padding-right: 0.75em
+  white-space: nowrap
+  .delete
+    +ltr-property("margin", 0.25rem, false)
+    +ltr-property("margin", -0.375rem)
+  // Colors
+  @each $name, $pair in $tag-colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      // If a light and dark colors are provided
+      @if length($pair) > 3
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark
+  // Sizes
+  &.is-normal
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-normal
+  &.is-large
+    font-size: $size-medium
+  .icon
+    &:first-child:not(:last-child)
+      +ltr-property("margin", -0.375em, false)
+      +ltr-property("margin", 0.1875em)
+    &:last-child:not(:first-child)
+      +ltr-property("margin", 0.1875em, false)
+      +ltr-property("margin", -0.375em)
+    &:first-child:last-child
+      +ltr-property("margin", -0.375em, false)
+      +ltr-property("margin", -0.375em)
+  // Modifiers
+  &.is-delete
+    +ltr-property("margin", $tag-delete-margin, false)
+    padding: 0
+    position: relative
+    width: 2em
+    &::before,
+    &::after
+      background-color: currentColor
+      content: ""
+      display: block
+      left: 50%
+      position: absolute
+      top: 50%
+      transform: translateX(-50%) translateY(-50%) rotate(45deg)
+      transform-origin: center center
+    &::before
+      height: 1px
+      width: 50%
+    &::after
+      height: 50%
+      width: 1px
+    &:hover,
+    &:focus
+      background-color: darken($tag-background-color, 5%)
+    &:active
+      background-color: darken($tag-background-color, 10%)
+  &.is-rounded
+    border-radius: $radius-rounded
+
+a.tag
+  &:hover
+    text-decoration: underline

styles/bulma/sass/elements/title.sass

@@ -0,0 +1,70 @@
+@import "../utilities/mixins"
+
+$title-color: $text-strong !default
+$title-family: false !default
+$title-size: $size-3 !default
+$title-weight: $weight-semibold !default
+$title-line-height: 1.125 !default
+$title-strong-color: inherit !default
+$title-strong-weight: inherit !default
+$title-sub-size: 0.75em !default
+$title-sup-size: 0.75em !default
+
+$subtitle-color: $text !default
+$subtitle-family: false !default
+$subtitle-size: $size-5 !default
+$subtitle-weight: $weight-normal !default
+$subtitle-line-height: 1.25 !default
+$subtitle-strong-color: $text-strong !default
+$subtitle-strong-weight: $weight-semibold !default
+$subtitle-negative-margin: -1.25rem !default
+
+.title,
+.subtitle
+  @extend %block
+  word-break: break-word
+  em,
+  span
+    font-weight: inherit
+  sub
+    font-size: $title-sub-size
+  sup
+    font-size: $title-sup-size
+  .tag
+    vertical-align: middle
+
+.title
+  color: $title-color
+  @if $title-family
+    font-family: $title-family
+  font-size: $title-size
+  font-weight: $title-weight
+  line-height: $title-line-height
+  strong
+    color: $title-strong-color
+    font-weight: $title-strong-weight
+  &:not(.is-spaced) + .subtitle
+    margin-top: $subtitle-negative-margin
+  // Sizes
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    &.is-#{$i}
+      font-size: $size
+
+.subtitle
+  color: $subtitle-color
+  @if $subtitle-family
+    font-family: $subtitle-family
+  font-size: $subtitle-size
+  font-weight: $subtitle-weight
+  line-height: $subtitle-line-height
+  strong
+    color: $subtitle-strong-color
+    font-weight: $subtitle-strong-weight
+  &:not(.is-spaced) + .title
+    margin-top: $subtitle-negative-margin
+  // Sizes
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    &.is-#{$i}
+      font-size: $size

styles/bulma/sass/form/_all.sass

@@ -0,0 +1,9 @@
+/* Bulma Form */
+@charset "utf-8"
+
+@import "shared"
+@import "input-textarea"
+@import "checkbox-radio"
+@import "select"
+@import "file"
+@import "tools"

styles/bulma/sass/form/checkbox-radio.sass

@@ -0,0 +1,22 @@
+%checkbox-radio
+  cursor: pointer
+  display: inline-block
+  line-height: 1.25
+  position: relative
+  input
+    cursor: pointer
+  &:hover
+    color: $input-hover-color
+  &[disabled],
+  fieldset[disabled] &,
+  input[disabled]
+    color: $input-disabled-color
+    cursor: not-allowed
+
+.checkbox
+  @extend %checkbox-radio
+
+.radio
+  @extend %checkbox-radio
+  & + .radio
+    +ltr-property("margin", 0.5em, false)

styles/bulma/sass/form/file.sass

@@ -0,0 +1,184 @@
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $scheme-main-ter !default
+$file-cta-color: $text !default
+$file-cta-hover-color: $text-strong !default
+$file-cta-active-color: $text-strong !default
+
+$file-name-border-color: $border !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
+$file-colors: $form-colors !default
+
+.file
+  @extend %unselectable
+  align-items: stretch
+  display: flex
+  justify-content: flex-start
+  position: relative
+  // Colors
+  @each $name, $pair in $file-colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      .file-cta
+        background-color: $color
+        border-color: transparent
+        color: $color-invert
+      &:hover,
+      &.is-hovered
+        .file-cta
+          background-color: bulmaDarken($color, 2.5%)
+          border-color: transparent
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          border-color: transparent
+          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: bulmaDarken($color, 5%)
+          border-color: transparent
+          color: $color-invert
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-normal
+    font-size: $size-normal
+  &.is-medium
+    font-size: $size-medium
+    .file-icon
+      .fa
+        font-size: 21px
+  &.is-large
+    font-size: $size-large
+    .file-icon
+      .fa
+        font-size: 28px
+  // Modifiers
+  &.has-name
+    .file-cta
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+    .file-name
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+    &.is-empty
+      .file-cta
+        border-radius: $file-radius
+      .file-name
+        display: none
+  &.is-boxed
+    .file-label
+      flex-direction: column
+    .file-cta
+      flex-direction: column
+      height: auto
+      padding: 1em 3em
+    .file-name
+      border-width: 0 1px 1px
+    .file-icon
+      height: 1.5em
+      width: 1.5em
+      .fa
+        font-size: 21px
+    &.is-small
+      .file-icon .fa
+        font-size: 14px
+    &.is-medium
+      .file-icon .fa
+        font-size: 28px
+    &.is-large
+      .file-icon .fa
+        font-size: 35px
+    &.has-name
+      .file-cta
+        border-radius: $file-radius $file-radius 0 0
+      .file-name
+        border-radius: 0 0 $file-radius $file-radius
+        border-width: 0 1px 1px
+  &.is-centered
+    justify-content: center
+  &.is-fullwidth
+    .file-label
+      width: 100%
+    .file-name
+      flex-grow: 1
+      max-width: none
+  &.is-right
+    justify-content: flex-end
+    .file-cta
+      border-radius: 0 $file-radius $file-radius 0
+    .file-name
+      border-radius: $file-radius 0 0 $file-radius
+      border-width: 1px 0 1px 1px
+      order: -1
+
+.file-label
+  align-items: stretch
+  display: flex
+  cursor: pointer
+  justify-content: flex-start
+  overflow: hidden
+  position: relative
+  &:hover
+    .file-cta
+      background-color: bulmaDarken($file-cta-background-color, 2.5%)
+      color: $file-cta-hover-color
+    .file-name
+      border-color: bulmaDarken($file-name-border-color, 2.5%)
+  &:active
+    .file-cta
+      background-color: bulmaDarken($file-cta-background-color, 5%)
+      color: $file-cta-active-color
+    .file-name
+      border-color: bulmaDarken($file-name-border-color, 5%)
+
+.file-input
+  height: 100%
+  left: 0
+  opacity: 0
+  outline: none
+  position: absolute
+  top: 0
+  width: 100%
+
+.file-cta,
+.file-name
+  @extend %control
+  border-color: $file-border-color
+  border-radius: $file-radius
+  font-size: 1em
+  padding-left: 1em
+  padding-right: 1em
+  white-space: nowrap
+
+.file-cta
+  background-color: $file-cta-background-color
+  color: $file-cta-color
+
+.file-name
+  border-color: $file-name-border-color
+  border-style: $file-name-border-style
+  border-width: $file-name-border-width
+  display: block
+  max-width: $file-name-max-width
+  overflow: hidden
+  text-align: inherit
+  text-overflow: ellipsis
+
+.file-icon
+  align-items: center
+  display: flex
+  height: 1em
+  justify-content: center
+  +ltr-property("margin", 0.5em)
+  width: 1em
+  .fa
+    font-size: 14px

styles/bulma/sass/form/input-textarea.sass

@@ -0,0 +1,66 @@
+$textarea-padding: $control-padding-horizontal !default
+$textarea-max-height: 40em !default
+$textarea-min-height: 8em !default
+
+$textarea-colors: $form-colors !default
+
+%input-textarea
+  @extend %input
+  box-shadow: $input-shadow
+  max-width: 100%
+  width: 100%
+  &[readonly]
+    box-shadow: none
+  // Colors
+  @each $name, $pair in $textarea-colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      border-color: $color
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
+  // Sizes
+  &.is-small
+    +control-small
+  &.is-medium
+    +control-medium
+  &.is-large
+    +control-large
+  // Modifiers
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-inline
+    display: inline
+    width: auto
+
+.input
+  @extend %input-textarea
+  &.is-rounded
+    border-radius: $radius-rounded
+    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
+    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
+  &.is-static
+    background-color: transparent
+    border-color: transparent
+    box-shadow: none
+    padding-left: 0
+    padding-right: 0
+
+.textarea
+  @extend %input-textarea
+  display: block
+  max-width: 100%
+  min-width: 100%
+  padding: $textarea-padding
+  resize: vertical
+  &:not([rows])
+    max-height: $textarea-max-height
+    min-height: $textarea-min-height
+  &[rows]
+    height: initial
+  // Modifiers
+  &.has-fixed-size
+    resize: none

styles/bulma/sass/form/select.sass

@@ -0,0 +1,88 @@
+$select-colors: $form-colors !default
+
+.select
+  display: inline-block
+  max-width: 100%
+  position: relative
+  vertical-align: top
+  &:not(.is-multiple)
+    height: $input-height
+  &:not(.is-multiple):not(.is-loading)
+    &::after
+      @extend %arrow
+      border-color: $input-arrow
+      +ltr-position(1.125em)
+      z-index: 4
+  &.is-rounded
+    select
+      border-radius: $radius-rounded
+      +ltr-property("padding", 1em, false)
+  select
+    @extend %input
+    cursor: pointer
+    display: block
+    font-size: 1em
+    max-width: 100%
+    outline: none
+    &::-ms-expand
+      display: none
+    &[disabled]:hover,
+    fieldset[disabled] &:hover
+      border-color: $input-disabled-border-color
+    &:not([multiple])
+      +ltr-property("padding", 2.5em)
+    &[multiple]
+      height: auto
+      padding: 0
+      option
+        padding: 0.5em 1em
+  // States
+  &:not(.is-multiple):not(.is-loading):hover
+    &::after
+      border-color: $input-hover-color
+  // Colors
+  @each $name, $pair in $select-colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &:not(:hover)::after
+        border-color: $color
+      select
+        border-color: $color
+        &:hover,
+        &.is-hovered
+          border-color: bulmaDarken($color, 5%)
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active
+          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
+  // Sizes
+  &.is-small
+    +control-small
+  &.is-medium
+    +control-medium
+  &.is-large
+    +control-large
+  // Modifiers
+  &.is-disabled
+    &::after
+      border-color: $input-disabled-color !important
+      opacity: 0.5
+  &.is-fullwidth
+    width: 100%
+    select
+      width: 100%
+  &.is-loading
+    &::after
+      @extend %loader
+      margin-top: 0
+      position: absolute
+      +ltr-position(0.625em)
+      top: 0.625em
+      transform: none
+    &.is-small:after
+      font-size: $size-small
+    &.is-medium:after
+      font-size: $size-medium
+    &.is-large:after
+      font-size: $size-large

styles/bulma/sass/form/shared.sass

@@ -0,0 +1,60 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
+$form-colors: $colors !default
+
+$input-color: $text-strong !default
+$input-background-color: $scheme-main !default
+$input-border-color: $border !default
+$input-height: $control-height !default
+$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
+
+$input-hover-color: $text-strong !default
+$input-hover-border-color: $border-hover !default
+
+$input-focus-color: $text-strong !default
+$input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
+
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
+$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $border !default
+$input-icon-active-color: $text !default
+
+$input-radius: $radius !default
+
+=input
+  @extend %control
+  background-color: $input-background-color
+  border-color: $input-border-color
+  border-radius: $input-radius
+  color: $input-color
+  +placeholder
+    color: $input-placeholder-color
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border-color
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border-color
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+  &[disabled],
+  fieldset[disabled] &
+    background-color: $input-disabled-background-color
+    border-color: $input-disabled-border-color
+    box-shadow: none
+    color: $input-disabled-color
+    +placeholder
+      color: $input-disabled-placeholder-color
+
+%input
+  +input

styles/bulma/sass/form/tools.sass

@@ -0,0 +1,215 @@
+$label-color: $text-strong !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+$label-colors: $form-colors !default
+
+.label
+  color: $label-color
+  display: block
+  font-size: $size-normal
+  font-weight: $label-weight
+  &:not(:last-child)
+    margin-bottom: 0.5em
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+
+.help
+  display: block
+  font-size: $help-size
+  margin-top: 0.25rem
+  @each $name, $pair in $label-colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      color: $color
+
+// Containers
+
+.field
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+  // Modifiers
+  &.has-addons
+    display: flex
+    justify-content: flex-start
+    .control
+      &:not(:last-child)
+        +ltr-property("margin", -1px)
+      &:not(:first-child):not(:last-child)
+        .button,
+        .input,
+        .select select
+          border-radius: 0
+      &:first-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          +ltr
+            border-bottom-right-radius: 0
+            border-top-right-radius: 0
+          +rtl
+            border-bottom-left-radius: 0
+            border-top-left-radius: 0
+      &:last-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          +ltr
+            border-bottom-left-radius: 0
+            border-top-left-radius: 0
+          +rtl
+            border-bottom-right-radius: 0
+            border-top-right-radius: 0
+      .button,
+      .input,
+      .select select
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.has-addons-centered
+      justify-content: center
+    &.has-addons-right
+      justify-content: flex-end
+    &.has-addons-fullwidth
+      .control
+        flex-grow: 1
+        flex-shrink: 0
+  &.is-grouped
+    display: flex
+    justify-content: flex-start
+    & > .control
+      flex-shrink: 0
+      &:not(:last-child)
+        margin-bottom: 0
+        +ltr-property("margin", 0.75rem)
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
+    &.is-grouped-multiline
+      flex-wrap: wrap
+      & > .control
+        &:last-child,
+        &:not(:last-child)
+          margin-bottom: 0.75rem
+      &:last-child
+        margin-bottom: -0.75rem
+      &:not(:last-child)
+        margin-bottom: 0
+  &.is-horizontal
+    +tablet
+      display: flex
+
+.field-label
+  .label
+    font-size: inherit
+  +mobile
+    margin-bottom: 0.5rem
+  +tablet
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 0
+    +ltr-property("margin", 1.5rem)
+    text-align: right
+    &.is-small
+      font-size: $size-small
+      padding-top: 0.375em
+    &.is-normal
+      padding-top: 0.375em
+    &.is-medium
+      font-size: $size-medium
+      padding-top: 0.375em
+    &.is-large
+      font-size: $size-large
+      padding-top: 0.375em
+
+.field-body
+  .field .field
+    margin-bottom: 0
+  +tablet
+    display: flex
+    flex-basis: 0
+    flex-grow: 5
+    flex-shrink: 1
+    .field
+      margin-bottom: 0
+    & > .field
+      flex-shrink: 1
+      &:not(.is-narrow)
+        flex-grow: 1
+      &:not(:last-child)
+        +ltr-property("margin", 0.75rem)
+
+.control
+  box-sizing: border-box
+  clear: both
+  font-size: $size-normal
+  position: relative
+  text-align: inherit
+  // Modifiers
+  &.has-icons-left,
+  &.has-icons-right
+    .input,
+    .select
+      &:focus
+        & ~ .icon
+          color: $input-icon-active-color
+      &.is-small ~ .icon
+        font-size: $size-small
+      &.is-medium ~ .icon
+        font-size: $size-medium
+      &.is-large ~ .icon
+        font-size: $size-large
+    .icon
+      color: $input-icon-color
+      height: $input-height
+      pointer-events: none
+      position: absolute
+      top: 0
+      width: $input-height
+      z-index: 4
+  &.has-icons-left
+    .input,
+    .select select
+      padding-left: $input-height
+    .icon.is-left
+      left: 0
+  &.has-icons-right
+    .input,
+    .select select
+      padding-right: $input-height
+    .icon.is-right
+      right: 0
+  &.is-loading
+    &::after
+      @extend %loader
+      position: absolute !important
+      +ltr-position(0.625em)
+      top: 0.625em
+      z-index: 4
+    &.is-small:after
+      font-size: $size-small
+    &.is-medium:after
+      font-size: $size-medium
+    &.is-large:after
+      font-size: $size-large

styles/bulma/sass/grid/_all.sass

@@ -0,0 +1,5 @@
+/* Bulma Grid */
+@charset "utf-8"
+
+@import "columns"
+@import "tiles"

styles/bulma/sass/grid/columns.sass

@@ -0,0 +1,513 @@
+@import "../utilities/mixins"
+
+$column-gap: 0.75rem !default
+
+.column
+  display: block
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
+  padding: $column-gap
+  .columns.is-mobile > &.is-narrow
+    flex: none
+    width: unset
+  .columns.is-mobile > &.is-full
+    flex: none
+    width: 100%
+  .columns.is-mobile > &.is-three-quarters
+    flex: none
+    width: 75%
+  .columns.is-mobile > &.is-two-thirds
+    flex: none
+    width: 66.6666%
+  .columns.is-mobile > &.is-half
+    flex: none
+    width: 50%
+  .columns.is-mobile > &.is-one-third
+    flex: none
+    width: 33.3333%
+  .columns.is-mobile > &.is-one-quarter
+    flex: none
+    width: 25%
+  .columns.is-mobile > &.is-one-fifth
+    flex: none
+    width: 20%
+  .columns.is-mobile > &.is-two-fifths
+    flex: none
+    width: 40%
+  .columns.is-mobile > &.is-three-fifths
+    flex: none
+    width: 60%
+  .columns.is-mobile > &.is-four-fifths
+    flex: none
+    width: 80%
+  .columns.is-mobile > &.is-offset-three-quarters
+    +ltr-property("margin", 75%, false)
+  .columns.is-mobile > &.is-offset-two-thirds
+    +ltr-property("margin", 66.6666%, false)
+  .columns.is-mobile > &.is-offset-half
+    +ltr-property("margin", 50%, false)
+  .columns.is-mobile > &.is-offset-one-third
+    +ltr-property("margin", 33.3333%, false)
+  .columns.is-mobile > &.is-offset-one-quarter
+    +ltr-property("margin", 25%, false)
+  .columns.is-mobile > &.is-offset-one-fifth
+    +ltr-property("margin", 20%, false)
+  .columns.is-mobile > &.is-offset-two-fifths
+    +ltr-property("margin", 40%, false)
+  .columns.is-mobile > &.is-offset-three-fifths
+    +ltr-property("margin", 60%, false)
+  .columns.is-mobile > &.is-offset-four-fifths
+    +ltr-property("margin", 80%, false)
+  @for $i from 0 through 12
+    .columns.is-mobile > &.is-#{$i}
+      flex: none
+      width: percentage(divide($i, 12))
+    .columns.is-mobile > &.is-offset-#{$i}
+      +ltr-property("margin", percentage(divide($i, 12)), false)
+  +mobile
+    &.is-narrow-mobile
+      flex: none
+      width: unset
+    &.is-full-mobile
+      flex: none
+      width: 100%
+    &.is-three-quarters-mobile
+      flex: none
+      width: 75%
+    &.is-two-thirds-mobile
+      flex: none
+      width: 66.6666%
+    &.is-half-mobile
+      flex: none
+      width: 50%
+    &.is-one-third-mobile
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-mobile
+      flex: none
+      width: 25%
+    &.is-one-fifth-mobile
+      flex: none
+      width: 20%
+    &.is-two-fifths-mobile
+      flex: none
+      width: 40%
+    &.is-three-fifths-mobile
+      flex: none
+      width: 60%
+    &.is-four-fifths-mobile
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters-mobile
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds-mobile
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half-mobile
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third-mobile
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter-mobile
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth-mobile
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths-mobile
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths-mobile
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths-mobile
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i}-mobile
+        flex: none
+        width: percentage(divide($i, 12))
+      &.is-offset-#{$i}-mobile
+        +ltr-property("margin", percentage(divide($i, 12)), false)
+  +tablet
+    &.is-narrow,
+    &.is-narrow-tablet
+      flex: none
+      width: unset
+    &.is-full,
+    &.is-full-tablet
+      flex: none
+      width: 100%
+    &.is-three-quarters,
+    &.is-three-quarters-tablet
+      flex: none
+      width: 75%
+    &.is-two-thirds,
+    &.is-two-thirds-tablet
+      flex: none
+      width: 66.6666%
+    &.is-half,
+    &.is-half-tablet
+      flex: none
+      width: 50%
+    &.is-one-third,
+    &.is-one-third-tablet
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter,
+    &.is-one-quarter-tablet
+      flex: none
+      width: 25%
+    &.is-one-fifth,
+    &.is-one-fifth-tablet
+      flex: none
+      width: 20%
+    &.is-two-fifths,
+    &.is-two-fifths-tablet
+      flex: none
+      width: 40%
+    &.is-three-fifths,
+    &.is-three-fifths-tablet
+      flex: none
+      width: 60%
+    &.is-four-fifths,
+    &.is-four-fifths-tablet
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters,
+    &.is-offset-three-quarters-tablet
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds,
+    &.is-offset-two-thirds-tablet
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half,
+    &.is-offset-half-tablet
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third,
+    &.is-offset-one-third-tablet
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter,
+    &.is-offset-one-quarter-tablet
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth,
+    &.is-offset-one-fifth-tablet
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths,
+    &.is-offset-two-fifths-tablet
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths,
+    &.is-offset-three-fifths-tablet
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths,
+    &.is-offset-four-fifths-tablet
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i},
+      &.is-#{$i}-tablet
+        flex: none
+        width: percentage(divide($i, 12))
+      &.is-offset-#{$i},
+      &.is-offset-#{$i}-tablet
+        +ltr-property("margin", percentage(divide($i, 12)), false)
+  +touch
+    &.is-narrow-touch
+      flex: none
+      width: unset
+    &.is-full-touch
+      flex: none
+      width: 100%
+    &.is-three-quarters-touch
+      flex: none
+      width: 75%
+    &.is-two-thirds-touch
+      flex: none
+      width: 66.6666%
+    &.is-half-touch
+      flex: none
+      width: 50%
+    &.is-one-third-touch
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-touch
+      flex: none
+      width: 25%
+    &.is-one-fifth-touch
+      flex: none
+      width: 20%
+    &.is-two-fifths-touch
+      flex: none
+      width: 40%
+    &.is-three-fifths-touch
+      flex: none
+      width: 60%
+    &.is-four-fifths-touch
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters-touch
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds-touch
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half-touch
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third-touch
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter-touch
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth-touch
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths-touch
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths-touch
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths-touch
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i}-touch
+        flex: none
+        width: percentage(divide($i, 12))
+      &.is-offset-#{$i}-touch
+        +ltr-property("margin", percentage(divide($i, 12)), false)
+  +desktop
+    &.is-narrow-desktop
+      flex: none
+      width: unset
+    &.is-full-desktop
+      flex: none
+      width: 100%
+    &.is-three-quarters-desktop
+      flex: none
+      width: 75%
+    &.is-two-thirds-desktop
+      flex: none
+      width: 66.6666%
+    &.is-half-desktop
+      flex: none
+      width: 50%
+    &.is-one-third-desktop
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-desktop
+      flex: none
+      width: 25%
+    &.is-one-fifth-desktop
+      flex: none
+      width: 20%
+    &.is-two-fifths-desktop
+      flex: none
+      width: 40%
+    &.is-three-fifths-desktop
+      flex: none
+      width: 60%
+    &.is-four-fifths-desktop
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters-desktop
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds-desktop
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half-desktop
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third-desktop
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter-desktop
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth-desktop
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths-desktop
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths-desktop
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths-desktop
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i}-desktop
+        flex: none
+        width: percentage(divide($i, 12))
+      &.is-offset-#{$i}-desktop
+        +ltr-property("margin", percentage(divide($i, 12)), false)
+  +widescreen
+    &.is-narrow-widescreen
+      flex: none
+      width: unset
+    &.is-full-widescreen
+      flex: none
+      width: 100%
+    &.is-three-quarters-widescreen
+      flex: none
+      width: 75%
+    &.is-two-thirds-widescreen
+      flex: none
+      width: 66.6666%
+    &.is-half-widescreen
+      flex: none
+      width: 50%
+    &.is-one-third-widescreen
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-widescreen
+      flex: none
+      width: 25%
+    &.is-one-fifth-widescreen
+      flex: none
+      width: 20%
+    &.is-two-fifths-widescreen
+      flex: none
+      width: 40%
+    &.is-three-fifths-widescreen
+      flex: none
+      width: 60%
+    &.is-four-fifths-widescreen
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters-widescreen
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds-widescreen
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half-widescreen
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third-widescreen
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter-widescreen
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth-widescreen
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths-widescreen
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths-widescreen
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths-widescreen
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i}-widescreen
+        flex: none
+        width: percentage(divide($i, 12))
+      &.is-offset-#{$i}-widescreen
+        +ltr-property("margin", percentage(divide($i, 12)), false)
+  +fullhd
+    &.is-narrow-fullhd
+      flex: none
+      width: unset
+    &.is-full-fullhd
+      flex: none
+      width: 100%
+    &.is-three-quarters-fullhd
+      flex: none
+      width: 75%
+    &.is-two-thirds-fullhd
+      flex: none
+      width: 66.6666%
+    &.is-half-fullhd
+      flex: none
+      width: 50%
+    &.is-one-third-fullhd
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-fullhd
+      flex: none
+      width: 25%
+    &.is-one-fifth-fullhd
+      flex: none
+      width: 20%
+    &.is-two-fifths-fullhd
+      flex: none
+      width: 40%
+    &.is-three-fifths-fullhd
+      flex: none
+      width: 60%
+    &.is-four-fifths-fullhd
+      flex: none
+      width: 80%
+    &.is-offset-three-quarters-fullhd
+      +ltr-property("margin", 75%, false)
+    &.is-offset-two-thirds-fullhd
+      +ltr-property("margin", 66.6666%, false)
+    &.is-offset-half-fullhd
+      +ltr-property("margin", 50%, false)
+    &.is-offset-one-third-fullhd
+      +ltr-property("margin", 33.3333%, false)
+    &.is-offset-one-quarter-fullhd
+      +ltr-property("margin", 25%, false)
+    &.is-offset-one-fifth-fullhd
+      +ltr-property("margin", 20%, false)
+    &.is-offset-two-fifths-fullhd
+      +ltr-property("margin", 40%, false)
+    &.is-offset-three-fifths-fullhd
+      +ltr-property("margin", 60%, false)
+    &.is-offset-four-fifths-fullhd
+      +ltr-property("margin", 80%, false)
+    @for $i from 0 through 12
+      &.is-#{$i}-fullhd
+        flex: none
+        width: percentage(divide($i, 12))
+      &.is-offset-#{$i}-fullhd
+        +ltr-property("margin", percentage(divide($i, 12)), false)
+
+.columns
+  +ltr-property("margin", (-$column-gap), false)
+  +ltr-property("margin", (-$column-gap))
+  margin-top: (-$column-gap)
+  &:last-child
+    margin-bottom: (-$column-gap)
+  &:not(:last-child)
+    margin-bottom: calc(1.5rem - #{$column-gap})
+  // Modifiers
+  &.is-centered
+    justify-content: center
+  &.is-gapless
+    +ltr-property("margin", 0, false)
+    +ltr-property("margin", 0)
+    margin-top: 0
+    & > .column
+      margin: 0
+      padding: 0 !important
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+    &:last-child
+      margin-bottom: 0
+  &.is-mobile
+    display: flex
+  &.is-multiline
+    flex-wrap: wrap
+  &.is-vcentered
+    align-items: center
+  // Responsiveness
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    // Modifiers
+    &.is-desktop
+      display: flex
+
+@if $variable-columns
+  .columns.is-variable
+    --columnGap: 0.75rem
+    +ltr-property("margin", calc(-1 * var(--columnGap)), false)
+    +ltr-property("margin", calc(-1 * var(--columnGap)))
+    > .column
+      padding-left: var(--columnGap)
+      padding-right: var(--columnGap)
+    @for $i from 0 through 8
+      &.is-#{$i}
+        --columnGap: #{$i * 0.25rem}
+      +mobile
+        &.is-#{$i}-mobile
+          --columnGap: #{$i * 0.25rem}
+      +tablet
+        &.is-#{$i}-tablet
+          --columnGap: #{$i * 0.25rem}
+      +tablet-only
+        &.is-#{$i}-tablet-only
+          --columnGap: #{$i * 0.25rem}
+      +touch
+        &.is-#{$i}-touch
+          --columnGap: #{$i * 0.25rem}
+      +desktop
+        &.is-#{$i}-desktop
+          --columnGap: #{$i * 0.25rem}
+      +desktop-only
+        &.is-#{$i}-desktop-only
+          --columnGap: #{$i * 0.25rem}
+      +widescreen
+        &.is-#{$i}-widescreen
+          --columnGap: #{$i * 0.25rem}
+      +widescreen-only
+        &.is-#{$i}-widescreen-only
+          --columnGap: #{$i * 0.25rem}
+      +fullhd
+        &.is-#{$i}-fullhd
+          --columnGap: #{$i * 0.25rem}

styles/bulma/sass/grid/tiles.sass

@@ -0,0 +1,36 @@
+@import "../utilities/mixins"
+
+$tile-spacing: 0.75rem !default
+
+.tile
+  align-items: stretch
+  display: block
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
+  min-height: min-content
+  // Modifiers
+  &.is-ancestor
+    margin-left: $tile-spacing * -1
+    margin-right: $tile-spacing * -1
+    margin-top: $tile-spacing * -1
+    &:last-child
+      margin-bottom: $tile-spacing * -1
+    &:not(:last-child)
+      margin-bottom: $tile-spacing
+  &.is-child
+    margin: 0 !important
+  &.is-parent
+    padding: $tile-spacing
+  &.is-vertical
+    flex-direction: column
+    & > .tile.is-child:not(:last-child)
+      margin-bottom: 1.5rem !important
+  // Responsiveness
+  +tablet
+    &:not(.is-child)
+      display: flex
+    @for $i from 1 through 12
+      &.is-#{$i}
+        flex: none
+        width: (divide($i, 12)) * 100%

styles/bulma/sass/helpers/_all.sass

@@ -0,0 +1,12 @@
+/* Bulma Helpers */
+@charset "utf-8"
+
+@import "color"
+@import "flexbox"
+@import "float"
+@import "other"
+@import "overflow"
+@import "position"
+@import "spacing"
+@import "typography"
+@import "visibility"

styles/bulma/sass/helpers/color.sass

@@ -0,0 +1,39 @@
+@import "../utilities/derived-variables"
+
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  .has-text-#{$name}
+    color: $color !important
+  a.has-text-#{$name}
+    &:hover,
+    &:focus
+      color: bulmaDarken($color, 10%) !important
+  .has-background-#{$name}
+    background-color: $color !important
+  @if length($pair) >= 4
+    $color-light: nth($pair, 3)
+    $color-dark: nth($pair, 4)
+    // Light
+    .has-text-#{$name}-light
+      color: $color-light !important
+    a.has-text-#{$name}-light
+      &:hover,
+      &:focus
+        color: bulmaDarken($color-light, 10%) !important
+    .has-background-#{$name}-light
+      background-color: $color-light !important
+    // Dark
+    .has-text-#{$name}-dark
+      color: $color-dark !important
+    a.has-text-#{$name}-dark
+      &:hover,
+      &:focus
+        color: bulmaLighten($color-dark, 10%) !important
+    .has-background-#{$name}-dark
+      background-color: $color-dark !important
+
+@each $name, $shade in $shades
+  .has-text-#{$name}
+    color: $shade !important
+  .has-background-#{$name}
+    background-color: $shade !important

styles/bulma/sass/helpers/flexbox.sass

@@ -0,0 +1,35 @@
+$flex-direction-values: row, row-reverse, column, column-reverse
+@each $value in $flex-direction-values
+  .is-flex-direction-#{$value}
+    flex-direction: $value !important
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse
+@each $value in $flex-wrap-values
+  .is-flex-wrap-#{$value}
+    flex-wrap: $value !important
+
+$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
+@each $value in $justify-content-values
+  .is-justify-content-#{$value}
+    justify-content: $value !important
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
+@each $value in $align-content-values
+  .is-align-content-#{$value}
+    align-content: $value !important
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
+@each $value in $align-items-values
+  .is-align-items-#{$value}
+    align-items: $value !important
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
+@each $value in $align-self-values
+  .is-align-self-#{$value}
+    align-self: $value !important
+
+$flex-operators: grow, shrink
+@each $operator in $flex-operators
+  @for $i from 0 through 5
+    .is-flex-#{$operator}-#{$i}
+      flex-#{$operator}: $i !important

styles/bulma/sass/helpers/float.sass

@@ -0,0 +1,10 @@
+@import "../utilities/mixins"
+
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left !important
+
+.is-pulled-right
+  float: right !important

styles/bulma/sass/helpers/other.sass

@@ -0,0 +1,14 @@
+@import "../utilities/mixins"
+
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
+.is-clickable
+  cursor: pointer !important
+  pointer-events: all !important
+
+.is-unselectable
+  @extend %unselectable

styles/bulma/sass/helpers/overflow.sass

@@ -0,0 +1,2 @@
+.is-clipped
+  overflow: hidden !important

styles/bulma/sass/helpers/position.sass

@@ -0,0 +1,7 @@
+@import "../utilities/mixins"
+
+.is-overlay
+  @extend %overlay
+
+.is-relative
+  position: relative !important

styles/bulma/sass/helpers/spacing.sass

@@ -0,0 +1,31 @@
+.is-marginless
+  margin: 0 !important
+
+.is-paddingless
+  padding: 0 !important
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
+$spacing-horizontal: "x" !default
+$spacing-vertical: "y" !default
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
+
+@each $property, $shortcut in $spacing-shortcuts
+  @each $name, $value in $spacing-values
+    // All directions
+    .#{$shortcut}-#{$name}
+      #{$property}: $value !important
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions
+      .#{$shortcut}#{$suffix}-#{$name}
+        #{$property}-#{$direction}: $value !important
+    // Horizontal axis
+    @if $spacing-horizontal != null
+      .#{$shortcut}#{$spacing-horizontal}-#{$name}
+        #{$property}-left: $value !important
+        #{$property}-right: $value !important
+    // Vertical axis
+    @if $spacing-vertical != null
+      .#{$shortcut}#{$spacing-vertical}-#{$name}
+        #{$property}-top: $value !important
+        #{$property}-bottom: $value !important

styles/bulma/sass/helpers/typography.sass

@@ -0,0 +1,103 @@
+@import "../utilities/mixins"
+
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+      font-size: $size !important
+
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
+
+.is-capitalized
+  text-transform: capitalize !important
+
+.is-lowercase
+  text-transform: lowercase !important
+
+.is-uppercase
+  text-transform: uppercase !important
+
+.is-italic
+  font-style: italic !important
+  
+.is-underlined
+  text-decoration: underline !important
+
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-medium
+  font-weight: $weight-medium !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important

styles/bulma/sass/helpers/visibility.sass

@@ -0,0 +1,122 @@
+@import "../utilities/mixins"
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
+.is-hidden
+  display: none !important
+
+.is-sr-only
+  border: none !important
+  clip: rect(0, 0, 0, 0) !important
+  height: 0.01em !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  white-space: nowrap !important
+  width: 0.01em !important
+
++mobile
+  .is-hidden-mobile
+    display: none !important
+
++tablet
+  .is-hidden-tablet
+    display: none !important
+
++tablet-only
+  .is-hidden-tablet-only
+    display: none !important
+
++touch
+  .is-hidden-touch
+    display: none !important
+
++desktop
+  .is-hidden-desktop
+    display: none !important
+
++desktop-only
+  .is-hidden-desktop-only
+    display: none !important
+
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
+.is-invisible
+  visibility: hidden !important
+
++mobile
+  .is-invisible-mobile
+    visibility: hidden !important
+
++tablet
+  .is-invisible-tablet
+    visibility: hidden !important
+
++tablet-only
+  .is-invisible-tablet-only
+    visibility: hidden !important
+
++touch
+  .is-invisible-touch
+    visibility: hidden !important
+
++desktop
+  .is-invisible-desktop
+    visibility: hidden !important
+
++desktop-only
+  .is-invisible-desktop-only
+    visibility: hidden !important
+
++widescreen
+  .is-invisible-widescreen
+    visibility: hidden !important
+
++widescreen-only
+  .is-invisible-widescreen-only
+    visibility: hidden !important
+
++fullhd
+  .is-invisible-fullhd
+    visibility: hidden !important

styles/bulma/sass/layout/_all.sass

@@ -0,0 +1,6 @@
+/* Bulma Layout */
+@charset "utf-8"
+
+@import "hero"
+@import "section"
+@import "footer"

styles/bulma/sass/layout/footer.sass

@@ -0,0 +1,11 @@
+@import "../utilities/derived-variables"
+
+$footer-background-color: $scheme-main-bis !default
+$footer-color: false !default
+$footer-padding: 3rem 1.5rem 6rem !default
+
+.footer
+  background-color: $footer-background-color
+  padding: $footer-padding
+  @if $footer-color
+    color: $footer-color

styles/bulma/sass/layout/hero.sass

@@ -0,0 +1,153 @@
+@import "../utilities/mixins"
+
+$hero-body-padding: 3rem 1.5rem !default
+$hero-body-padding-tablet: 3rem 3rem !default
+$hero-body-padding-small: 1.5rem !default
+$hero-body-padding-medium: 9rem 4.5rem !default
+$hero-body-padding-large: 18rem 6rem !default
+
+$hero-colors: $colors !default
+
+// Main container
+.hero
+  align-items: stretch
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  .navbar
+    background: none
+  .tabs
+    ul
+      border-bottom: none
+  // Colors
+  @each $name, $pair in $hero-colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+      strong
+        color: inherit
+      .title
+        color: $color-invert
+      .subtitle
+        color: bulmaRgba($color-invert, 0.9)
+        a:not(.button),
+        strong
+          color: $color-invert
+      .navbar-menu
+        +touch
+          background-color: $color
+      .navbar-item,
+      .navbar-link
+        color: bulmaRgba($color-invert, 0.7)
+      a.navbar-item,
+      .navbar-link
+        &:hover,
+        &.is-active
+          background-color: bulmaDarken($color, 5%)
+          color: $color-invert
+      .tabs
+        a
+          color: $color-invert
+          opacity: 0.9
+          &:hover
+            opacity: 1
+        li
+          &.is-active a
+            color: $color !important
+            opacity: 1
+        &.is-boxed,
+        &.is-toggle
+          a
+            color: $color-invert
+            &:hover
+              background-color: bulmaRgba($scheme-invert, 0.1)
+          li.is-active a
+            &,
+            &:hover
+              background-color: $color-invert
+              border-color: $color-invert
+              color: $color
+      // Modifiers
+      @if type-of($color) == 'color'
+        &.is-bold
+          $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
+          $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
+          background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+          +mobile
+            .navbar-menu
+              background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+  // Sizes
+  &.is-small
+    .hero-body
+      padding: $hero-body-padding-small
+  &.is-medium
+    +tablet
+      .hero-body
+        padding: $hero-body-padding-medium
+  &.is-large
+    +tablet
+      .hero-body
+        padding: $hero-body-padding-large
+  &.is-halfheight,
+  &.is-fullheight,
+  &.is-fullheight-with-navbar
+    .hero-body
+      align-items: center
+      display: flex
+      & > .container
+        flex-grow: 1
+        flex-shrink: 1
+  &.is-halfheight
+    min-height: 50vh
+  &.is-fullheight
+    min-height: 100vh
+
+// Components
+
+.hero-video
+  @extend %overlay
+  overflow: hidden
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
+  +mobile
+    display: none
+
+.hero-buttons
+  margin-top: 1.5rem
+  // Responsiveness
+  +mobile
+    .button
+      display: flex
+      &:not(:last-child)
+        margin-bottom: 0.75rem
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      +ltr-property("margin", 1.5rem)
+
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-grow: 0
+  flex-shrink: 0
+
+.hero-body
+  flex-grow: 1
+  flex-shrink: 0
+  padding: $hero-body-padding
+  +tablet
+    padding: $hero-body-padding-tablet

styles/bulma/sass/layout/section.sass

@@ -0,0 +1,17 @@
+@import "../utilities/mixins"
+
+$section-padding: 3rem 1.5rem !default
+$section-padding-desktop: 3rem 3rem !default
+$section-padding-medium: 9rem 4.5rem !default
+$section-padding-large: 18rem 6rem !default
+
+.section
+  padding: $section-padding
+  // Responsiveness
+  +desktop
+    padding: $section-padding-desktop
+    // Sizes
+    &.is-medium
+      padding: $section-padding-medium
+    &.is-large
+      padding: $section-padding-large

styles/bulma/sass/utilities/_all.sass

@@ -0,0 +1,9 @@
+/* Bulma Utilities */
+@charset "utf-8"
+
+@import "initial-variables"
+@import "functions"
+@import "derived-variables"
+@import "mixins"
+@import "controls"
+@import "extends"

styles/bulma/sass/utilities/animations.sass

@@ -0,0 +1 @@
+@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."

styles/bulma/sass/utilities/controls.sass

@@ -0,0 +1,49 @@
+@import "derived-variables"
+
+$control-radius: $radius !default
+$control-radius-small: $radius-small !default
+
+$control-border-width: 1px !default
+
+$control-height: 2.5em !default
+$control-line-height: 1.5 !default
+
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
+
+=control
+  -moz-appearance: none
+  -webkit-appearance: none
+  align-items: center
+  border: $control-border-width solid transparent
+  border-radius: $control-radius
+  box-shadow: none
+  display: inline-flex
+  font-size: $size-normal
+  height: $control-height
+  justify-content: flex-start
+  line-height: $control-line-height
+  padding-bottom: $control-padding-vertical
+  padding-left: $control-padding-horizontal
+  padding-right: $control-padding-horizontal
+  padding-top: $control-padding-vertical
+  position: relative
+  vertical-align: top
+  // States
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    outline: none
+  &[disabled],
+  fieldset[disabled] &
+    cursor: not-allowed
+
+// The controls sizes use mixins so they can be used at different breakpoints
+=control-small
+  border-radius: $control-radius-small
+  font-size: $size-small
+=control-medium
+  font-size: $size-medium
+=control-large
+  font-size: $size-large

styles/bulma/sass/utilities/derived-variables.sass

@@ -0,0 +1,114 @@
+@import "initial-variables"
+@import "functions"
+
+$primary: $turquoise !default
+
+$info: $cyan !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
+
+$light: $white-ter !default
+$dark: $grey-darker !default
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$cyan-invert: findColorInvert($cyan) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: findColorInvert($primary) !default
+$primary-light: findLightColor($primary) !default
+$primary-dark: findDarkColor($primary) !default
+$info-invert: findColorInvert($info) !default
+$info-light: findLightColor($info) !default
+$info-dark: findDarkColor($info) !default
+$success-invert: findColorInvert($success) !default
+$success-light: findLightColor($success) !default
+$success-dark: findDarkColor($success) !default
+$warning-invert: findColorInvert($warning) !default
+$warning-light: findLightColor($warning) !default
+$warning-dark: findDarkColor($warning) !default
+$danger-invert: findColorInvert($danger) !default
+$danger-light: findLightColor($danger) !default
+$danger-dark: findDarkColor($danger) !default
+$light-invert: findColorInvert($light) !default
+$dark-invert: findColorInvert($dark) !default
+
+// General colors
+
+$scheme-main: $white !default
+$scheme-main-bis: $white-bis !default
+$scheme-main-ter: $white-ter !default
+$scheme-invert: $black !default
+$scheme-invert-bis: $black-bis !default
+$scheme-invert-ter: $black-ter !default
+
+$background: $white-ter !default
+
+$border: $grey-lighter !default
+$border-hover: $grey-light !default
+$border-light: $grey-lightest !default
+$border-light-hover: $grey-light !default
+
+// Text colors
+
+$text: $grey-dark !default
+$text-invert: findColorInvert($text) !default
+$text-light: $grey !default
+$text-strong: $grey-darker !default
+
+// Code colors
+
+$code: darken($red, 15%) !default
+$code-background: $background !default
+
+$pre: $text !default
+$pre-background: $background !default
+
+// Link colors
+
+$link: $blue !default
+$link-invert: findColorInvert($link) !default
+$link-light: findLightColor($link) !default
+$link-dark: findDarkColor($link) !default
+$link-visited: $purple !default
+
+$link-hover: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $blue !default
+
+$link-active: $grey-darker !default
+$link-active-border: $grey-dark !default
+
+// Typography
+
+$family-primary: $family-sans-serif !default
+$family-secondary: $family-sans-serif !default
+$family-code: $family-monospace !default
+
+$size-small: $size-7 !default
+$size-normal: $size-6 !default
+$size-medium: $size-5 !default
+$size-large: $size-4 !default
+
+// Effects
+
+$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+
+// Lists and maps
+$custom-colors: null !default
+$custom-shades: null !default
+
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
+
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

styles/bulma/sass/utilities/extends.sass

@@ -0,0 +1,25 @@
+@import "mixins"
+
+%control
+  +control
+
+%unselectable
+  +unselectable
+
+%arrow
+  +arrow
+
+%block
+  +block
+
+%delete
+  +delete
+
+%loader
+  +loader
+
+%overlay
+  +overlay
+
+%reset
+  +reset

styles/bulma/sass/utilities/functions.sass

@@ -0,0 +1,135 @@
+@function mergeColorMaps($bulma-colors, $custom-colors)
+  // We return at least Bulma's hard-coded colors
+  $merged-colors: $bulma-colors
+
+  // We want a map as input
+  @if type-of($custom-colors) == 'map'
+    @each $name, $components in $custom-colors
+      // The color name should be a string
+      // and the components either a single color
+      // or a colors list with at least one element
+      @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
+        $color-base: null
+        $color-invert: null
+        $color-light: null
+        $color-dark: null
+        $value: null
+
+        // The param can either be a single color
+        // or a list of 2 colors
+        @if type-of($components) == 'color'
+          $color-base: $components
+          $color-invert: findColorInvert($color-base)
+          $color-light: findLightColor($color-base)
+          $color-dark: findDarkColor($color-base)
+        @else if type-of($components) == 'list'
+          $color-base: nth($components, 1)
+          // If Invert, Light and Dark are provided
+          @if length($components) > 3
+            $color-invert: nth($components, 2)
+            $color-light: nth($components, 3)
+            $color-dark: nth($components, 4)
+            // If only Invert and Light are provided
+          @else if length($components) > 2
+            $color-invert: nth($components, 2)
+            $color-light: nth($components, 3)
+            $color-dark: findDarkColor($color-base)
+            // If only Invert is provided
+          @else
+            $color-invert: nth($components, 2)
+            $color-light: findLightColor($color-base)
+            $color-dark: findDarkColor($color-base)
+
+        $value: ($color-base, $color-invert, $color-light, $color-dark)
+
+        // We only want to merge the map if the color base is an actual color
+        @if type-of($color-base) == 'color'
+          // We merge this colors elements as map with Bulma's colors map
+          // (we can override them this way, no multiple definition for the same name)
+          // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
+          $merged-colors: map_merge($merged-colors, ($name: $value))
+
+  @return $merged-colors
+
+@function powerNumber($number, $exp)
+  $value: 1
+  @if $exp > 0
+    @for $i from 1 through $exp
+      $value: $value * $number
+  @else if $exp < 0
+    @for $i from 1 through -$exp
+      $value: divide($value, $number)
+  @return $value
+
+@function colorLuminance($color)
+  @if type-of($color) != 'color'
+    @return 0.55
+  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
+  @each $name, $value in $color-rgb
+    $adjusted: 0
+    $value: divide($value, 255)
+    @if $value < 0.03928
+      $value: divide($value, 12.92)
+    @else
+      $value: divide(($value + .055), 1.055)
+      $value: powerNumber($value, 2)
+    $color-rgb: map-merge($color-rgb, ($name: $value))
+  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
+
+@function findColorInvert($color)
+  @if (colorLuminance($color) > 0.55)
+    @return rgba(#000, 0.7)
+  @else
+    @return #fff
+
+@function findLightColor($color, $l: 96%)
+  @if type-of($color) == 'color'
+    $l: 96%
+    @if lightness($color) > 96%
+      $l: lightness($color)
+    @return change-color($color, $lightness: $l)
+  @return $background
+
+@function findDarkColor($color, $base-l: 29%)
+  @if type-of($color) == 'color'
+    $luminance: colorLuminance($color)
+    $luminance-delta: (0.53 - $luminance)
+    $target-l: round($base-l + ($luminance-delta * 53))
+    @return change-color($color, $lightness: max($base-l, $target-l))
+  @return $text-strong
+
+@function bulmaRgba($color, $alpha)
+  @if type-of($color) != 'color'
+    @return $color
+  @return rgba($color, $alpha)
+
+@function bulmaDarken($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return darken($color, $amount)
+
+@function bulmaLighten($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return lighten($color, $amount)
+
+// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
+// Replaces old slash division deprecated in Dart Sass
+@function divide($dividend, $divisor, $precision: 10)
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1)
+  $dividend: abs($dividend)
+  $divisor: abs($divisor)
+  $quotient: 0
+  $remainder: $dividend
+  @if $dividend == 0
+    @return 0
+  @if $divisor == 0
+    @error "Cannot divide by 0"
+  @if $divisor == 1
+    @return $dividend
+  @while $remainder >= $divisor
+    $quotient: $quotient + 1
+    $remainder: $remainder - $divisor
+  @if $remainder > 0 and $precision > 0
+    $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
+  @return ($quotient + $remainder) * $sign

styles/bulma/sass/utilities/initial-variables.sass

@@ -0,0 +1,79 @@
+// Colors
+
+$black:        hsl(0, 0%, 4%) !default
+$black-bis:    hsl(0, 0%, 7%) !default
+$black-ter:    hsl(0, 0%, 14%) !default
+
+$grey-darker:  hsl(0, 0%, 21%) !default
+$grey-dark:    hsl(0, 0%, 29%) !default
+$grey:         hsl(0, 0%, 48%) !default
+$grey-light:   hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+$grey-lightest: hsl(0, 0%, 93%) !default
+
+$white-ter:    hsl(0, 0%, 96%) !default
+$white-bis:    hsl(0, 0%, 98%) !default
+$white:        hsl(0, 0%, 100%) !default
+
+$orange:       hsl(14,  100%, 53%) !default
+$yellow:       hsl(44,  100%, 77%) !default
+$green:        hsl(153, 53%,  53%) !default
+$turquoise:    hsl(171, 100%, 41%) !default
+$cyan:         hsl(207, 61%,  53%) !default
+$blue:         hsl(229, 53%,  53%) !default
+$purple:       hsl(271, 100%, 71%) !default
+$red:          hsl(348, 86%, 61%) !default
+
+// Typography
+
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
+
+$size-1: 3rem !default
+$size-2: 2.5rem !default
+$size-3: 2rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 1rem !default
+$size-7: 0.75rem !default
+
+$weight-light: 300 !default
+$weight-normal: 400 !default
+$weight-medium: 500 !default
+$weight-semibold: 600 !default
+$weight-bold: 700 !default
+
+// Spacing
+
+$block-spacing: 1.5rem !default
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 4rem
+$desktop: 960px + (2 * $gap) !default
+// 1152px container + 4rem
+$widescreen: 1152px + (2 * $gap) !default
+$widescreen-enabled: true !default
+// 1344px container + 4rem
+$fullhd: 1344px + (2 * $gap) !default
+$fullhd-enabled: true !default
+$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default
+
+// Miscellaneous
+
+$easing: ease-out !default
+$radius-small: 2px !default
+$radius: 4px !default
+$radius-large: 6px !default
+$radius-rounded: 9999px !default
+$speed: 86ms !default
+
+// Flags
+
+$variable-columns: true !default
+$rtl: false !default

styles/bulma/sass/utilities/mixins.sass

@@ -0,0 +1,303 @@
+@import "derived-variables"
+
+=clearfix
+  &::after
+    clear: both
+    content: " "
+    display: table
+
+=center($width, $height: 0)
+  position: absolute
+  @if $height != 0
+    left: calc(50% - (#{$width} * 0.5))
+    top: calc(50% - (#{$height} * 0.5))
+  @else
+    left: calc(50% - (#{$width} * 0.5))
+    top: calc(50% - (#{$width} * 0.5))
+
+=fa($size, $dimensions)
+  display: inline-block
+  font-size: $size
+  height: $dimensions
+  line-height: $dimensions
+  text-align: center
+  vertical-align: top
+  width: $dimensions
+
+=hamburger($dimensions)
+  -moz-appearance: none
+  -webkit-appearance: none
+  appearance: none
+  background: none
+  border: none
+  cursor: pointer
+  display: block
+  height: $dimensions
+  position: relative
+  width: $dimensions
+  span
+    background-color: currentColor
+    display: block
+    height: 1px
+    left: calc(50% - 8px)
+    position: absolute
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: background-color, opacity, transform
+    transition-timing-function: $easing
+    width: 16px
+    &:nth-child(1)
+      top: calc(50% - 6px)
+    &:nth-child(2)
+      top: calc(50% - 1px)
+    &:nth-child(3)
+      top: calc(50% + 4px)
+  &:hover
+    background-color: bulmaRgba(black, 0.05)
+  // Modifers
+  &.is-active
+    span
+      &:nth-child(1)
+        transform: translateY(5px) rotate(45deg)
+      &:nth-child(2)
+        opacity: 0
+      &:nth-child(3)
+        transform: translateY(-5px) rotate(-45deg)
+
+=overflow-touch
+  -webkit-overflow-scrolling: touch
+
+=placeholder
+  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
+  @each $placeholder in $placeholders
+    &:#{$placeholder}-placeholder
+      @content
+
+=reset
+  -moz-appearance: none
+  -webkit-appearance: none
+  appearance: none
+  background: none
+  border: none
+  color: currentColor
+  font-family: inherit
+  font-size: 1em
+  margin: 0
+  padding: 0
+
+// Responsiveness
+
+=from($device)
+  @media screen and (min-width: $device)
+    @content
+
+=until($device)
+  @media screen and (max-width: $device - 1px)
+    @content
+
+=between($from, $until)
+  @media screen and (min-width: $from) and (max-width: $until - 1px)
+    @content
+
+=mobile
+  @media screen and (max-width: $tablet - 1px)
+    @content
+
+=tablet
+  @media screen and (min-width: $tablet), print
+    @content
+
+=tablet-only
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
+    @content
+
+=touch
+  @media screen and (max-width: $desktop - 1px)
+    @content
+
+=desktop
+  @media screen and (min-width: $desktop)
+    @content
+
+=desktop-only
+  @if $widescreen-enabled
+    @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+      @content
+
+=until-widescreen
+  @if $widescreen-enabled
+    @media screen and (max-width: $widescreen - 1px)
+      @content
+
+=widescreen
+  @if $widescreen-enabled
+    @media screen and (min-width: $widescreen)
+      @content
+
+=widescreen-only
+  @if $widescreen-enabled and $fullhd-enabled
+    @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+      @content
+
+=until-fullhd
+  @if $fullhd-enabled
+    @media screen and (max-width: $fullhd - 1px)
+      @content
+
+=fullhd
+  @if $fullhd-enabled
+    @media screen and (min-width: $fullhd)
+      @content
+
+=breakpoint($name)
+  $breakpoint: map-get($breakpoints, $name)
+  @if $breakpoint
+    $from: map-get($breakpoint, "from")
+    $until: map-get($breakpoint, "until")
+    @if $from and $until
+      +between($from, $until)
+        @content
+    @else if $from
+      +from($from)
+        @content
+    @else if $until
+      +until($until)
+        @content
+
+=ltr
+  @if not $rtl
+    @content
+
+=rtl
+  @if $rtl
+    @content
+
+=ltr-property($property, $spacing, $right: true)
+  $normal: if($right, "right", "left")
+  $opposite: if($right, "left", "right")
+  @if $rtl
+    #{$property}-#{$opposite}: $spacing
+  @else
+    #{$property}-#{$normal}: $spacing
+
+=ltr-position($spacing, $right: true)
+  $normal: if($right, "right", "left")
+  $opposite: if($right, "left", "right")
+  @if $rtl
+    #{$opposite}: $spacing
+  @else
+    #{$normal}: $spacing
+
+// Placeholders
+
+=unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+=arrow($color: transparent)
+  border: 3px solid $color
+  border-radius: 2px
+  border-right: 0
+  border-top: 0
+  content: " "
+  display: block
+  height: 0.625em
+  margin-top: -0.4375em
+  pointer-events: none
+  position: absolute
+  top: 50%
+  transform: rotate(-45deg)
+  transform-origin: center
+  width: 0.625em
+
+=block($spacing: $block-spacing)
+  &:not(:last-child)
+    margin-bottom: $spacing
+
+=delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: bulmaRgba($scheme-invert, 0.2)
+  border: none
+  border-radius: $radius-rounded
+  cursor: pointer
+  pointer-events: auto
+  display: inline-block
+  flex-grow: 0
+  flex-shrink: 0
+  font-size: 0
+  height: 20px
+  max-height: 20px
+  max-width: 20px
+  min-height: 20px
+  min-width: 20px
+  outline: none
+  position: relative
+  vertical-align: top
+  width: 20px
+  &::before,
+  &::after
+    background-color: $scheme-main
+    content: ""
+    display: block
+    left: 50%
+    position: absolute
+    top: 50%
+    transform: translateX(-50%) translateY(-50%) rotate(45deg)
+    transform-origin: center center
+  &::before
+    height: 2px
+    width: 50%
+  &::after
+    height: 50%
+    width: 2px
+  &:hover,
+  &:focus
+    background-color: bulmaRgba($scheme-invert, 0.3)
+  &:active
+    background-color: bulmaRgba($scheme-invert, 0.4)
+  // Sizes
+  &.is-small
+    height: 16px
+    max-height: 16px
+    max-width: 16px
+    min-height: 16px
+    min-width: 16px
+    width: 16px
+  &.is-medium
+    height: 24px
+    max-height: 24px
+    max-width: 24px
+    min-height: 24px
+    min-width: 24px
+    width: 24px
+  &.is-large
+    height: 32px
+    max-height: 32px
+    max-width: 32px
+    min-height: 32px
+    min-width: 32px
+    width: 32px
+
+=loader
+  animation: spinAround 500ms infinite linear
+  border: 2px solid $grey-lighter
+  border-radius: $radius-rounded
+  border-right-color: transparent
+  border-top-color: transparent
+  content: ""
+  display: block
+  height: 1em
+  position: relative
+  width: 1em
+
+=overlay($offset: 0)
+  bottom: $offset
+  left: $offset
+  position: absolute
+  right: $offset
+  top: $offset

styles/forge-custom.scss

@@ -0,0 +1,617 @@
+/* Tokens (--bg, --panel, --accent...) définis une seule fois dans
+   forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier
+   continue de référencer les mêmes noms de variable qu'avant la charte
+   Forge (voir les alias --bg/--panel/--panel2/--border/--text/--text-dim/
+   --danger dans forge-theme.scss), pour n'avoir à toucher qu'aux VALEURS
+   des tokens, jamais aux ~600 lignes de règles ci-dessous qui les
+   consomment déjà. */
+*{ box-sizing:border-box; }
+body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
+h1{ font-size:20px; margin:0 0 6px; }
+h2{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:24px 0 8px; }
+h3{ font-size:13px; color:var(--accent); margin:14px 0 6px; }
+label{ display:block; font-size:12px; color:var(--text-dim); margin:8px 0 4px; }
+input[type=text], input[type=number], input[type=date], textarea, select{
+  width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:6px;
+  color:var(--text); padding:8px 10px; font-size:13px; font-family:inherit;
+}
+input[type=checkbox]{ width:auto; margin-top:6px; }
+
+/* .topbar : Bulma fournit déjà la mise en page (navbar) — cette classe ne
+   sert plus qu'à la repérer dans les layouts plein-écran
+   (body.builderBody/objectEditBody, voir plus bas) et à la rattacher au
+   thème sombre. */
+.topbar{ border-bottom:1px solid var(--border); }
+
+/* Barre de navigation d'UN JEU (voir base.html) — toujours visible entre
+   les différents éditeurs d'un même jeu, en ligne (contrairement à
+   .navList/.navRow ci-dessous, empilés verticalement dans le panneau
+   "Créer" du tableau de bord). */
+.gameNavBar{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:8px 20px; background:transparent; border-bottom:1px solid var(--border); }
+.gameNavLink{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; }
+.gameNavLink:hover{ background:var(--panel2); border-color:var(--accent); }
+.gameNavLink.active{ background:var(--panel2); border-color:var(--accent); color:var(--accent); }
+.content{ max-width:760px; margin:0 auto; padding:28px 20px; }
+
+.card{ border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--panel); margin:12px 0; }
+.inline-form .fieldRow{ display:flex; gap:8px; align-items:flex-end; }
+.inline-form .fieldRow input{ flex:1; }
+.fieldRow{ display:flex; gap:10px; }
+.fieldRow > div{ flex:1; }
+.formField{ margin-bottom:6px; }
+
+button{ background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px 14px; cursor:pointer; font-size:13px; }
+/* Un <button> qui doit se comporter comme un <a> visuellement (ex. ouvrir
+   un panneau plutôt que suivre un href, mais garder l'apparence d'un lien
+   dans un tableau) — annule le style bouton par défaut ci-dessus. */
+.linkLikeButton{ background:none; border:none; padding:0; color:var(--accent); text-decoration:none; font-size:inherit; }
+.linkLikeButton:hover{ text-decoration:underline; }
+/* button.primary : couleur/dégradé posés une seule fois, centralement,
+   dans forge-theme.scss (".button.is-primary, button.primary") — pas ici,
+   pour ne pas entrer en conflit de cascade avec cette règle centrale. */
+button.smallBtn{ padding:5px 10px; font-size:11.5px; }
+button.danger{ color:var(--danger); border-color:rgba(240,68,56,.4); }
+.actionsRow{ margin-top:16px; }
+
+/* Nav compacte à une seule ligne (icône + libellé) — pour une liste
+   d'actions fixe (ex. colonne "Créer" du tableau de bord d'un jeu) : sobre
+   et dense plutôt qu'une carte à deux lignes. */
+.navList{ display:flex; flex-direction:column; gap:3px; }
+.navRow{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; }
+.navRow:hover{ background:var(--panel2); border-color:var(--accent); }
+
+.hint{ font-size:11.5px; color:var(--text-dim); line-height:1.5; }
+.autosaveStatus{ display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; }
+.autosaveStatus.saving{ color:var(--text-dim); }
+.autosaveStatus.saved{ color:var(--status-success); }
+.warningBanner{ border:1px solid var(--danger); background:rgba(240,68,56,.1); color:var(--text);
+  border-radius:8px; padding:10px 14px; font-size:12.5px; margin:12px 0; }
+.dangerZone{ border:1px solid rgba(240,68,56,.4); border-radius:8px; padding:10px 12px; margin-top:14px; }
+.dangerZone h3{ color:var(--danger); margin-top:0; }
+.fieldsExistingRow{ display:flex; align-items:center; justify-content:space-between;
+  padding:8px 10px; border:1px solid var(--border); border-radius:6px; margin-bottom:6px; font-size:12.5px; }
+.fieldsExistingRow form{ margin:0; }
+
+.fieldRowCard{ margin-bottom:10px; }
+.relationTarget{ margin-top:6px; }
+
+/* Liste de conditions de "Donnée liée" (voir c_clause_list.py) : un nombre
+   ILLIMITÉ de lignes peut s'y accumuler — sans limite de hauteur, le
+   panneau de propriétés entier deviendrait interminable à faire défiler
+   dès qu'on en pose plus de 3-4. max-height + overflow-y borne cette
+   LISTE elle-même à une hauteur confortable, le reste du panneau (et le
+   bouton "+ Ajouter une condition" juste en dessous) reste toujours à
+   portée sans avoir à chercher le bas de la liste. */
+.clauseListWrap{ max-height:260px; overflow-y:auto; padding-right:2px; }
+.clauseRow{ margin-bottom:8px; }
+.clauseRow:last-child{ margin-bottom:0; }
+
+/* .dataTable : Bulma fournit déjà la mise en page du tableau (classes
+   "table is-fullwidth is-hoverable", voir data_list.html) — ceci ne fait
+   plus que tronquer les cellules trop longues avec "...", pour garder une
+   vue d'ensemble compacte (le détail complet s'ouvre dans la modale Bulma
+   ci-dessous via le bouton 👁️). */
+.dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+/* ---------- Détail d'une entrée (bouton 👁️) ---------- */
+/* Contenu du panneau de détail (voir openRowDetailPanel() dans
+   game_dashboard.html) — affiche chaque champ en entier, sans troncature,
+   contrairement au tableau dense qui les tronque. */
+.rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); }
+.rowDetailField:last-child{ border-bottom:none; }
+.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
+.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
+
+.content-wide{ max-width:1080px; }
+.twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; }
+.twoCol .colLeft{ flex:0 0 340px; }
+.twoCol .colRight{ flex:1; min-width:0; }
+@media (max-width: 820px){
+  .twoCol{ flex-direction:column; }
+  .twoCol .colLeft{ flex:none; width:100%; }
+  /* En dessous de 820px, les deux colonnes s'empilent : le défilement
+     interne séparé par colonne n'a plus de sens (il n'y a plus qu'une
+     colonne) — on revient à une page classique qui défile normalement,
+     comme pour l'éditeur d'écran ci-dessous. */
+  body.objectEditBody{ height:auto; overflow:visible; }
+  body.objectEditBody > main.content{ overflow:visible; }
+  .content-objectEdit .colLeft, .content-objectEdit .colRight{ height:auto; overflow:visible; }
+  .fieldsTableWrap{ max-height:60vh; }
+}
+
+/* ---------- Modifier un objet : tableau des champs existants ---------- */
+/* Comme l'éditeur d'écran (body.builderBody, plus bas) : la page ne défile
+   jamais elle-même, seules les zones internes (colonne de gauche, tableau
+   des champs) défilent chacune de leur côté — indispensable dès qu'un objet
+   a beaucoup de champs, pour garder une vue d'ensemble sans perdre le
+   formulaire "Ajouter un champ" hors de l'écran. */
+body.objectEditBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
+body.objectEditBody > #pageChrome{ flex:0 0 auto; }
+body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
+
+.content-objectEdit{ width:100%; display:flex; flex-direction:column; min-height:0; }
+.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form, .content-objectEdit > .warningBanner{ flex:0 0 auto; }
+
+/* Un <form> qui doit envelopper les DEUX colonnes à la fois (un seul
+   formulaire soumis ensemble, ex. object_form.html : nom de l'objet à
+   gauche, liste de champs à droite) ne doit pas devenir lui-même une boîte
+   dans la mise en page flex — sinon .twoCol à l'intérieur perd la hauteur
+   disponible qu'il doit occuper. "display:contents" le rend transparent :
+   .twoCol se comporte comme s'il était directement enfant de
+   .content-objectEdit. */
+.formPassthrough{ display:contents; }
+.content-objectEdit .twoCol{ flex:1 1 auto; min-height:0; align-items:stretch; }
+.content-objectEdit .colLeft{ overflow-y:auto; height:100%; }
+.content-objectEdit .colRight{ display:flex; flex-direction:column; min-height:0; height:100%; }
+.content-objectEdit .colRight h2{ flex:0 0 auto; }
+.content-objectEdit .colRight > .hint, .content-objectEdit .colRight > button{ flex:0 0 auto; }
+
+.fieldsTableWrap{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px; }
+.fieldsTable{ width:100%; border-collapse:collapse; font-size:12.5px; }
+.fieldsTable th, .fieldsTable td{ border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; white-space:nowrap; }
+.fieldsTable th{ position:sticky; top:0; background:var(--panel2); color:var(--text-dim); z-index:1; }
+.fieldsTable tbody tr:hover{ background:rgba(255,255,255,.02); }
+.fieldsTable tbody tr:last-child td{ border-bottom:none; }
+.fieldsTable td input, .fieldsTable td select{ min-width:120px; width:auto; }
+.fieldsTableActions{ display:flex; gap:6px; }
+
+/* ---------- Éditeur d'écrans (façon Elementor/Bricks) ---------- */
+/* La page de l'éditeur d'écran ne doit jamais défiler elle-même : elle
+   occupe exactement la hauteur de la fenêtre (topbar + zone de travail), et
+   ce sont les zones internes (panneaux, écran, panneau de logique) qui
+   défilent chacune de leur côté si besoin. */
+body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
+body.builderBody > #pageChrome{ flex:0 0 auto; }
+body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
+
+.content-builder{
+  /* .content (ci-dessus) pose "margin:0 auto" pour centrer une page normale
+     — mais sur cette page, le body est un flex-container en colonne
+     (body.builderBody), et une marge horizontale "auto" y désactive le
+     stretch d'un flex-item : sa largeur est alors recalculée en
+     "shrink-to-fit" à partir de son contenu, un calcul qui traverse toute
+     la chaîne flex/%/aspect-ratio jusqu'au canvas et redonne un résultat
+     légèrement différent à chaque changement de contenu du panneau (élément
+     sélectionné, grille affichée...) — d'où le canvas qui grandit/rétrécit
+     sans raison apparente à chaque interaction. "width:100%" donne une
+     taille définie à la place : la marge "auto" ne fait alors que centrer
+     l'espace restant une fois "max-width" atteint, comme voulu à l'origine. */
+  width:100%;
+  max-width:1600px;
+  /* Sans fil d'Ariane sur cette page (voir breadcrumb_wrap dans
+     screen_edit.html), .content garde quand même son padding par défaut
+     (28px en haut) — réduit ici pour que le canevas commence le plus haut
+     possible sur la page. */
+  padding:10px 20px 8px;
+}
+
+/* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) —
+   toutes les trois occupent exactement la même hauteur (celle qui reste
+   disponible), avec leur propre défilement interne si leur contenu dépasse. */
+.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:8px; flex:1 1 auto; min-height:0; }
+/* overflow:hidden (pas auto) : le défilement doit se faire DANS le
+   canevas lui-même (voir .canvasFrame plus bas) ou dans l'onglet actif
+   (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement),
+   jamais sur cette zone entière — sans quoi la barre d'onglets et la barre
+   d'outils défileraient avec le contenu au lieu de rester fixes en haut. */
+.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; }
+
+/* ---------- Panneaux gauche/droite flottants ---------- */
+/* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux
+   flex de .builder3 (position:fixed) : .builderCanvasArea (flex:1 1 auto)
+   récupère automatiquement tout l'espace libéré, sans réglage
+   supplémentaire — les fermer donne donc une prévisualisation aussi large
+   que possible, aussi fidèle que possible à ce que "Jouer" affiche
+   réellement. Position et état ouvert/fermé mémorisés par écran (voir
+   floatPanel*() dans screen_edit.html) pour survivre à un changement de
+   sélection (qui remplace tout #builder3) ou un rechargement. */
+.floatPanel{
+  position:fixed; top:90px; max-height:calc(100vh - 120px);
+  min-width:0; display:flex; flex-direction:column; z-index:60;
+  background:var(--panel); border:1px solid var(--border); border-radius:10px;
+  box-shadow:0 12px 40px rgba(0,0,0,.55);
+}
+.floatPanel.hidden{ display:none; }
+/* Coin de redimensionnement (voir wireFloatPanelResize() dans
+   game_dashboard.html) — un panneau devient redimensionnable simplement en
+   lui ajoutant ce coin, JS mis à part rien d'autre à faire côté CSS. */
+.floatPanelResizeHandle{
+  position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
+  background:linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%);
+  border-radius:0 0 10px 0;
+}
+.floatPanel--left{ left:24px; width:280px; }
+.floatPanel--right{ right:24px; width:340px; }
+.floatPanel--center{ left:50%; width:560px; max-width:calc(100vw - 48px); transform:translateX(-50%); }
+/* Plein écran (voir makeFloatPanelFullscreenable() dans game_dashboard.html)
+   — juste un repère visuel (bordure accent) sur le panneau agrandi, tout le
+   positionnement réel est posé directement en style inline par le JS (pour
+   pouvoir revenir exactement à la position/taille d'avant en sortant). */
+.floatPanel--fullscreen{ border-color:var(--accent); }
+.floatPanelHeader{
+  display:flex; align-items:center; justify-content:space-between; gap:8px;
+  padding:8px 10px; border-bottom:1px solid var(--border); background:var(--panel2);
+  border-radius:10px 10px 0 0; cursor:move; flex:0 0 auto; user-select:none;
+}
+.floatPanelHeader .floatPanelTitle{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
+.floatPanelBody{ padding:12px; overflow-y:auto; min-height:0; flex:1 1 auto; }
+.floatPanelReopenBtn{ position:fixed; top:90px; z-index:60; display:none; }
+.floatPanelReopenBtn.visible{ display:inline-flex; }
+#panelLeftReopenBtn{ left:24px; }
+#propsPanelReopenBtn{ right:24px; }
+
+.widgetGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+
+/* Icônes (widget Icône + galerie du panneau de propriétés) — SVG posé en
+   silhouette via "mask-image" plutôt qu'une police d'icônes (@font-face) :
+   se colore avec "color"/"background-color" comme du texte, MAIS ne dépend
+   d'aucun fichier de police externe — certains navigateurs/extensions
+   bloquent le chargement de polices web tierces (protection anti-
+   fingerprinting), ce qui rendait toutes les icônes Font Awesome invisibles
+   quelle que soit leur source (CDN ou même hébergées ici). Un simple SVG
+   affiché en masque n'est jamais concerné par ce blocage. Voir
+   render_icone.py (widget) et fontawesome_icons.py (liste + chemin des
+   fichiers, statiques dans static/icons/). */
+.icon-svg{
+  display:inline-block; width:1em; height:1em; flex:0 0 auto;
+  background-color:currentColor;
+  -webkit-mask-image:var(--icon-url); mask-image:var(--icon-url);
+  -webkit-mask-size:contain; mask-size:contain;
+  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
+  -webkit-mask-position:center; mask-position:center;
+}
+
+/* Galerie d'icônes (panneau de propriétés) — voir
+   fontawesome_icons.py et addIconElement()/filterIconGallery() plus bas. */
+.iconGallery{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; max-height:220px; overflow-y:auto; margin-top:8px; }
+.iconGalleryTile{
+  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
+  background:var(--panel2); border:1px solid var(--border); border-radius:6px;
+  color:var(--text); cursor:grab; padding:0;
+}
+.iconGalleryTile .icon-svg{ width:16px; height:16px; }
+.iconGalleryTile:hover{ border-color:var(--accent); color:var(--accent); }
+.iconGalleryTile.dragging{ opacity:0.4; }
+.iconGalleryTile.iconHidden{ display:none; }
+.widgetBtnForm{ margin:0; }
+.widgetBtn{
+  width:100%; display:flex; flex-direction:column; align-items:center; gap:4px;
+  padding:12px 6px; border:1px solid var(--border); border-radius:10px; background:var(--panel);
+  color:var(--text); cursor:pointer;
+}
+.widgetBtn:hover{ border-color:var(--accent); background:var(--panel2); }
+.widgetIcon{ font-size:22px; }
+.widgetLabel{ font-size:11px; text-align:center; line-height:1.2; color:var(--text-dim); }
+
+.canvasToolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
+.aspectBtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
+
+.canvasFrame{
+  /* flex:1 1 auto + min-height:0 : occupe tout l'espace restant sous la
+     barre d'outils dans .builderTabPanel (voir screen_edit.html). Le
+     canevas (voir .canvas ci-dessous) est réglé pour remplir EXACTEMENT
+     ce cadre (100% x 100%, sans respecter l'aspect-ratio Portrait/Paysage/
+     Carré dans l'éditeur — ce réglage ne sert qu'à l'aperçu jouable/"Jouer",
+     voir screen_set_aspect.py) : "prendre toute la place disponible" et
+     "garder l'aspect-ratio" sont deux exigences contradictoires dès que la
+     fenêtre n'a pas exactement ce ratio, la première l'emporte ici. C'est
+     LUI qui défile (overflow:auto) si jamais le contenu déborde malgré
+     tout — jamais .builderCanvasArea (voir plus haut), pour garder la
+     barre d'onglets/d'outils toujours visible. */
+  flex:1 1 auto; min-height:0; width:100%; padding:4px; border:1px solid var(--border); border-radius:16px; background:var(--panel);
+  display:flex; overflow:auto;
+}
+.canvas{
+  position:relative; width:100%; height:100%; flex:1 1 auto; margin:0; background:#0b0d12; border-radius:8px;
+  overflow:hidden; border:1px solid var(--border);
+}
+.canvasElement{
+  /* Pas d'overflow:hidden ici : une échelle (transform:scale) ou une
+     animation posée sur cet élément (voir la Timeline d'animation) vit sur
+     CE cadre (voir filters/element_style_filter.py) — le rogner clippait
+     l'effet à la taille d'origine de la boîte au lieu de le laisser
+     grossir/bouger avec elle. La zone de l'écran elle-même (.canvas,
+     ci-dessus) reste rognée, donc rien ne peut déborder de l'écran final. */
+  box-sizing:border-box; cursor:move; user-select:none;
+  border:1px dashed transparent;
+}
+.canvasElement:hover{ border-color:rgba(91,140,255,.5); }
+.canvasElement.selected{ border:2px solid var(--accent); }
+.canvasElementInner{ width:100%; height:100%; pointer-events:none; }
+
+/* Surbrillance de l'élément sélectionné dans l'arborescence, posée en JS sur
+   sa propre balise (voir applySelectionHighlight) — seul moyen de la voir
+   sur le canevas quand cet élément est imbriqué dans un conteneur/répéteur/
+   groupe de champs, qui n'a pas de cadre ".canvasElement" séparé comme un
+   élément posé directement sur l'écran. Un "outline" qui dépasse la boîte
+   (offset positif) se fait couper par le premier ancêtre en overflow:hidden
+   (le canevas lui-même, ou un conteneur aux coins arrondis) dès que
+   l'élément touche un de ses bords — très fréquent pour une rangée de
+   jauges collée en haut d'un conteneur. Un box-shadow EN CREUX (inset)
+   reste toujours à l'intérieur de la boîte, jamais rogné, et épouse
+   naturellement les coins arrondis de l'élément lui-même. */
+.elementHighlighted{
+  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 6px rgba(91,140,255,.2);
+}
+.resizeHandle{
+  position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize;
+  background:var(--accent); border-radius:3px 0 6px 0; opacity:.85;
+}
+
+.listRow.selected{ border-color:var(--accent); background:var(--panel2); }
+
+.childList{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px 18px; padding-left:10px; border-left:2px dashed var(--border); }
+.childRow{ padding:7px 10px; font-size:12px; }
+.childRow .rowTitle{ font-size:12px; }
+
+/* Arborescence compacte des éléments de l'écran (panneau gauche) — une
+   ligne par élément, indentation par imbrication réelle (profondeur
+   illimitée) plutôt qu'un seul niveau d'enfants comme l'ancienne .childList,
+   pour rester lisible même avec beaucoup d'éléments. */
+.elementTree{ display:flex; flex-direction:column; gap:1px; max-height:55vh; overflow-y:auto; margin-bottom:14px; }
+.treeNode{ display:flex; flex-direction:column; }
+.treeRow{ display:flex; align-items:center; gap:2px; }
+.treeToggle{
+  flex:0 0 auto; width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer;
+  color:var(--text-dim); font-size:10px; display:flex; align-items:center; justify-content:center;
+  transition:transform .12s ease;
+}
+.treeToggle:hover{ color:var(--text); }
+.treeToggleSpacer{ flex:0 0 auto; width:16px; height:16px; }
+.treeNode.collapsed > .treeRow > .treeToggle{ transform:rotate(-90deg); }
+.treeNode.collapsed > .treeChildren{ display:none; }
+.treeRowLink{
+  flex:1; display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:5px;
+  text-decoration:none; color:var(--text); font-size:12.5px; line-height:1.5;
+  white-space:nowrap; overflow:hidden; min-width:0;
+}
+.treeRowLink:hover{ background:var(--panel2); }
+.treeRowLink.selected{ background:var(--accent); color:#0b0e14; font-weight:600; }
+.treeIcon{ flex:0 0 auto; font-size:12px; }
+.treeLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.treeChildren{ display:flex; flex-direction:column; margin-left:10px; padding-left:8px; border-left:1px dashed var(--border); }
+.treeRow.dragging{ opacity:0.4; }
+.treeRow.dropBefore{ box-shadow: inset 0 2px 0 0 var(--accent); }
+.treeRow.dropAfter{ box-shadow: inset 0 -2px 0 0 var(--accent); }
+.treeRow.dropInside{ background:rgba(91,140,255,.25); box-shadow: inset 0 0 0 1px var(--accent); border-radius:4px; }
+
+.contextMenu{
+  position:fixed; z-index:500; background:var(--panel); border:1px solid var(--border);
+  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:4px; min-width:160px;
+}
+.contextMenu button{
+  display:block; width:100%; text-align:left; background:none; border:none; color:var(--text);
+  padding:7px 10px; border-radius:5px; font-size:13px; cursor:pointer;
+}
+.contextMenu button:hover{ background:var(--panel2); }
+
+/* Élément à onglets (voir render_onglets.py) : la barre d'onglets elle-même
+   est un vrai composant Bulma ("tabs" > "ul" > "li", voir render_onglets.py)
+   — il ne reste ici que les panneaux, que Bulma n'a pas de composant pour. */
+.forgeTabPanels{ min-width:0; }
+.forgeTabPanel{ padding-top:10px; }
+
+.propGroup{ border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:var(--panel); }
+.propGroup > summary{
+  list-style:none; cursor:pointer; padding:9px 12px; font-size:13px; color:var(--accent);
+  font-weight:600; user-select:none; display:flex; align-items:center; justify-content:space-between;
+}
+.propGroup > summary::-webkit-details-marker{ display:none; }
+.propGroup > summary::after{ content:"▸"; color:var(--text-dim); font-size:11px; transition:transform .15s; }
+.propGroup[open] > summary::after{ transform:rotate(90deg); }
+.propGroup > summary:hover{ background:var(--panel2); }
+.propGroupBody{ padding:2px 12px 12px; }
+.propGroupBody h3{ margin-top:0; }
+
+
+/* .posGrid/.controlRow/.sizeField/.sliderRow/.alignGroup : Bulma fournit
+   déjà la mise en page (columns/field/control/buttons has-addons, voir
+   screen_edit.html) — ce qui reste ici n'est que ce que Bulma ne fournit
+   pas nativement : l'espacement propre à un curseur (slider) et son
+   pastille de valeur affichée à côté. */
+.posGrid input:disabled{ opacity:0.4; cursor:not-allowed; }
+.sliderRow{ display:flex; align-items:center; gap:10px; }
+.sliderRow input[type=range]{ flex:1; }
+.sliderValue{ min-width:44px; text-align:right; }
+input[type=color]{ width:52px; height:34px; padding:2px; }
+
+.propsPanel .sectionDivider, .floatPanel .sectionDivider{ border:none; border-top:1px solid var(--border); margin:14px 0; }
+.actionAddForm{ margin-top:10px; }
+
+.uploadRow{ margin-top:6px; }
+.uploadInput{ font-size:11px; color:var(--text-dim); }
+.uploadStatus{ display:block; margin-top:4px; }
+code{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11.5px; }
+
+@media (max-width: 1300px){
+  /* Sous cette largeur, les 3 colonnes s'empilent : le principe "tout tient
+     dans la fenêtre, chaque zone défile pour elle-même" n'a plus de sens
+     (il n'y a plus qu'une seule colonne) — on revient à une page classique
+     qui défile normalement. */
+  body.builderBody{ height:auto; overflow:visible; }
+  body.builderBody > main.content{ overflow:visible; }
+  .builder3{ flex-direction:column; flex:none; }
+  .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
+  /* Le "letterboxing" par hauteur (voir .canvas plus haut) suppose une
+     chaîne de hauteurs définies jusqu'ici — qui n'existe plus une fois
+     .builderCanvasArea repassée en "height:auto" ci-dessus. Revient donc à
+     un dimensionnement par LARGEUR, comme une page qui défile normalement. */
+  .canvasFrame{ flex:none; overflow:visible; }
+  .canvas{ height:auto; width:100%; }
+  /* Trop peu de largeur pour qu'un panneau flottant ait un sens (il
+     couvrirait tout l'écran) : les deux rejoignent la pile normale et
+     restent toujours ouverts/visibles, quel que soit l'état mémorisé —
+     .hidden est ignoré grâce au "!important" sur "display" ci-dessous. */
+  .floatPanel{ position:static; flex:none; width:100%; height:auto; max-height:none; box-shadow:none; top:auto; left:auto; right:auto; display:flex !important; }
+  .floatPanelReopenBtn{ display:none !important; }
+}
+
+/* ---------- Onglets du centre : Écran / Logique de la scène / Timeline
+   d'animation ---------- */
+/* Un seul onglet visible à la fois (voir switchBuilderTab() dans
+   screen_edit.html), chacun occupant tout l'espace disponible dans
+   .builderCanvasArea — remplace l'ancien panneau du bas rétractable/
+   redimensionnable à la souris : un onglet "prend toute la place" par
+   nature, pas besoin d'une poignée de redimensionnement séparée, et en
+   changer d'onglet équivaut à "fermer" celui qu'on quitte. */
+.builderTabs{ display:flex; gap:2px; flex:0 0 auto; border-bottom:1px solid var(--border); margin-bottom:10px; }
+.builderTabBtn{
+  background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0;
+  padding:8px 12px; color:var(--text-dim); font-size:12.5px; cursor:pointer;
+}
+.builderTabBtn:hover{ color:var(--text); }
+.builderTabBtn.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
+
+.builderTabPanel{ flex:1 1 auto; min-height:0; display:none; flex-direction:column; }
+.builderTabPanel.active{ display:flex; }
+
+/* Sous-onglets Champs/Données À L'INTÉRIEUR d'un panneau "Modifier un
+   objet" (voir game_dashboard.html) — classes distinctes de .builderTabs/
+   .builderTabBtn/.builderTabPanel (utilisées par le style, réutilisé tel
+   quel) pour que switchDashTab() (onglets du tableau de bord lui-même,
+   ciblage global) n'aille jamais les toucher par erreur. */
+.objectPanelTabs{ margin:14px 0 10px; }
+.objectPanelTabPanel{ display:none; flex-direction:column; }
+.objectPanelTabPanel.active{ display:flex; }
+
+.flowToolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; flex:0 0 auto; }
+
+.nodeForm{ border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; background:var(--panel2); max-width:420px; flex:0 0 auto; }
+.nodeForm label{ margin-top:8px; }
+
+.flowCanvasWrap{ position:relative; width:100%; flex:1 1 auto; min-height:120px; overflow:auto; border:1px dashed var(--border); border-radius:8px; background:var(--bg); }
+.flowCanvas{ position:relative; width:2200px; height:1400px; }
+.flowEdgesSvg{ position:absolute; top:0; left:0; width:2200px; height:1400px; pointer-events:none; z-index:0; }
+.flowEdgeLine{ stroke:var(--accent); stroke-width:2; pointer-events:stroke; cursor:pointer; }
+.flowEdgeLine.flowEdgeTrue{ stroke:var(--status-success); }
+.flowEdgeLine.flowEdgeFalse{ stroke:var(--danger); }
+
+.flowNode{
+  position:absolute; width:220px; min-height:52px; border-radius:8px; border:1px solid var(--border);
+  background:var(--panel2); padding:10px 12px; font-size:12.5px; cursor:grab; z-index:1; user-select:none;
+}
+.flowNode-trigger{ border-color:var(--status-info); }
+.flowNode-condition{ border-color:var(--status-warning); }
+.flowNode-action{ border-color:var(--status-success); }
+.flowNodeBody{ padding-right:16px; line-height:1.4; word-break:break-word; }
+.flowNodeDelete{
+  position:absolute; top:4px; right:4px; width:18px; height:18px; padding:0; line-height:1;
+  font-size:11px; border-radius:4px; background:transparent; border:none; color:var(--text-dim);
+}
+.flowNodeDelete:hover{ color:var(--danger); }
+.flowPort{
+  position:absolute; width:14px; height:14px; border-radius:50%; background:var(--panel);
+  border:2px solid var(--accent); top:50%; transform:translateY(-50%); cursor:crosshair; z-index:2;
+}
+.flowPortIn{ left:-8px; }
+.flowPortOut{ right:-8px; }
+.flowPortTrue{ right:-8px; top:35%; border-color:var(--status-success); }
+.flowPortFalse{ right:-8px; top:65%; border-color:var(--danger); }
+
+/* ---------- Timeline d'animation : panneau sous "Logique de la scène" ---------- */
+.animTimelineWrap{
+  position:relative; width:100%; flex:1 1 auto; min-height:120px; overflow:auto;
+  border:1px dashed var(--border); border-radius:8px; background:var(--bg);
+}
+.animRuler{ display:flex; height:22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:3; }
+.animRulerSpacer{ position:sticky; left:0; width:140px; flex:0 0 140px; background:var(--panel); z-index:2; border-right:1px solid var(--border); }
+.animRulerTicksWrap{ position:relative; flex:0 0 auto; }
+.animRulerTick{
+  position:absolute; top:0; bottom:0; font-size:10px; color:var(--text-dim);
+  border-left:1px solid var(--border); padding-left:3px;
+}
+.animTracks{ position:relative; }
+.animTrack{ position:relative; height:38px; border-bottom:1px solid var(--border); display:flex; align-items:stretch; }
+.animTrackLabel{
+  position:sticky; left:0; width:140px; flex:0 0 140px; background:var(--panel); z-index:2;
+  padding:0 8px; font-size:12px; display:flex; align-items:center; border-right:1px solid var(--border);
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
+}
+.animTrackLane{ position:relative; flex:0 0 auto; }
+.animClip{
+  position:absolute; top:5px; height:28px; border-radius:6px; background:var(--accent); color:#fff;
+  font-size:11px; padding:5px 8px; cursor:grab; overflow:hidden; white-space:nowrap; user-select:none;
+  box-sizing:border-box;
+}
+.animClip.selected{ outline:2px solid #fff; }
+.animClipResizeHandle{ position:absolute; right:0; top:0; width:8px; height:100%; cursor:ew-resize; }
+.animKeyframeRow{ align-items:flex-start; }
+.animKeyframeRow textarea{ font-family:monospace; font-size:11px; }
+
+/* ---------- Tableau de bord d'un jeu (game_dashboard.html) ---------- */
+/* Une seule fenêtre, un onglet par catégorie (écrans/objets/éléments de
+   jeu/variables) — réutilise .builderTabs/.builderTabBtn/.builderTabPanel
+   (voir plus bas, éditeur d'écran) pour la même sensation de "fenêtre à
+   onglets" qu'ailleurs dans l'outil, plutôt que d'inventer un 2e système.
+   Contrairement à leur usage dans l'éditeur d'écran, ici la page défile
+   normalement (pas de hauteur figée) : une liste peut être longue, pas
+   besoin d'un défilement interne séparé par panneau. */
+.dashTabCount{ font-size:10px; color:var(--text-dim); background:var(--panel2); border-radius:999px; padding:1px 6px; margin-left:4px; }
+.dashPanelHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
+.dashPanelHeader h2{ margin:0; }
+.dashCreateBar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
+.dashCreateBar input, .dashCreateBar select{ width:auto; flex:1 1 160px; }
+.dashDangerZone{ margin-top:28px; }
+
+/* ---------- Filtre de colonnes (onglet Données, game_dashboard.html) ---------- */
+/* Menu déroulant compact sous le bouton "🔧 Colonnes" — un objet avec
+   beaucoup de champs rend le tableau illisible, ce menu permet d'en
+   masquer certains (voir toggleDataColumn() : agit directement sur
+   [data-col] plutôt que de reconstruire le tableau). */
+.columnFilterWrap{ position:relative; display:inline-block; }
+.columnFilterMenu{
+  position:absolute; top:100%; left:0; margin-top:4px; z-index:70;
+  background:var(--panel); border:1px solid var(--border); border-radius:8px;
+  padding:8px; box-shadow:0 12px 40px rgba(0,0,0,.55);
+  display:flex; flex-direction:column; gap:2px; min-width:180px; max-height:280px; overflow-y:auto;
+}
+.columnFilterMenu.hidden{ display:none; }
+.columnFilterOption{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:4px; font-size:12.5px; white-space:nowrap; }
+.columnFilterOption:hover{ background:var(--panel2); }
+
+/* ---------- Panneau "Configurer la valeur" (variable Objet/Tableau) ---------- */
+/* La colonne "Clé" n'a de sens que pour un Objet (paires clé/valeur) — un
+   Tableau n'est qu'une liste de valeurs, voir openVarValuePanel() dans
+   game_dashboard.html. */
+#varValuePanel[data-mode="tableau"] .varValueKeyField{ display:none; }
+
+/* ---------- Inscription : schéma visuel du mot de passe ---------- */
+/* Jauge + liste de critères mise à jour en direct (voir register.html) —
+   les mêmes 5 critères que auth/password_strength.py côté serveur. */
+.passwordStrengthBar{ height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-top:8px; }
+.passwordStrengthFill{ height:100%; width:0; border-radius:3px; background:var(--status-danger); transition:width .15s ease, background-color .15s ease; }
+.passwordStrengthFill.weak{ background:var(--status-danger); }
+.passwordStrengthFill.medium{ background:var(--status-warning); }
+.passwordStrengthFill.good{ background:var(--accent-2); }
+.passwordStrengthFill.strong{ background:var(--status-success); }
+.passwordChecklist{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
+.passwordChecklist li{ font-size:12.5px; color:var(--text-dim); padding-left:18px; position:relative; }
+.passwordChecklist li::before{ content:"○"; position:absolute; left:0; }
+.passwordChecklist li.ok{ color:var(--status-success); }
+.passwordChecklist li.ok::before{ content:"✓"; }
+.passwordChecklist-compact{ flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:2px; }
+.passwordChecklist-compact li{ font-size:11px; }
+
+/* ---------- Page de profil : compacte, sur 2 colonnes ---------- */
+.profileSection{ padding-top:1.5rem; padding-bottom:1.5rem; }
+.profileContainer{ max-width:980px; }
+.profileNotif{ padding:0.6rem 0.9rem; margin-bottom:0.75rem; }
+.profileGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
+.profileCol{ display:flex; flex-direction:column; gap:14px; min-width:0; }
+.profileBox{ padding:0.85rem 1rem; }
+.profileBox-danger{ border:1px solid var(--status-danger); }
+.profileForm .field{ margin-bottom:8px; }
+.profileForm .field:last-child{ margin-bottom:0; }
+.profileForm-row{ display:flex; flex-wrap:wrap; gap:8px; }
+.profileForm-row .field{ flex:1 1 120px; margin-bottom:0; }
+.profileForm-row .field.profileForm-full{ flex-basis:100%; }
+@media (max-width:720px){
+  .profileGrid{ grid-template-columns:1fr; }
+}
+
+/* ---------- Inscription : QR code de la double authentification ---------- */
+.totpQrWrap{ background:#fff; padding:16px; border-radius:8px; display:inline-block; max-width:220px; }
+.totpQrWrap svg{ display:block; width:100%; height:auto; }
+
+.recoveryCodesGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+.recoveryCode{ display:block; text-align:center; padding:8px; background:var(--panel2); border-radius:10px; letter-spacing:1px; }

styles/forge-theme.scss

@@ -0,0 +1,183 @@
+// forge-theme.scss — point d'entrée unique compilé par build_css.py en
+// static/style.css (voir regles/FORGE_ENGINE_TEMPLATE_BULMA.md, §6).
+//
+// Bulma est vendoré en local (styles/bulma/, version 0.9.4 — la dernière
+// compatible avec libsass, voir build_css.py) : ses variables Sass
+// ($primary, $radius...) sont posées ICI, AVANT `@import "bulma"`, pour
+// que Bulma recompile ses propres composants (boutons, tags,
+// notifications, dropdowns...) avec la palette Forge plutôt que de les
+// surcharger un par un après coup en CSS.
+
+// ---------- Variables Sass consommées par Bulma ----------
+$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
+$body-background-color: #0b0e14;
+$scheme-main: #0b0e14;
+$scheme-main-bis: #11151d;
+$scheme-main-ter: #161b25;
+$text: #e8ecf4;
+$text-light: #8b95a7;
+$border: #232a38;
+$border-light: #232a38;
+$link: #ff5f2e;
+$primary: #ff5f2e;
+$info: #3b82f6;
+$success: #10b981;
+$warning: #ffb020;
+$danger: #f04438;
+$radius: 10px;
+$radius-small: 8px;
+$radius-large: 16px;
+$radius-rounded: 999px;
+$box-radius: 16px;
+$card-radius: 16px;
+$navbar-height: 3.5rem;
+
+@import "bulma/bulma";
+
+// ---------- Tokens Forge (variables CSS runtime — voir §1 du document de
+// règles) : exposées en :root pour rester inspectables/utilisables telles
+// quelles par du JS ou du style inline, indépendamment de la compilation
+// Sass. Les alias --bg/--panel/--panel2/--border/--text/--text-dim/
+// --danger reprennent les noms déjà utilisés par tout le CSS custom de
+// l'app (voir forge-custom.scss, importé juste après) — pas besoin de
+// renommer les ~600 lignes de règles déjà écrites, seules les VALEURS
+// changent. ----------
+:root {
+  --forge-bg: #0b0e14;
+  --forge-bg-secondary: #11151d;
+  --forge-card: #161b25;
+  --forge-border: #232a38;
+  --forge-text: #e8ecf4;
+  --forge-text-muted: #8b95a7;
+  --accent: #ff5f2e;
+  --accent-2: #ffb020;
+  --gradient: linear-gradient(120deg, var(--accent), var(--accent-2));
+  --glow: rgba(255, 95, 46, 0.25);
+  --status-success: #10b981;
+  --status-warning: #ffb020;
+  --status-danger: #f04438;
+  --status-info: #3b82f6;
+
+  // Alias historiques (voir commentaire ci-dessus).
+  --bg: var(--forge-bg);
+  --panel: var(--forge-card);
+  --panel2: var(--forge-bg-secondary);
+  --border: var(--forge-border);
+  --text: var(--forge-text);
+  --text-dim: var(--forge-text-muted);
+  --danger: var(--status-danger);
+}
+
+html, body {
+  background: var(--forge-bg);
+  color: var(--forge-text);
+}
+
+// ---------- Composants Bulma que la recompilation seule ne couvre pas
+// (mise en page propre au navbar/tableaux/onglets de l'app, badges
+// maison) — voir §6 du document de règles. ----------
+.navbar {
+  background: var(--forge-bg-secondary);
+  border-bottom: 1px solid var(--forge-border);
+}
+.navbar-item.brand { gap: 8px; font-size: 1rem; }
+.navbar-item, .navbar-link { color: var(--forge-text); }
+.navbar-item.is-active, .navbar-item:hover, .navbar-link:hover {
+  color: var(--accent);
+  background: var(--forge-card);
+}
+
+.table {
+  background: transparent;
+  color: var(--forge-text);
+}
+.table thead th {
+  background: var(--forge-bg-secondary);
+  color: var(--forge-text-muted);
+  border-color: var(--forge-border);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.table td, .table th { border-color: var(--forge-border); vertical-align: middle; }
+.table.is-striped tbody tr:nth-child(even) { background: var(--forge-bg-secondary); }
+.table tbody tr:hover { background: var(--forge-card); }
+
+.tabs a { color: var(--forge-text-muted); border-bottom-color: var(--forge-border); }
+.tabs li.is-active a { color: var(--accent); border-bottom-color: var(--accent); }
+.tabs.is-toggle a { border-color: var(--forge-border); background: var(--forge-bg-secondary); }
+.tabs.is-toggle li.is-active a { background: var(--accent); border-color: var(--accent); color: #14100c; }
+
+.title, h1, h2, h3 { color: var(--forge-text); }
+.subtitle { color: var(--forge-text-muted); font-weight: 400; }
+
+.button.is-primary, button.primary {
+  background: var(--gradient);
+  border: none;
+  color: #14100c;
+  font-weight: 700;
+}
+.button.is-primary:hover, button.primary:hover { box-shadow: 0 6px 16px -6px var(--glow); }
+
+.box, .card {
+  background: linear-gradient(180deg, var(--forge-card), var(--forge-bg-secondary));
+  border: 1px solid var(--forge-border);
+  box-shadow: none;
+  transition: box-shadow .15s ease;
+}
+.box:hover, .card:hover { box-shadow: 0 10px 25px -8px var(--glow); }
+
+.forge-badge {
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  background: rgba(255, 95, 46, 0.1);
+  border: 1px solid rgba(255, 95, 46, 0.35);
+  color: var(--accent);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.forge-badge.is-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: var(--status-success); }
+.forge-badge.is-danger { background: rgba(240, 68, 56, 0.12); border-color: rgba(240, 68, 56, 0.35); color: var(--status-danger); }
+
+.input, .textarea, .select select {
+  background: var(--forge-bg-secondary);
+  border-color: var(--forge-border);
+  color: var(--forge-text);
+}
+.input:focus, .textarea:focus, .select select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(255, 95, 46, 0.2);
+}
+label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 600; }
+
+.modal-card, .modal-content { background: var(--forge-card); border: 1px solid var(--forge-border); }
+.modal-card-head, .modal-card-foot { background: var(--forge-bg-secondary); border-color: var(--forge-border); }
+
+.notification { color: var(--forge-text); }
+.notification.is-success { background: rgba(16, 185, 129, 0.12); color: var(--status-success); }
+.notification.is-danger { background: rgba(240, 68, 56, 0.12); color: var(--status-danger); }
+.notification.is-warning { background: rgba(255, 176, 32, 0.12); color: var(--status-warning); }
+.notification.is-info { background: rgba(59, 130, 246, 0.12); color: var(--status-info); }
+
+// Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et
+// à l'écran de connexion (§5), voir .authHero (templates/auth/*.html,
+// Phase B).
+.forge-gradient-title {
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+// ---------- CSS custom de l'app (floatPanel, canvas, arbre d'éléments,
+// graphe de logique, timeline, éditeurs de jeu...) — structurellement
+// inchangé, consomme les tokens ci-dessus via les alias historiques.
+// ----------
+@import "forge-custom";

templates/base.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{% block title %}Forge Engine{% endblock %}</title>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
+<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='branding/forge-favicon.svg') }}">
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 <script>window.CSRF_TOKEN = {{ csrf_token()|tojson }};</script>
 <script src="{{ url_for('static', filename='csrf_fetch.js') }}"></script>
@@ -25,7 +25,10 @@
 <div id="pageChrome">
 <nav class="navbar topbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <a href="{{ url_for('index') }}" class="navbar-item brand"><strong>🛠️ Forge Engine</strong></a>
+    <a href="{{ url_for('index') }}" class="navbar-item brand">
+      <img src="{{ url_for('static', filename='branding/forge-logo.svg') }}" alt="" width="32" height="32" style="border-radius:8px;">
+      <strong class="forge-gradient-title">Forge Engine</strong>
+    </a>
   </div>
   {% if g.get('current_user') %}
   <div class="navbar-end" style="margin-left:auto; display:flex; align-items:center; gap:10px; padding-right:12px;">

templates/play.html

@@ -4,12 +4,12 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{ game.name }} — Jouer</title>
+<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='branding/forge-favicon.svg') }}">
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 <script>window.CSRF_TOKEN = {{ csrf_token()|tojson }};</script>
 <script src="{{ url_for('static', filename='csrf_fetch.js') }}"></script>
 <link rel="stylesheet" href="{{ google_fonts_link }}">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"><style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"><style>
   body{ margin:0; background:#000; }
   /* ---------- Zone de jeu à proportion fixe (voir #playFrame) ----------
      Chaque écran est conçu avec un format précis (Portrait/Paysage/Carré,