nimes: fix desktop navigation (#90169)

As a shameless clapotis-les-canards ripoff; just changing the main
color and adding a couple of minor tweaks (buttons order, checkbox
alignment).

.git-blame-ignore-revs

@@ -4,3 +4,5 @@
 0f75316e1b9a70e311d2971e75b32f84b00f487a
 # misc: apply djhtml (#69422)
 26c238261585ce358808b562e10b39c67cfe7f3e
+# misc: apply double-quote-string-fixer (#79788)
+3fe0ee2cbb44a590cb27f7a40c7baedb3760140f

.gitignore

@@ -26,3 +26,7 @@ static/toulouse-2022/backoffice.css.map
 /debian/publik-base-theme.debhelper.log
 /debian/.debhelper/
 *.patch
+/tmp-*
+/build
+/publik_base_theme.egg-info
+/publik_base_theme/locale/**/*.mo

.pre-commit-config.yaml

@@ -1,6 +1,10 @@
 # See https://pre-commit.com for more information
 # See https://pre-commit.com/hooks.html for more hooks
 repos:
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+    - id: double-quote-string-fixer
 -   repo: https://github.com/psf/black
     rev: 22.3.0
     hooks:
@@ -17,6 +21,6 @@ repos:
     - id: djhtml
       args: ['--tabwidth', '2']
 -   repo: https://git.entrouvert.org/pre-commit-debian.git
-    rev: v0.1
+    rev: v0.3
     hooks:
     - id: pre-commit-debian

Jenkinsfile

@@ -4,11 +4,15 @@ pipeline {
     agent any
     options { disableConcurrentBuilds() }
     stages {
-        stage('Help Check') {
+        stage('Checks') {
             steps {
                 script {
-                     sh '(cd help/fr/ && if [ $(yelp-build html *.page 2>&1 | wc -c) -ne 0 ]; then exit 1; fi)'
-                     sh 'git clean -xdf'
+                    sh 'tox -rv'  // makes pre-commit check style
+                    if (env.GIT_BRANCH.startsWith('wip/')) {
+                      sh 'python3 setup.py compile_scss'
+                    }
+                    sh '(cd help/fr/ && if [ $(yelp-build html *.page 2>&1 | wc -c) -ne 0 ]; then exit 1; fi)'
+                    sh 'git clean -xdf'
                 }
             }
         }
@@ -24,9 +28,9 @@ pipeline {
                         '''
                     ).trim()
                     if (env.GIT_BRANCH == 'main' || env.GIT_BRANCH == 'origin/main') {
-                        sh "sudo -H -u eobuilder /usr/local/bin/eobuilder -d bullseye ${SHORT_JOB_NAME}"
+                        sh "sudo -H -u eobuilder /usr/local/bin/eobuilder -d bullseye,bookworm ${SHORT_JOB_NAME}"
                     } else if (env.GIT_BRANCH.startsWith('hotfix/')) {
-                        sh "sudo -H -u eobuilder /usr/local/bin/eobuilder -d bullseye --branch ${env.GIT_BRANCH} --hotfix ${SHORT_JOB_NAME}"
+                        sh "sudo -H -u eobuilder /usr/local/bin/eobuilder -d bullseye,bookworm --branch ${env.GIT_BRANCH} --hotfix ${SHORT_JOB_NAME}"
                     }
                 }
             }

MANIFEST.in

@@ -0,0 +1,22 @@
+# static
+recursive-include static *.scss *.css *.js *.ico *.gif *.svg *.png *.jpg *.jpeg *.woff *.woff2 *.ttf *.map *.json *.eot *.otf
+
+# templates
+recursive-include templates *.html *.txt *.py
+
+# documentation
+recursive-include help *.page *.png
+
+# scripts & pictos
+recursive-include src *.py *.svg
+
+# locales
+recursive-include publik_base_theme/locale *.po *.mo
+
+include MANIFEST.in
+include COPYING
+include VERSION
+include inkscape_wrapper.py
+include themes.json
+include create_themes_json.py
+include make_data_uris.py

Makefile

@@ -1,94 +0,0 @@
-VERSION=`git describe | sed 's/^v//; s/-/./g' `
-NAME="publik-base-theme"
-INKSCAPE=$(shell pwd)/src/inkscape_wrapper.py
-
-prefix = /usr
-
-all: themes.json icons css
-
-static/includes/_data_uris.scss: $(wildcard static/includes/img/*)
-	python3 make_data_uris.py static/includes/
-
-static/toodego/_data_uris.scss: $(wildcard static/toodego/img/*)
-	python3 make_data_uris.py static/toodego/
-
-static/lille/_data_uris.scss: $(wildcard static/lille/img/*)
-	python3 make_data_uris.py static/lille/
-
-static/lomme/_data_uris.scss: $(wildcard static/lomme/img/*)
-	python3 make_data_uris.py static/lomme/
-
-static/hellemmes/_data_uris.scss: $(wildcard static/hellemmes/img/*)
-	python3 make_data_uris.py static/hellemmes/
-
-static/toulouse-2022/_data_uris.scss: $(wildcard static/toulouse-2022/img/*)
-	python3 make_data_uris.py static/toulouse-2022/
-
-themes.json: $(wildcard static/*/config.json) help/fr/misc-scss.page
-	python3 create_themes_json.py
-
-%.css: export LC_ALL=C.UTF-8
-.SECONDEXPANSION:
-%.css: %.scss $(wildcard static/includes/*.scss  static/includes/*/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss static/toulouse-2022/_data_uris.scss $$(wildcard $$(@D)/*.scss)
-	sassc --sourcemap $< $@
-
-css: $(shell python3 get_themes.py) static/portal-agent/css/agent-portal.css static/includes/gadjo-extra.css
-	rm -rf static/*/.sass-cache/
-
-icons:
-	# chateauroux
-	cd src/ && python3 render-imgs-dashboard.py ../static/chateauroux/img/ --normal 333333 --selected 0779B7 --title FFFFFF --title-width 80
-	# orleans
-	cd src/ && python3 render-imgs-categories.py ../static/orleans/img/ --primary f05923 --secondary 34697D
-	cd src/ && python3 render-imgs-dashboard.py ../static/orleans/img/ --normal FFFFFF --normal-width 30 --selected f05923 --selected-width 30 --title FFFFFF --title-width 80
-	# publik
-	cd src/ && python3 render-imgs-categories.py ../static/publik/img/
-	cd src/ && python3 render-imgs-dashboard.py ../static/publik/img/ --normal 4D4D4D --selected DF017A --title FFFFFF --title-width 80
-	# somme
-	cd src/ && python3 render-imgs-categories.py ../static/somme-cd80/img/ --primary A8002B --secondary A8002B
-	cd src/ && python3 render-imgs-dashboard.py ../static/somme-cd80/img/ --normal 4D4D4D --selected 87A738 --title FFFFFF --title-width 80
-	# tournai
-	cd static/tournai/ && for F in assets/*.svg; do $(INKSCAPE) --without-gui --file $$F --export-area-drawing --export-area-snap --export-png img/$$(basename $$F .svg).png --export-width 40; done
-
-clean:
-	rm -rf sdist
-	rm -f src/tmp-*.svg
-	rm -f static/*/_data_uris.scss
-
-DIST_FILES = \
-	Makefile \
-	desc.xml \
-	create_themes_json.py \
-	get_themes.py \
-	make_data_uris.py \
-	static templates \
-	src \
-	help
-
-dist: clean
-	-mkdir sdist
-	rm -rf sdist/$(NAME)-$(VERSION)
-	mkdir -p sdist/$(NAME)-$(VERSION)
-	for i in $(DIST_FILES); do \
-		cp -R "$$i" sdist/$(NAME)-$(VERSION); \
-	done
-
-install:
-	mkdir -p $(DESTDIR)$(prefix)/share/publik/themes/publik-base
-	cp -r static templates themes.json desc.xml $(DESTDIR)$(prefix)/share/publik/themes/publik-base
-	rm $(DESTDIR)$(prefix)/share/publik/themes/publik-base/static/*/config.json
-	mkdir -p $(DESTDIR)$(prefix)/share/wcs/themes/
-	ln -s $(prefix)/share/publik/themes/publik-base $(DESTDIR)$(prefix)/share/wcs/themes/publik-base
-
-dist-bzip2: dist
-	-mkdir sdist
-	cd sdist && tar cfj ../sdist/$(NAME)-$(VERSION).tar.bz2 $(NAME)-$(VERSION)
-
-version:
-	@(echo $(VERSION))
-
-name:
-	@(echo $(NAME))
-
-fullname:
-	@(echo $(NAME)-$(VERSION))

README

@@ -437,6 +437,34 @@ copyright notices:
   #
   # https://www.fontsquirrel.com/license/public-sans
 
+* MuseoModerno
+  # Copyright (c) 2020, Omnibus-Type (www.omnibus-type.com|omnibus.type@gmail.com).
+  #
+  # This Font Software is licensed under the SIL Open Font License, Version 1.1.
+  #
+  # https://github.com/Omnibus-Type/MuseoModerno/blob/master/LICENSE.md
+
+* Nunito Sans
+  # Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
+  #
+  # This Font Software is licensed under the SIL Open Font License, Version 1.1.
+  #
+  # https://www.fontsquirrel.com/license/nunito-sans
+
+* Arimo
+  # Copyright (c) 2013 Steve Matteson.
+  #
+  # This Font Software is licensed under the Apache License Version 2.0.
+  #
+  # https://www.fontsquirrel.com/license/arimo
+
+* Kumbh Sans
+  # Copyright 2020 The KumbhSans Project Authors (https://github.com/xconsau/KumbhSans)
+  #
+  # This Font Software is licensed under the SIL Open Font License, Version 1.1.
+  #
+  # https://github.com/xconsau/KumbhSans/blob/master/OFL.txt
+
 ~~~~
 
 Some theme variant files have their own specific licenses; refer to

compile-and-reload.sh

@@ -4,4 +4,4 @@
 # is stopped properly on ctrl-c
 trap 'kill %1' SIGINT
 
-./livereload-server & iwatch -r -t '.scss' -e modify -c "make css" .
+./livereload-server & iwatch -r -t '.scss' -e modify -c "python3 setup.py compile_scss" .

debian/control

@@ -2,16 +2,26 @@ Source: publik-base-theme
 Section: web
 Priority: optional
 Maintainer: Frédéric Péters <fpeters@entrouvert.com>
-Build-Depends: debhelper-compat (= 12), inkscape, python3, sassc (>= 3.4.2)
+Build-Depends: debhelper-compat (= 12),
+               dh-python,
+               inkscape,
+               python3,
+               python3-all,
+               python3-django,
+               python3-setuptools,
+               sassc (>= 3.4.2),
 Standards-Version: 3.9.4
 Homepage: http://git.entrouvert.org/publik-base-theme.git
 
 Package: publik-base-theme
 Architecture: all
-Depends: python3-gadjo, ${misc:Depends}, ${shlibs:Depends}
+Depends: python3-gadjo,
+         ${misc:Depends},
+         ${python3:Depends},
+         ${shlibs:Depends},
 Conflicts: python-authentic2 (<< 2.1.20.742.gb6ee096-0),
            python-django (<= 1:1.11),
            python-xstatic-roboto-fontface (<< 0.5.0.0),
            python3-xstatic-roboto-fontface (<< 0.5.0.0),
-Breaks: combo (<< 0.7.1)
+Breaks: combo (<< 0.7.1),
 Description: Publik Base Theme

debian/publik-base-theme.maintscript

@@ -1 +1,13 @@
 symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/alpes-maritimes-2022/combo/json ../../alpes-maritimes-2018/combo/json 9.28.5.g9ac5c2ba~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/boussu-2022/combo/json ../../braine-l-alleud/combo/json 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/boussu-2022/combo/wcs ../../braine-l-alleud/combo/wcs 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/eybens izi-ici 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/grenoble izi-ici 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/grenoble-metropole-2022 izi-ici 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/hellemmes lille 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/la-seyne-sur-mer sictiam 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/lomme lille 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/massoins sictiam 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/pays-de-grasse sictiam 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/saint-vallier-de-thiey sictiam 10.47-1~
+symlink_to_dir /usr/share/publik/themes/publik-base/templates/variants/sospel sictiam 10.47-1~

debian/rules

@@ -9,8 +9,9 @@
 # Uncomment this to turn on verbose mode.
 #export DH_VERBOSE=1
 
-%:
-	dh $@
+export PYBUILD_NAME=publik-django-templatetags
+export PYBUILD_DISABLE=test
 
-override_dh_auto_build:
-	dh_auto_build --no-parallel
+
+%:
+	dh $@ --with python3 --buildsystem=pybuild

get_themes.py

@@ -1,11 +1,21 @@
 #! /usr/bin/env python3
 
+import argparse
 import os
 
+parser = argparse.ArgumentParser(description='Display list of generated CSS files')
+parser.add_argument('--include-map-files', dest='map_files', action='store_true', help='include .map files')
+
+args = parser.parse_args()
+
 for dirname in sorted(os.listdir('static')):
     config = os.path.join('static', dirname, 'config.json')
     if not os.path.exists(config):
         continue
     print('static/%s/style.css' % dirname)
+    if args.map_files:
+        print('static/%s/style.css.map' % dirname)
     if os.path.exists(os.path.join('static', dirname, 'backoffice.scss')):
         print('static/%s/backoffice.css' % dirname)
+        if args.map_files:
+            print('static/%s/backoffice.css.map' % dirname)

help/fr/misc-css-classes.page

@@ -23,14 +23,14 @@ de classes CSS réutilisables.
 <table shade="rows">
  <tr>
   <td><p><code>pk-mobile-only</code></p></td>
-  <td><p>Limite l'affichage à la vue « mobile » du site, c'est-à-dire quand la
-  largeur de l'écran est faible, par défaut inférieure ou égale à 800 pixels.
+  <td><p>Limite l’affichage à la vue « mobile » du site, c’est-à-dire quand la
+  largeur de l’écran est faible, par défaut inférieure ou égale à 800 pixels.
   </p></td>
  </tr>
  <tr>
   <td><p><code>pk-desktop-only</code></p></td>
-  <td><p>Limite l'affichage à la vue « ordinateur » du site, c'est-à-dire dans
-  la situation inverse, quand la largeur de l'écran est par défaut supérieure à
+  <td><p>Limite l’affichage à la vue « ordinateur » du site, c’est-à-dire dans
+  la situation inverse, quand la largeur de l’écran est par défaut supérieure à
   800 pixels.
   </p></td>
  </tr>
@@ -52,18 +52,18 @@ de classes CSS réutilisables.
  </tr>
  <tr>
    <td><p><code>foldable</code></p></td>
-   <td><p>Rend le contenu d'une cellule pliable.</p></td>
+   <td><p>Rend le contenu d’une cellule pliable.</p></td>
  </tr>
  <tr>
    <td><p><code>folded</code></p></td>
    <td><p>Associée à la classe foldable, définit le contenu
-   d'une cellule comme étant plié par défaut.</p></td>
+   d’une cellule comme étant plié par défaut.</p></td>
  </tr>
  <tr>
    <td><p><code>links-list</code></p></td>
    <td><p>Permet de donner à une cellule de texte le style commun
    « titre et liens », pour cela le texte doit contenir un titre
-   (&lt;h2&gt;) suivi d'une liste de liens (&lt;ul&gt;).</p></td>
+   (&lt;h2&gt;) suivi d’une liste de liens (&lt;ul&gt;).</p></td>
  </tr>
  <tr>
   <td><p><code>pk-information</code></p></td>
@@ -99,7 +99,7 @@ de classes CSS réutilisables.
  <tr>
   <td><p><code>pk-budget-table</code></p></td>
   <td><p>Met en forme un champ de type « tableau » pour la saisie
-  d'informations budgétaires (libellés alignés à gauche, utilisation de toute
+  d’informations budgétaires (libellés alignés à gauche, utilisation de toute
   la largeur, colonne de saisie des nombres poussée sur la droite).</p></td>
  </tr>
  <tr>
@@ -140,6 +140,10 @@ de classes CSS réutilisables.
   <td><p><code>pk-horizontal-radiobuttons</code></p></td>
   <td><p>Aligne horizontalement les boutons radio d’un champ « liste ».</p></td>
  </tr>
+ <tr>
+  <td><p><code>pk-vertical-items</code></p></td>
+  <td><p>Aligne verticalement les items des champs « liste à choix multiple » et « liste » affichés sous forme d’images.</p></td>
+ </tr>
 </table>
 </section>
 
@@ -154,9 +158,21 @@ de classes CSS réutilisables.
       <td><p><code>pk-big-button</code></p></td>
       <td><p>Applique une apparence de bouton de grande taille à un lien.</p></td>
     </tr>
+    <tr>
+      <td><p><code>pk-button-delete, pk-big-button-delete</code></p></td>
+      <td><p>Applique une apparence de bouton de type "supprimer" (si le style est défini pour votre thème)</p></td>
+    </tr>
+    <tr>
+      <td><p><code>pk-button-submit, pk-big-button-submit</code></p></td>
+      <td><p>Applique une apparence de bouton de type "valider" (si le style est défini pour votre thème)</p></td>
+    </tr>
+    <tr>
+      <td><p><code>pk-button-cancel, pk-big-button-cancel</code></p></td>
+      <td><p>Applique une apparence de bouton de type "annuler" (si le style est défini pour votre thème)</p></td>
+    </tr>
   </table>
 
-  <note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code>
+  <note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code> listées ci-dessus
   peuvent également être appliquées aux cellules de type « Lien ».</p></note>
 </section>
 
@@ -203,4 +219,18 @@ de classes CSS réutilisables.
   </table>
 </section>
 
+<section>
+  <title>Classes pour l’impression</title>
+  <table>
+    <tr>
+      <td><p><code>pk-print-only</code></p></td>
+      <td><p>Affiche ce contenu uniquement à l’impression, pas à l’écran.</p></td>
+    </tr>
+    <tr>
+      <td><p><code>pk-no-print</code></p></td>
+      <td><p>Affiche ce contenu uniquement à l’écran, pas à l’impression.</p></td>
+    </tr>
+  </table>
+</section>
+
 </page>

help/fr/misc-grid.page

@@ -34,21 +34,21 @@ et 12.
 <p>
 Sur des écrans de petite dimension, la grille est automatiquement adaptée pour
 ne pas rétrécir outre mesure les éléments, la largeur de ceux-ci est doublée,
-par exemple un élément configuré pour une largeur d'un quart d'écran prendra
-non pas un quart d'écran mais un demi écran.
+par exemple un élément configuré pour une largeur d’un quart d’écran prendra
+non pas un quart d’écran mais un demi écran.
 </p>
 
 <p>
 Sur les très petits écrans, la mécanique de grille est totalement annulée et
 tous les éléments de grille sont affichés sur toute la largeur disponible.
-Il est cependant possible d'empêcher ce comportement en accompagnant la classe
+Il est cependant possible d’empêcher ce comportement en accompagnant la classe
 <code>grid-x-y</code> de la classe <code>never-alone</code>.
 </p>
 </note>
 
 <p>
 Pour forcer un retour en début de ligne, ou pour assurer un rendu correct
-quand les éléments d'une ligne n'ont pas tous la même hauteur, une classe
+quand les éléments d’une ligne n’ont pas tous la même hauteur, une classe
 supplémentaire, <code>newline</code> peut être posée sur le premier
 élément de la nouvelle ligne.
 </p>

help/fr/misc-scss.page

@@ -61,7 +61,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$font-line-height</code></p></td>
-  <td><p>Hauteur de l'interlignage du corps de texte</p></td>
+  <td><p>Hauteur de l’interlignage du corps de texte</p></td>
   <td><p><var>1.4</var></p></td>
  </tr>
  <tr>
@@ -71,23 +71,23 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$header-background-color</code></p></td>
-  <td><p>Couleur de fond de l'entête de la page</p></td>
+  <td><p>Couleur de fond de l’entête de la page</p></td>
   <td><p><var>null</var></p></td>
  </tr>
  <tr>
   <td><p><code>$header-full-width-background</code></p></td>
-  <td><p>Extension de la couleur de fond de l'entête de la page à la largeur de l'écran
+  <td><p>Extension de la couleur de fond de l’entête de la page à la largeur de l’écran
   (plutôt que la largeur du contenu)</p></td>
   <td><p><var>true</var></p></td>
  </tr>
  <tr>
    <td><p><code>$header-logo-size</code></p></td>
-   <td><p>Taille du logo de l'entête. 2 valeurs sont attendues : largeur et hauteur (ex: <code>150px 75px</code>).</p></td>
+   <td><p>Taille du logo de l’entête. 2 valeurs sont attendues : largeur et hauteur (ex: <code>150px 75px</code>).</p></td>
    <td><p><var>null</var></p></td>
  </tr>
  <tr>
    <td><p><code>$show-site-title</code></p></td>
-   <td><p>Afficher le titre du site. Le titre est masqué par défaut lorsqu'un logo est défini. <code>true</code> ou <code>false</code></p></td>
+   <td><p>Afficher le titre du site. Le titre est masqué par défaut lorsqu’un logo est défini. <code>true</code> ou <code>false</code></p></td>
    <td><p><var>null</var></p></td>
  </tr>
  <tr>
@@ -97,7 +97,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$footer-full-width-background</code></p></td>
-  <td><p>Extension de la couleur de fond du pied de page à la largeur de l'écran
+  <td><p>Extension de la couleur de fond du pied de page à la largeur de l’écran
   (plutôt que la largeur du contenu).</p></td>
   <td><p><var>true</var></p></td>
  </tr>
@@ -113,7 +113,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$border-radius</code></p></td>
-  <td><p>Taille de l'arrondi à appliquer à différents éléments</p></td>
+  <td><p>Taille de l’arrondi à appliquer à différents éléments</p></td>
   <td><p><var>null</var></p></td>
  </tr>
  <tr>
@@ -146,11 +146,21 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Espace (« gouttière ») entre la barre latérale et les colonnes.</p></td>
   <td><p><var>$columns-gutter</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$edge-gutter</code></p></td>
+  <td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
+  <td><p><var>legacy</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$grid-gutter</code></p></td>
   <td><p>Espace (« gouttière ») entre les éléments disposés en grille.</p></td>
   <td><p><var>1rem</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$zebra-color</code></p></td>
+  <td><p>Couleur d’arrière-plan par défaut des zebras</p></td>
+  <td><p><var>hsla(0, 0%, 0%, 0.06)</var></p></td>
+ </tr>
 </table>
 </section>
 
@@ -205,7 +215,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$title-border-radius</code></p></td>
-  <td><p>Taille de l'arrondi à appliquer aux titres</p></td>
+  <td><p>Taille de l’arrondi à appliquer aux titres</p></td>
   <td><p><var>$border-radius</var></p></td>
  </tr>
  <tr>
@@ -220,7 +230,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  <title>Navigation</title>
 
  <p>
-  Ces paramètres contrôlent l'apparence de la barre de navigation.
+  Ces paramètres contrôlent l’apparence de la barre de navigation.
  </p>
 
 <table shade="rows">
@@ -231,7 +241,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$nav-full-width-background</code></p></td>
-  <td><p>Extension de la couleur de fond de la navigation à la largeur de l'écran
+  <td><p>Extension de la couleur de fond de la navigation à la largeur de l’écran
   (plutôt que la largeur du contenu).</p></td>
   <td><p><var>false</var></p></td>
  </tr>
@@ -253,7 +263,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$nav-border-radius</code></p></td>
-  <td><p>Taille de l'arrondi de la navigation </p></td>
+  <td><p>Taille de l’arrondi de la navigation </p></td>
   <td><p><var>$border-radius</var></p></td>
  </tr>
  <tr>
@@ -267,7 +277,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p><var>transparent</var></p></td>
  </tr>
  <tr>
-  <td><p><code>$nav-item-transform</code></p></td>
+  <td><p><code>$nav-text-transform</code></p></td>
   <td><p>Transformation des caractères des entrées du menu</p></td>
   <td><p><var>none</var></p></td>
  </tr> 
@@ -283,12 +293,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$nav-item-hover-background</code></p></td>
-  <td><p>Couleur de fond d'un élément au survol</p></td>
+  <td><p>Couleur de fond d’un élément au survol</p></td>
   <td><p><var>$nav-item-selected-background</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-item-hover-color</code></p></td>
-  <td><p>Couleur du texte d'un élément au survol</p></td>
+  <td><p>Couleur du texte d’un élément au survol</p></td>
   <td><p><var>$nav-item-selected-color</var></p></td>
  </tr>
  <tr>
@@ -296,6 +306,26 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Espace entre les éléments</p></td>
   <td><p><var>0px</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$nav-font-family</code></p></td>
+  <td><p>Famille de police de la navigation</p></td>
+  <td><p><var>null</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$nav-font-style</code></p></td>
+  <td><p>Style de la police de la navigation</p></td>
+  <td><p><var>null</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$nav-font-size</code></p></td>
+  <td><p>Taille de la police de la navigation</p></td>
+  <td><p><var>null</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$nav-font-weight</code></p></td>
+  <td><p>Graisse de la police de la navigation</p></td>
+  <td><p><var>bold</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$nav-mobile-menu-background</code></p></td>
   <td><p>Couleur de fond du menu en mode mobile</p></td>
@@ -308,29 +338,29 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$nav-item-selected-mode</code></p></td>
-  <td><p>Mode d'affichage du menu sélectionné, soit background pour en changer
+  <td><p>Mode d’affichage du menu sélectionné, soit background pour en changer
   la couleur du fond, soit bottom-border pour ajouter une bordure sous lui.</p></td>
   <td><p><var>background</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-item-selected-border</code></p></td>
-  <td><p>Style de la bordure de l'élément sélectionné.</p></td>
+  <td><p>Style de la bordure de l’élément sélectionné.</p></td>
   <td><p><var>2px solid $nav-active-color</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-item-hover-border</code></p></td>
-  <td><p>Style de la bordure de l'élément survolé.</p></td>
+  <td><p>Style de la bordure de l’élément survolé.</p></td>
   <td><p><var>$nav-item-selected-border</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-after-image</code></p></td>
-  <td><p>Ajout sous la navigation d'un bandeau avec l'image associée à la page.
+  <td><p>Ajout sous la navigation d’un bandeau avec l’image associée à la page.
   (ne fonctionne pas avec Internet Explorer)</p></td>
   <td><p><var>true</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-after-image-height</code></p></td>
-  <td><p>Hauteur de l'éventuel bandeau image.</p></td>
+  <td><p>Hauteur de l’éventuel bandeau image.</p></td>
   <td><p><var>300px</var></p></td>
  </tr>
  <tr>
@@ -338,7 +368,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Rendu de la navigation en mode mobile, <var>none</var> pour conserver
   le rendu « desktop », <var>hamburger</var> pour placer la navigation dans un
   menu « hamburger », <var>bottom-bar</var> pour placer la navigation dans une
-  barre en bas d'écran, <var>hidden</var> pour cacher la navigation.</p>
+  barre en bas d’écran, <var>hidden</var> pour cacher la navigation.</p>
   <p>Les paramètres supplémentaires pour le rendu <var>bottom-bar</var> sont
   détaillés dans la section <link xref="#pwa">application mobile</link>.</p>
   </td>
@@ -351,7 +381,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  <title>Mode <em>responsive</em></title>
 
  <p>
-  Ces paramètres contrôlent l'apparence de différents éléments quand la largeur
+  Ces paramètres contrôlent l’apparence de différents éléments quand la largeur
   de la fenêtre est sous une certaine taille.
  </p>
 
@@ -366,6 +396,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Largeur maximale de la page "mobile"</p></td>
   <td><p><var>null</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$edge-gutter-mobile</code></p></td>
+  <td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
+  <td><p><var>$edge-gutter</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$nav-mobile-limit</code></p></td>
   <td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>
@@ -379,7 +414,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$responsive-menu-mask</code></p></td>
-  <td><p>Affichage d'un masque lorsque le menu mobile est déplié. Valable
+  <td><p>Affichage d’un masque lorsque le menu mobile est déplié. Valable
   uniquement si <code>$responsive-menu=left-to-right</code></p></td>
   <td><p><var>false</var></p></td>
  </tr>
@@ -400,7 +435,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$nav-menu-side</code></p></td>
-  <td><p>Taille d'un bord du bouton de navigation</p></td>
+  <td><p>Taille d’un bord du bouton de navigation</p></td>
   <td><p><var>50px</var></p></td>
  </tr>
  <tr>
@@ -416,7 +451,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
 
  <p>
   Ces paramètres contrôlent le rendu de la barre de navigation de bas
-  d'écran, présente en mode mobile quand <code>$nav-mobile-mode</code>
+  d’écran, présente en mode mobile quand <code>$nav-mobile-mode</code>
   a pour valeur <var>bottom-bar</var>.
  </p>
 
@@ -438,22 +473,22 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$nav-mobile-bottom-bar-item-hover-background</code></p></td>
-  <td><p>Couleur de fond d'un élément au survol</p></td>
+  <td><p>Couleur de fond d’un élément au survol</p></td>
   <td><p><var>$nav-item-hover-background</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-mobile-bottom-bar-item-hover-color</code></p></td>
-  <td><p>Couleur du texte d'un élément au survol</p></td>
+  <td><p>Couleur du texte d’un élément au survol</p></td>
   <td><p><var>$nav-item-hover-color</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-mobile-bottom-bar-item-selected-background</code></p></td>
-  <td><p>Couleur de fond de l'élément actif</p></td>
+  <td><p>Couleur de fond de l’élément actif</p></td>
   <td><p><var>$nav-item-selected-backgroud</var></p></td>
  </tr>
  <tr>
   <td><p><code>$nav-mobile-bottom-bar-item-selected-color</code></p></td>
-  <td><p>Couleur du texte de l'élément actif</p></td>
+  <td><p>Couleur du texte de l’élément actif</p></td>
   <td><p><var>$nav-item-selected-backgroud</var></p></td>
  </tr>
  <tr>
@@ -489,7 +524,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$form-background</code></p></td>
-  <td><p>Couleur de fond d'une démarche.</p></td>
+  <td><p>Couleur de fond d’une démarche.</p></td>
   <td><p><var>$body-background</var></p></td>
  </tr>
  <tr>
@@ -547,7 +582,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$button-border-radius</code></p></td>
-  <td><p>Taille de l'arrondi à appliquer aux boutons</p></td>
+  <td><p>Taille de l’arrondi à appliquer aux boutons</p></td>
   <td><p><var>$border-radius</var></p></td>
  </tr>
  <tr>
@@ -577,17 +612,17 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$widget-focus-background</code></p></td>
-  <td><p>Couleur de fond des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
+  <td><p>Couleur de fond des champs de formulaire lorsqu’ils sont actifs (texte, liste…)</p></td>
   <td><p><var>$widget-background</var></p></td>
  </tr>
  <tr>
   <td><p><code>$widget-focus-color</code></p></td>
-  <td><p>Couleur du texte des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
+  <td><p>Couleur du texte des champs de formulaire lorsqu’ils sont actifs (texte, liste…)</p></td>
   <td><p><var>$widget-color</var></p></td>
  </tr>
  <tr>
   <td><p><code>$widget-focus-border</code></p></td>
-  <td><p>Style de bordure des champs de formulaire lorsqu'ils sont actifs (texte, liste…)</p></td>
+  <td><p>Style de bordure des champs de formulaire lorsqu’ils sont actifs (texte, liste…)</p></td>
   <td><p><var>$widget-border</var></p></td>
  </tr>
  <tr>
@@ -612,7 +647,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$widget-border-radius</code></p></td>
-  <td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
+  <td><p>Taille de l’arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
   <td><p><var>0</var></p></td>
  </tr>
  <tr>
@@ -647,7 +682,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$widget-unique-checkbox-position</code></p></td>
-  <td><p>Positionnement de la case à cocher d'un champ de type « Case à
+  <td><p>Positionnement de la case à cocher d’un champ de type « Case à
   cocher (choix unique); soit « bottom » pour un rendu sous le libellé du
   champ (option par défaut), soit « left » pour un rendu à la gauche du
   libellé.</p></td>
@@ -655,7 +690,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$buttons-order</code></p></td>
-  <td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>, <code>cancel</code>, <code>previous</code>) dans l'ordre souhaité séparé par des vigules. Ajouter l'option <code>(grow)</code> après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
+  <td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>, <code>cancel</code>, <code>previous</code>) dans l’ordre souhaité séparé par des vigules. Ajouter l’option <code>(grow)</code> après l’identifiant d’un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
   </td>
   <td><p><var>null</var></p></td>
  </tr>
@@ -705,21 +740,21 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
 </section>
 
 <section>
-  <title>Bloc étapes d'une démarche</title>
+  <title>Bloc étapes d’une démarche</title>
 
   <p>
-    Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.
+    Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d’une démarche.
   </p>
   <p>
-    Le rendu de ce bloc diffère automatiquement en fonction de la taille de l'écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s'adapter aux différents terminaux :
+    Le rendu de ce bloc diffère automatiquement en fonction de la taille de l’écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s’adapter aux différents terminaux :
   </p>
   <list>
-    <item><p><em>rendu mobile :</em> seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;</p></item>
-    <item><p><em>rendu horizontal :</em>Les marqueurs d'étapes (chiffres) s'affichent côte à côte et sur plusieurs itemgnes s'il le faut. Seul le label de l'étape en cours s'affiche ;</p></item>
-    <item><p><em>rendu vertical :</em> (s'affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</p></item>.
+    <item><p><em>rendu mobile :</em> seul l’étape courante est affichée avec une indication du nombre totale d’étapes ;</p></item>
+    <item><p><em>rendu horizontal :</em>Les marqueurs d’étapes (chiffres) s’affichent côte à côte et sur plusieurs itemgnes s’il le faut. Seul le label de l’étape en cours s’affiche ;</p></item>
+    <item><p><em>rendu vertical :</em> (s’affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</p></item>.
   </list>
   <p>
-    Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d'étape</em> (chiffre).
+    Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d’étape</em> (chiffre).
   </p>
 
   <table shade="rows">
@@ -742,7 +777,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
     </tr>
     <tr>
       <td><p><code>$wcs-step-current-color</code></p></td>
-      <td><p>Couleur du texte de l'étape courantes</p></td>
+      <td><p>Couleur du texte de l’étape courantes</p></td>
       <td><p><var>$primary-color</var></p></td>
     </tr>
     <tr>
@@ -752,7 +787,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
     </tr>
     <tr>
       <td><p><code>$wcs-step-current-background</code></p></td>
-      <td><p>Couleur de fond de l'étape courante</p></td>
+      <td><p>Couleur de fond de l’étape courante</p></td>
       <td><p><var>$wcs-step-background</var></p></td>
     </tr>
     <tr>
@@ -769,7 +804,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
       <td><p><code>$wcs-step-current-border-bottom</code></p></td>
       <td>
         <p>
-          Épaisseur et couleur du filet de l'étape courante.
+          Épaisseur et couleur du filet de l’étape courante.
           Si <code>$wcs-step-border-bottom</code> est à <var>none</var>, ce filet sera automatiquement <var>none</var> également.
         </p>
       </td>
@@ -779,7 +814,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
       <td><p><code>$wsc-step-before-piled</code></p></td>
       <td>
         <p>
-          Cette option n'est valable qu'en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
+          Cette option n’est valable qu’en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
           Avec la valeur <var>true</var>, elle va superposer les étapes passée les unes sur les autres pour gagner de la place.
         </p>
       </td>
@@ -787,32 +822,32 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
     </tr>
     <tr>
       <td><p><code>$wcs-step-marker-color</code></p></td>
-      <td><p>Couleur du chiffre des marqueurs d'étapes non courantes</p></td>
+      <td><p>Couleur du chiffre des marqueurs d’étapes non courantes</p></td>
       <td><p><var>$wcs-step-color</var></p></td>
     </tr>
     <tr>
       <td><p><code>$wcs-step-current-marker-color</code></p></td>
-      <td><p>Couleur du chiffre du marqueur d'étape courante</p></td>
+      <td><p>Couleur du chiffre du marqueur d’étape courante</p></td>
       <td><p><var>$wcs-step-current-color</var></p></td>
     </tr>
     <tr>
       <td><p><code>$wcs-step-marker-background</code></p></td>
-      <td><p>Couleur de fond des marqueurs d'étapes non courantes</p></td>
+      <td><p>Couleur de fond des marqueurs d’étapes non courantes</p></td>
       <td><p><var>$wcs-step-background</var></p></td>
     </tr>
     <tr>
       <td><p><code>$wcs-step-current-marker-background</code></p></td>
-      <td><p>Couleur de fond du marqueur d'étape courante</p></td>
+      <td><p>Couleur de fond du marqueur d’étape courante</p></td>
       <td><p><var>$wcs-step-current-background</var></p></td>
     </tr>
     <tr>
       <td><p><code>$wcs-step-marker-size</code></p></td>
-      <td><p>Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre</p></td>
+      <td><p>Taille du marqueur. La taille du marquer n’influe pas sur la taille du chiffre</p></td>
       <td><p><var>2.1em</var></p></td>
     </tr>
     <tr>
       <td><p><code>$wcs-step-current-marker-enlarge</code></p></td>
-      <td><p>Facteur d'agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
+      <td><p>Facteur d’agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
       <td><p><var>1</var></p></td>
     </tr>
     <tr>
@@ -848,7 +883,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
     </tr>
     <tr>
       <td><p><var>$wcs-step-current-color</var></p></td>
-      <td><p>Couleur du label de l'étape courante</p></td>
+      <td><p>Couleur du label de l’étape courante</p></td>
       <td><p><var>solid</var></p></td>
     </tr>
     <tr>
@@ -875,7 +910,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$cell-border-radius</code></p></td>
-  <td><p>Taille de l'arrondi des cellules</p></td>
+  <td><p>Taille de l’arrondi des cellules</p></td>
   <td><p><var>$border-radius</var></p></td>
  </tr>
  <tr>
@@ -890,28 +925,28 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$cell-entry-font-weight</code></p></td>
-  <td><p>Graisse du texte (lien) d'un élément</p></td>
+  <td><p>Graisse du texte (lien) d’un élément</p></td>
   <td><p><var>normal</var></p></td>
  </tr>
  <tr>
   <td><p><code>$cell-entry-color</code></p></td>
-  <td><p>Couleur du texte (lien) d'un élément</p></td>
+  <td><p>Couleur du texte (lien) d’un élément</p></td>
   <td><p><var>$link-color</var></p></td>
  </tr>
  <tr>
   <td><p><code>$cell-entry-hover-background</code></p></td>
-  <td><p>Couleur de fond d'un élément survolé</p></td>
+  <td><p>Couleur de fond d’un élément survolé</p></td>
   <td><p><var>inherit</var></p></td>
  </tr>
  <tr>
   <td><p><code>$cell-entry-hover-color</code></p></td>
-  <td><p>Couleur du texte d'un élément survolé</p></td>
+  <td><p>Couleur du texte d’un élément survolé</p></td>
   <td><p><var>inherit</var></p></td>
  </tr>
  <tr>
   <td><p><code>$cell-entry-hover-effect</code></p></td>
   <td><p>Effet au survol des éléments dans les cellules, none pour un fond
-  directement uni, left-to-right pour faire apparaître celui-ci de gauche à
+  directement uni, left-to-right pour faire apparaitre celui-ci de gauche à
   droit, right-to-left de droite à gauche, top-to-bottom de haut en bas,
   bottom-to-top de bas en haut et middle-to-edges, horizontalement du milieu
   vers les bords.</p></td>
@@ -919,16 +954,16 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$cell-image-position</code></p></td>
-  <td><p>Position de l'image qui peut être associée à une cellule « démarches
-  d'une catégorie », les valeurs possibles sont <var>top</var> pour
-  avoir l'image en haut de cellule et <var>after-title</var> pour avoir
-  l'image après le titre de cellule.</p></td>
+  <td><p>Position de l’image qui peut être associée à une cellule « démarches
+  d’une catégorie », les valeurs possibles sont <var>top</var> pour
+  avoir l’image en haut de cellule et <var>after-title</var> pour avoir
+  l’image après le titre de cellule.</p></td>
   <td><p><var>after-title</var></p></td>
  </tr>
  <tr>
   <td><p><code>$cell-image-padding</code></p></td>
-  <td><p>Espace autour de l'image qui peut être associée à une cellule « démarches
-  d'une catégorie ».</p></td>
+  <td><p>Espace autour de l’image qui peut être associée à une cellule « démarches
+  d’une catégorie ».</p></td>
   <td><p><var>0.5rem</var></p></td>
  </tr>
  <tr>
@@ -939,7 +974,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  <tr>
   <td><p><code>$footer-menucell-separator</code></p></td>
   <td><p>Style de bordure utilisée comme séparateur vertical entre les entrées
-  d'une cellule menu placée dans le pied de page</p></td>
+  d’une cellule menu placée dans le pied de page</p></td>
   <td><p><var>none</var></p></td>
  </tr>
 </table>
@@ -949,26 +984,26 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <title>Messages</title>
 
   <p>
-    Options pour paraméter l'affichage des messages. 4 types de messages : succès, information, avertissement, erreur.
+    Options pour paraméter l’affichage des messages. 4 types de messages : succès, information, avertissement, erreur.
   </p>
 
 <table shade="rows">
   <tr>
     <td><p><code>$notification-style</code></p></td>
     <td><p>Rendu des messages, soit « classic »,
-    soit « border-icon » pour un rendu plaçant l'icône en couleur sur un trait
+    soit « border-icon » pour un rendu plaçant l’icône en couleur sur un trait
     à gauche, soit « border-bar » pour un rendu avec une bordure et une bande
     de couleur pour l’icône.</p></td>
     <td><p><var>classic</var></p></td>
   </tr>
   <tr>
     <td><p><code>$notification-icon-size</code></p></td>
-    <td><p>Taille de l'icône illustrant le message</p></td>
+    <td><p>Taille de l’icône illustrant le message</p></td>
     <td><p><var>1.5rem</var> ou <var>2rem</var></p></td>
   </tr>
   <tr>
     <td><p><code>$notification-icon-position</code></p></td>
-    <td><p>Position vertical de l'icône du message. « top » ou « center ». </p></td>
+    <td><p>Position vertical de l’icône du message. « top » ou « center ». </p></td>
     <td><p><var>top</var></p></td>
   </tr>
 </table>
@@ -999,8 +1034,8 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$carrousel-navigation</code></p></td>
-  <td><p>Détermine si la navigation permettant de passer d'un élément à
-  l'autre est affichée. (visible ou none)</p></td>
+  <td><p>Détermine si la navigation permettant de passer d’un élément à
+  l’autre est affichée. (visible ou none)</p></td>
   <td><p><var>visible</var></p></td>
  </tr>
  <tr>
@@ -1025,8 +1060,8 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$carrousel-arrows</code></p></td>
-  <td><p>Détermine si les flèches (gauche/droite) permettant de passer d'un
-  élément à l'autre sont affichées. (visible ou none)</p></td>
+  <td><p>Détermine si les flèches (gauche/droite) permettant de passer d’un
+  élément à l’autre sont affichées. (visible ou none)</p></td>
   <td><p><var>visible</var></p></td>
  </tr>
  <tr>
@@ -1036,7 +1071,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  </tr>
  <tr>
   <td><p><code>$carrousel-item-mask-color</code></p></td>
-  <td><p>Couleur du masque qui se superpose à l'image de la diapositive</p></td>
+  <td><p>Couleur du masque qui se superpose à l’image de la diapositive</p></td>
   <td><p><var>rgba(0, 0, 0, 0.3)</var></p></td>
  </tr>
 </table>
@@ -1047,7 +1082,7 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
  <title>Tableaux</title>
 
  <p>
-  Ces paramètres contrôlent l'apparence des tableaux sur lesquels la
+  Ces paramètres contrôlent l’apparence des tableaux sur lesquels la
   classe pk-data-table est appliquée.
  </p>
 
@@ -1066,45 +1101,45 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
 </table>
 
  <p>
-  Ces paramètres contrôlent l'apparence de l'entête des tableaux sur lesquels la
-  classe pk-data-table-headers est appliquée (n'a d'effet que si la classe
+  Ces paramètres contrôlent l’apparence de l’entête des tableaux sur lesquels la
+  classe pk-data-table-headers est appliquée (n’a d’effet que si la classe
   pk-data-table est aussi appliquée).
  </p>
 
 <table shade="rows">
  <tr>
   <td><p><code>$table-headers-background</code></p></td>
-  <td><p>Couleur de fond de l'entête</p></td>
+  <td><p>Couleur de fond de l’entête</p></td>
   <td><p><var>$title-background</var></p></td>
  </tr>
  <tr>
   <td><p><code>$table-headers-color</code></p></td>
-  <td><p>Couleur du texte de l'entête</p></td>
+  <td><p>Couleur du texte de l’entête</p></td>
   <td><p><var>$title-color</var></p></td>
  </tr>
  <tr>
   <td><p><code>$table-headers-font-style</code></p></td>
-  <td><p>Style de la police de l'entête</p></td>
+  <td><p>Style de la police de l’entête</p></td>
   <td><p><var>$title-font-style</var></p></td>
  </tr>
  <tr>
   <td><p><code>$table-headers-font-size</code></p></td>
-  <td><p>Taille de la police de l'entête</p></td>
+  <td><p>Taille de la police de l’entête</p></td>
   <td><p><var>$title-font-size</var></p></td>
  </tr>
  <tr>
   <td><p><code>$table-headers-font-weight</code></p></td>
-  <td><p>Graisse de la police de l'entête</p></td>
+  <td><p>Graisse de la police de l’entête</p></td>
   <td><p><var>$title-weight</var></p></td>
  </tr>
  <tr>
   <td><p><code>$table-headers-font-family</code></p></td>
-  <td><p>Famille de police de l'entête</p></td>
+  <td><p>Famille de police de l’entête</p></td>
   <td><p><var>$title-font-family</var></p></td>
  </tr>
  <tr>
   <td><p><code>$table-headers-text-transform</code></p></td>
-  <td><p>Transformation des caractères de l'entête</p></td>
+  <td><p>Transformation des caractères de l’entête</p></td>
   <td><p><var>$title-transform</var></p></td>
  </tr>
 </table>
@@ -1114,33 +1149,33 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <title>Retour en haut</title>
 
   <p>
-    Bouton permettant de remonter en haut de page. Élément masqué par défaut. Si affiché, il le sera par défaut sous la forme d'un lien en fin de pied de page
+    Bouton permettant de remonter en haut de page. Élément masqué par défaut. Si affiché, il le sera par défaut sous la forme d’un lien en fin de pied de page
   </p>
 
   <table shade="rows">
     <tr>
       <td><p><code>$back-top-display</code></p></td>
-      <td><p>Condition d'affichage du bouton. Valeurs possibles: <var>mobile-only</var>, <var>block</var>, <var>inline</var>, <var>none</var>.</p></td>
+      <td><p>Condition d’affichage du bouton. Valeurs possibles: <var>mobile-only</var>, <var>block</var>, <var>inline</var>, <var>none</var>.</p></td>
       <td><p><var>none</var></p></td>
     </tr>
     <tr>
       <td><p><code>$back-top-icon-character</code></p></td>
-      <td><p>Caractère UTF-8 de l'icône du bouton.</p></td>
+      <td><p>Caractère UTF-8 de l’icône du bouton.</p></td>
       <td><p><var>"\f102"</var>(icone "angle-double-top")</p></td>
     </tr>
     <tr>
       <td><p><code>$back-top-icon-size</code></p></td>
-      <td><p>Taille de l'icône.</p></td>
+      <td><p>Taille de l’icône.</p></td>
       <td><p><var>2.5em</var></p></td>
     </tr>
     <tr>
       <td><p><code>$back-top-icon-label-space</code></p></td>
-      <td><p>Espace entre l'icône et le label du bouton</p></td>
+      <td><p>Espace entre l’icône et le label du bouton</p></td>
       <td><p><var>0.33em</var></p></td>
     </tr>
     <tr>
       <td><p><code>$back-top-layout-direction</code></p></td>
-      <td><p>Position de l'icône par rapport au label. Soit <var>vertical</var> : icône au dessus du label, soit <var>horizontal</var>: icône à côté du label</p></td>
+      <td><p>Position de l’icône par rapport au label. Soit <var>vertical</var> : icône au dessus du label, soit <var>horizontal</var>: icône à côté du label</p></td>
       <td><p><var>vertical</var></p></td>
     </tr>
   </table>

manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'publik_base_theme.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            'available on your PYTHONPATH environment variable? Did you '
+            'forget to activate a virtual environment?'
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

publik_base_theme/locale/fr/LC_MESSAGES/django.po

@@ -0,0 +1,348 @@
+# publik-base-theme French translation
+# Copyright (C) Entr’ouvert
+# This file is distributed under the same license as the publik-base-theme package.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: publik-base-theme 0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2024-03-07 08:01+0100\n"
+"PO-Revision-Date: 2024-03-07 08:14+0100\n"
+"Language: French\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+#: templates/authentic2/base.html
+msgid "there are errors in the form"
+msgstr "le formulaire présente des erreurs"
+
+#: templates/authentic2/login.html
+#: templates/variants/alpes-maritimes-2018/authentic2_auth_saml/login_cd06-adfs.html
+#: templates/variants/alpes-maritimes-2022/authentic2_auth_saml/login_cd06-adfs.html
+#: templates/variants/marseille/authentic2_auth_saml/login_marseille-adfs.html
+#: templates/variants/tournai/authentic2_auth_fedict/login.html
+msgid "Login"
+msgstr "Connexion"
+
+#: templates/beid/login_form.html
+#: templates/variants/grandlyon-glc/authentic2/login_password_form.html
+#: templates/variants/quimper/authentic2/login_password_form.html
+#: templates/variants/strasbourg-2018/authentic2/login_password_form.html
+#: templates/variants/tournai/authentic2/login_password_form.html
+msgid "Log in"
+msgstr "Connexion"
+
+#: templates/beid/profile.html
+msgid "Belgian eID card"
+msgstr "Carte eID"
+
+#: templates/beid/profile.html
+#: templates/variants/strasbourg-2018/authentic2/accounts_edit_photo.html
+msgid "Delete"
+msgstr "Supprimer"
+
+#: templates/combo/json/arpege_demands.html
+#: templates/variants/toulouse-2022/combo/wcs/user_all_forms.html
+msgid "There are no forms."
+msgstr "Il n’y a aucune demande."
+
+#: templates/combo/page_template.html
+#: templates/variants/nimes/combo/page_template_2sidebars.html
+msgid "Top of content"
+msgstr "Haut du contenu"
+
+#: templates/combo/page_template.html
+#: templates/portal-agent/combo/page_template.html
+#: templates/portal-agent/combo/page_template_sidebar.html
+#: templates/variants/nimes/combo/page_template_2sidebars.html
+#: templates/variants/strasbourg-2018/combo/page_template.html
+msgid "Content"
+msgstr "Contenu"
+
+#: templates/combo/page_template.html
+#: templates/variants/nimes/combo/page_template_2sidebars.html
+msgid "Bottom of content"
+msgstr "Bas du contenu"
+
+#: templates/combo/page_template.html
+#: templates/variants/avray/combo/page_template.html
+#: templates/variants/coprec/combo/page_template.html
+#: templates/variants/montlouis-sur-loire/combo/page_template.html
+#: templates/variants/strasbourg-2018/combo/page_template.html
+msgid "Footer"
+msgstr "Pied de page"
+
+#: templates/combo/page_template_2cols.html
+#: templates/combo/page_template_2cols_sidebar.html
+#: templates/portal-agent/combo/page_template_2cols.html
+#: templates/portal-agent/combo/page_template_2cols_sidebar.html
+#: templates/variants/amiens-metropole/combo/page_template_homepage.html
+#: templates/variants/lille/combo/page_template_homepage.html
+#: templates/variants/meudon-2021/combo/page_template_homepage.html
+msgid "Left column"
+msgstr "Colonne de gauche"
+
+#: templates/combo/page_template_2cols.html
+#: templates/combo/page_template_2cols_sidebar.html
+#: templates/portal-agent/combo/page_template_2cols.html
+#: templates/portal-agent/combo/page_template_2cols_sidebar.html
+#: templates/variants/amiens-metropole/combo/page_template_homepage.html
+#: templates/variants/lille/combo/page_template_homepage.html
+#: templates/variants/meudon-2021/combo/page_template_homepage.html
+msgid "Right column"
+msgstr "Colonne de droite"
+
+#: templates/combo/page_template_sidebar.html
+#: templates/portal-agent/combo/page_template_2cols_sidebar.html
+#: templates/portal-agent/combo/page_template_sidebar.html
+#: templates/variants/thonon-agglomeration-2021/combo/page_template_sidebar.html
+msgid "Sidebar"
+msgstr "Barre latérale"
+
+#: templates/hobo/maintenance/maintenance_page.html
+msgid "This site is currently unavailable."
+msgstr "Ce site est actuellement indisponible."
+
+#: templates/qommon/forms/widgets/includes/cartads-piece.html
+msgid "Drop a file or click to select one"
+msgstr "Déposez un fichier ou cliquez pour en sélectionner un."
+
+#: templates/qommon/forms/widgets/includes/cartads-piece.html
+msgid "Upload done"
+msgstr "Téléchargement terminé."
+
+#: templates/qommon/forms/widgets/includes/cartads-piece.html
+#: templates/variants/toodego/qommon/forms/widgets/photo-x.html
+msgid "Upload in progress..."
+msgstr "Téléchargement en cours…"
+
+#: templates/qommon/forms/widgets/includes/cartads-piece.html
+msgid "Error during upload."
+msgstr "Erreur lors du transfert."
+
+#: templates/qommon/forms/widgets/includes/cartads-piece.html
+#: templates/variants/toodego/qommon/forms/widgets/photo-x.html
+msgid "Remove this file"
+msgstr "Retirer ce fichier"
+
+#: templates/qommon/forms/widgets/includes/cartads-piece.html
+#: templates/variants/toodego/qommon/forms/widgets/photo-x.html
+msgid "remove"
+msgstr "retirer"
+
+#: templates/registration/password_reset_form.html
+msgid "Resetting password"
+msgstr "Mot de passe oublié"
+
+#: templates/registration/password_reset_form.html
+#: templates/variants/montpellier/registration/registration_form.html
+#: templates/variants/pre-saint-gervais/registration/registration_completion_form.html
+#: templates/variants/pre-saint-gervais/registration/registration_form.html
+#: templates/variants/strasbourg-2018/registration/registration_completion_form.html
+#: templates/variants/toulouse-metropole/registration/registration_form.html
+msgid "Submit"
+msgstr "Valider"
+
+#: templates/registration/registration_form.html
+#: templates/variants/strasbourg-2018/registration/registration_completion_form.html
+#: templates/variants/tournai/registration/registration_form.html
+msgid "Registration"
+msgstr "Création d’un compte"
+
+#: templates/variants/alpes-maritimes-2018/authentic2_auth_fc/login.html
+#: templates/variants/toulouse-metropole/authentic2_auth_fc/login.html
+msgid "Log in with FranceConnect"
+msgstr "S’identifier avec FranceConnect"
+
+#: templates/variants/alpes-maritimes-2018/authentic2_auth_saml/login_cd06-adfs.html
+#: templates/variants/alpes-maritimes-2022/authentic2_auth_saml/login_cd06-adfs.html
+#: templates/variants/bouches-du-rhone/authentic2_auth_saml/login_cd13-adfs.html
+#: templates/variants/grandlyon-glc/authentic2/login_password_form.html
+#: templates/variants/marseille/authentic2_auth_saml/login_marseille-adfs.html
+#: templates/variants/strasbourg-2018/authentic2/accounts_edit_photo.html
+msgid "Cancel"
+msgstr "Annuler"
+
+#: templates/variants/amiens-metropole/combo/page_template_homepage.html
+msgid "Top Banner"
+msgstr "Bandeau du haut"
+
+#: templates/variants/amiens-metropole/combo/page_template_homepage.html
+#: templates/variants/lille/combo/page_template_homepage.html
+msgid "Middle column"
+msgstr "Colonne du milieu"
+
+#: templates/variants/blois/wcs/front/formdata_history.html
+msgid "Log"
+msgstr "Historique"
+
+#: templates/variants/grandlyon-glc/authentic2_auth_fc/linking.html
+msgid "Link with a FranceConnect account"
+msgstr "Liaison avec un compte FranceConnect"
+
+#: templates/variants/grandlyon-glc/authentic2_auth_fc/linking.html
+msgid "opens in new window"
+msgstr "(s’ouvre dans une nouvelle fenêtre)"
+
+#: templates/variants/grandlyon-glc/authentic2_auth_fc/linking.html
+msgid "What is FranceConnect?"
+msgstr "Qu’est-ce que FranceConnect ?"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Monday"
+msgstr "Lundi"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Tuesday"
+msgstr "Mardi"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Wednesday"
+msgstr "Mercredi"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Thursday"
+msgstr "Jeudi"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Friday"
+msgstr "Vendredi"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Saturday"
+msgstr "Samedi"
+
+#: templates/variants/isere-cd38/qommon/forms/widgets/select--ens-calendar.html
+msgid "Sunday"
+msgstr "Dimanche"
+
+#: templates/variants/izi-ici/authentic2_idp_oidc/authorization.html
+msgid "Your email:"
+msgstr "Votre adresse de courriel :"
+
+#: templates/variants/izi-ici/authentic2_idp_oidc/authorization.html
+msgid "Do not ask again"
+msgstr "Ne plus redemander"
+
+#: templates/variants/izi-ici/authentic2_idp_oidc/authorization.html
+msgid "Accept"
+msgstr "Accepter"
+
+#: templates/variants/izi-ici/authentic2_idp_oidc/authorization.html
+msgid "Refuse"
+msgstr "Refuser"
+
+#: templates/variants/lille/combo/wcs/tracking_code_input.html
+#: templates/variants/metz-metropole-2019/combo/wcs/tracking_code_input.html
+#: templates/variants/strasbourg-2018/combo/wcs/tracking_code_input.html
+#: templates/variants/toodego/portal-user/combo/wcs/tracking_code_input.html
+msgid "The tracking code could not been found."
+msgstr "Le code de suivi n’a pas pu être trouvé."
+
+#: templates/variants/lille/combo/wcs/tracking_code_input.html
+#: templates/variants/metz-metropole-2019/combo/wcs/tracking_code_input.html
+#: templates/variants/strasbourg-2018/combo/wcs/tracking_code_input.html
+#: templates/variants/toodego/portal-user/combo/wcs/tracking_code_input.html
+msgid "Tracking Code"
+msgstr "Code de suivi"
+
+#: templates/variants/lille/combo/wcs/tracking_code_input.html
+#: templates/variants/metz-metropole-2019/combo/wcs/tracking_code_input.html
+#: templates/variants/strasbourg-2018/combo/wcs/tracking_code_input.html
+#: templates/variants/toodego/portal-user/combo/wcs/tracking_code_input.html
+msgid "ex: CNPHNTFB"
+msgstr "ex. : CNPHNTFB"
+
+#: templates/variants/montlouis-sur-loire/combo/page_template.html
+msgid "Services"
+msgstr "Services"
+
+#: templates/variants/montpellier/authentic2/logout.html
+msgid "Continue logout"
+msgstr "Continuer la déconnexion"
+
+#: templates/variants/montpellier/subscriptions/subscriptions.html
+msgid "Modify"
+msgstr "Modifier"
+
+#: templates/variants/orleans/calendar/booking_calendar_content.html
+msgid "previous"
+msgstr "précédent"
+
+#: templates/variants/orleans/calendar/booking_calendar_content.html
+msgid "next"
+msgstr "suivant"
+
+#: templates/variants/roannais-icitoyen/combo/search-cell.html
+msgid "Search"
+msgstr "Recherche"
+
+#: templates/variants/rouen/combo/wcs/current_drafts.html
+msgid "draft"
+msgstr "brouillon"
+
+#: templates/variants/sables-d-olonne-2022/combo/menu.html
+msgid "active page"
+msgstr "page active"
+
+#: templates/variants/strasbourg-2018/qommon/forms/widgets/select_jsonp--address.html
+msgid "Manually enter the address"
+msgstr "Entrer l’adresse manuellement"
+
+#: templates/variants/strasbourg-2018/registration/registration_completion_form.html
+msgid "Please fill the form to complete your registration"
+msgstr "Veuillez remplir le formulaire afin de finir la création de votre compte."
+
+#: templates/variants/toodego/combo/dashboardcell.html
+msgid "Loading..."
+msgstr "Chargement…"
+
+#: templates/variants/toodego/combo/json/rsj-a-traiter.html
+msgid "Created"
+msgstr "Date de création"
+
+#: templates/variants/toodego/combo/json/rsj-a-traiter.html
+msgid "Last Modified"
+msgstr "Dernière modification"
+
+#: templates/variants/toodego/combo/json/rsj-a-traiter.html
+msgid "Status"
+msgstr "Statut"
+
+#: templates/variants/toulouse-2022/authentic2/login_password_form.html
+msgid "Forgot password?"
+msgstr "Mot de passe perdu ?"
+
+#: templates/variants/toulouse-2022/authentic2/login_password_form.html
+msgid "Reset it!"
+msgstr "Récupérez votre accès !"
+
+#: templates/variants/toulouse-2022/authentic2/login_password_form.html
+msgid "Not a member?"
+msgstr "Pas de compte ?"
+
+#: templates/variants/toulouse-2022/authentic2/login_password_form.html
+msgid "Register!"
+msgstr "Enregistrez-vous !"
+
+#: templates/variants/toulouse-2022/combo/wcs/current_forms.html
+msgid "Current Forms"
+msgstr "Demandes en cours"
+
+#: templates/variants/toulouse-2022/combo/wcs/current_forms.html
+msgid "There are no current forms."
+msgstr "Il n’y a aucune demande en cours de traitement."
+
+#: templates/variants/toulouse-2022/combo/wcs/user_all_forms.html
+msgid "All Forms"
+msgstr "Toutes les demandes"
+
+#: templates/variants/toulouse-2022/combo/wcs/user_done_forms.html
+msgid "Done Forms"
+msgstr "Demandes terminées"
+
+#: templates/variants/toulouse-2022/combo/wcs/user_done_forms.html
+msgid "There are no done forms or they have been removed."
+msgstr "Il n’y a aucune demande traitée ou celles-ci ont été supprimées."

publik_base_theme/management/commands/makemessages.py

@@ -0,0 +1,29 @@
+# publik-base-theme
+# Copyright (C) 2014-2024 Entr'ouvert
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Affero General Public License as published
+# by the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+from django.core.management.commands import makemessages
+
+
+class Command(makemessages.Command):
+    def handle(self, *args, **options):
+        if not options.get('add_location') and self.gettext_version >= (0, 19):
+            options['add_location'] = 'file'
+        return super().handle(*args, **options)
+
+    def find_files(self, root):
+        for file in super().find_files('templates'):
+            file.locale_dir = 'publik_base_theme/locale'
+            yield file

publik_base_theme/settings.py

@@ -0,0 +1,23 @@
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+# Application definition
+
+INSTALLED_APPS = ['publik_base_theme']
+
+# Internationalization
+# https://docs.djangoproject.com/en/3.2/topics/i18n/
+
+LANGUAGE_CODE = 'fr-fr'
+
+TIME_ZONE = 'Europe/Paris'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+LOCALE_PATHS = (BASE_DIR / 'publik_base_theme' / 'locale',)

setup.py

@@ -0,0 +1,300 @@
+#! /usr/bin/env python
+
+import functools
+import glob
+import os
+import subprocess
+import sys
+from distutils.cmd import Command as BaseCommand
+from distutils.command.build import build as _build
+from distutils.command.sdist import sdist
+from distutils.errors import CompileError
+from distutils.spawn import find_executable
+from multiprocessing.pool import ThreadPool
+
+from setuptools import find_packages, setup
+from setuptools.command.install_lib import install_lib as _install_lib
+
+inkscape = os.path.abspath(os.path.join(os.path.dirname(__file__), 'src', 'inkscape_wrapper.py'))
+
+
+class Command(BaseCommand):
+    user_options = []
+
+    def initialize_options(self):
+        pass
+
+    def finalize_options(self):
+        pass
+
+
+class eo_sdist(sdist):
+    def run(self):
+        print('creating VERSION file')
+        if os.path.exists('VERSION'):
+            os.remove('VERSION')
+        version = get_version()
+        version_file = open('VERSION', 'w')
+        version_file.write(version)
+        version_file.close()
+        sdist.run(self)
+        print('removing VERSION file')
+        if os.path.exists('VERSION'):
+            os.remove('VERSION')
+
+    def local_findall(self, dir=os.curdir):
+        # override default file search to allow for duplicates (as some themes have
+        # multiple variants that are just symlinks)
+        files = [
+            os.path.join(base, file) for base, dirs, files in os.walk(dir, followlinks=True) for file in files
+        ]
+        if dir == os.curdir:
+            make_rel = functools.partial(os.path.relpath, start=dir)
+            files = map(make_rel, files)
+        self.filelist.allfiles = list(filter(os.path.isfile, files))
+
+    def get_file_list(self):
+        self.filelist.findall = self.local_findall
+        super().get_file_list()
+
+    def copy_file(self, *args, **kwargs):
+        # do not allow hardlinking as hardlinks would get inserted as is in
+        # the tarball, and would not extract properly.
+        kwargs.pop('link', None)
+        super().copy_file(*args, **kwargs)
+
+
+def get_version():
+    '''Use the VERSION, if absent generates a version with git describe, if not
+    tag exists, take 0.0- and add the length of the commit log.
+    '''
+    if os.path.exists('VERSION'):
+        with open('VERSION') as v:
+            return v.read()
+    if os.path.exists('.git'):
+        p = subprocess.Popen(
+            ['git', 'describe', '--dirty=.dirty', '--match=v*'],
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+        )
+        result = p.communicate()[0]
+        if p.returncode == 0:
+            result = result.decode('ascii').strip()[1:]  # strip spaces/newlines and initial v
+            if '-' in result:  # not a tagged version
+                real_number, commit_count, commit_hash = result.split('-', 2)
+                version = '%s.post%s+%s' % (real_number, commit_count, commit_hash)
+            else:
+                version = result.replace('.dirty', '+dirty')
+            return version
+        else:
+            return '0.0.post%s' % len(subprocess.check_output(['git', 'rev-list', 'HEAD']).splitlines())
+    return '0.0'
+
+
+class compile_translations(Command):
+    description = 'compile message catalogs to MO files via django compilemessages'
+    user_options = []
+
+    def run(self):
+        curdir = os.getcwd()
+        try:
+            from django.core.management import call_command
+
+            for path, dirs, files in os.walk('publik_base_theme'):
+                if 'locale' not in dirs:
+                    continue
+                os.chdir(os.path.realpath(path))
+                call_command('compilemessages')
+                os.chdir(curdir)
+        except ImportError:
+            sys.stderr.write('!!! Please install Django >= 1.4 to build translations\n')
+        finally:
+            os.chdir(curdir)
+
+
+class build_themes_json(Command):
+    def run(self):
+        subprocess.run(['python3', 'create_themes_json.py'])
+
+
+def get_css_files(include_map_files=False):
+    for dirname in sorted(os.listdir('static')):
+        config = os.path.join('static', dirname, 'config.json')
+        if not os.path.exists(config):
+            continue
+        yield 'static/%s/style.css' % dirname
+        if include_map_files:
+            yield 'static/%s/style.css.map' % dirname
+        if os.path.exists(os.path.join('static', dirname, 'backoffice.scss')):
+            yield 'static/%s/backoffice.css' % dirname
+            if include_map_files:
+                yield 'static/%s/backoffice.css.map' % dirname
+    yield 'static/portal-agent/css/agent-portal.css'
+    yield 'static/includes/gadjo-extra.css'
+
+
+def subprocess_run(command):
+    kwargs = {
+        'env': {'LC_ALL': 'C.UTF-8'},
+    }
+    if isinstance(command, list):
+        print(' '.join(command))
+    else:
+        print(command)
+        kwargs['shell'] = True
+    return bool(subprocess.run(command, **kwargs).returncode == 0)
+
+
+class compile_scss(Command):
+    description = 'compile scss files into css files'
+
+    def run(self):
+        sass_bin = find_executable('sassc')
+        if not sass_bin:
+            raise CompileError(
+                'A sass compiler is required but none was found.  See sass-lang.com for choices.'
+            )
+
+        for dirname in ('includes', 'toodego', 'lille', 'lomme', 'hellemmes', 'toulouse-2022'):
+            subprocess.run(['python3', 'make_data_uris.py', os.path.join('static', dirname)], check=True)
+
+        def get_build_commands():
+            for css_filename in get_css_files():
+                yield ['sassc', '--sourcemap', css_filename.replace('.css', '.scss'), css_filename]
+
+        with ThreadPool() as pool:
+            for result in pool.imap_unordered(subprocess_run, get_build_commands()):
+                if not result:
+                    raise CompileError('error compiling css')
+
+
+class build_icons(Command):
+    def run(self):
+        cmds = [
+            'python3 src/render-imgs-dashboard.py static/chateauroux/img/ --normal 333333 '
+            '--selected 0779B7 --title FFFFFF --title-width 80',
+            'python3 src/render-imgs-categories.py static/orleans/img/ --primary f05923 --secondary 34697D',
+            'python3 src/render-imgs-dashboard.py static/orleans/img/ --normal FFFFFF '
+            '--normal-width 30 --selected f05923 --selected-width 30 --title FFFFFF --title-width 80',
+            'python3 src/render-imgs-categories.py static/publik/img/',
+            'python3 src/render-imgs-dashboard.py static/publik/img/ --normal 4D4D4D '
+            '--selected DF017A --title FFFFFF --title-width 80',
+            'python3 src/render-imgs-categories.py static/somme-cd80/img/ --primary A8002B '
+            '--secondary A8002B',
+            'python3 src/render-imgs-dashboard.py static/somme-cd80/img/ --normal 4D4D4D '
+            '--selected 87A738 --title FFFFFF --title-width 80',
+        ]
+        if self.distribution.commands == ['install']:
+            cmds = [f'{x} --skip-existing' for x in cmds]
+
+        if not os.path.exists('static/tournai/img'):
+            os.mkdir('static/tournai/img')
+        for image in glob.glob('static/tournai/assets/*.svg'):
+            target_filename = 'static/tournai/img/' + os.path.basename(image).replace('.svg', '.png')
+            if (
+                os.path.exists(target_filename)
+                and os.stat(image).st_mtime < os.stat(target_filename).st_mtime
+            ):
+                continue
+            cmds.append(
+                [
+                    inkscape,
+                    '--without-gui',
+                    '--file',
+                    image,
+                    '--export-area-drawing',
+                    '--export-area-snap',
+                    '--export-png',
+                    target_filename,
+                    '--export-width',
+                    '40',
+                ]
+            )
+
+        with ThreadPool() as pool:
+            for result in pool.imap_unordered(subprocess_run, cmds):
+                if not result:
+                    raise CompileError('error building icons')
+
+
+class build(_build):
+    sub_commands = [
+        ('build_themes_json', None),
+        ('build_icons', None),
+        ('compile_scss', None),
+        ('compile_translations', None),
+    ] + _build.sub_commands
+
+
+class install_lib(_install_lib):
+    def run(self):
+        self.run_command('compile_translations')
+        super().run()
+
+
+def data_tree(destdir, sourcedir):
+    extensions = [
+        '.html',
+        '.txt',
+        '.scss',
+        '.css',
+        '.js',
+        '.ico',
+        '.gif',
+        '.png',
+        '.jpg',
+        '.jpeg',
+        '.woff',
+        '.woff2',
+        '.ttf',
+        '.css',
+        '.map',
+        '.svg',
+        '.eot',
+        '.otf',
+        '.py',  # prepare-template.py
+    ]
+    r = []
+    for root, dirs, files in os.walk(sourcedir):
+        l = [os.path.join(root, x) for x in files if os.path.splitext(x)[1] in extensions]
+        r.append((root.replace(sourcedir, destdir, 1), l))
+    return r
+
+
+setup(
+    name='publik_base_theme',
+    version=get_version(),
+    license='AGPLv3 or later',
+    description='Themes for Publik',
+    url='https://dev.entrouvert.org/projects/publik-base-theme/',
+    author='Entr’ouvert',
+    author_email='info@entrouvert.com',
+    packages=find_packages(),
+    include_package_data=True,
+    data_files=data_tree('share/publik/themes/publik-base/static', 'static')
+    + data_tree('share/publik/themes/publik-base/templates', 'templates')
+    + [('share/publik/themes/publik-base', ['themes.json'])],
+    setup_requires=[
+        'django>=2.2',
+    ],
+    classifiers=[
+        'Development Status :: 5 - Stable',
+        'Environment :: Web Environment',
+        'Framework :: Django',
+        'Intended Audience :: Developers',
+        'License :: OSI Approved :: GNU Affero General Public License v3 or later (AGPLv3+)',
+        'Operating System :: OS Independent',
+        'Programming Language :: Python',
+        'Programming Language :: Python :: 3',
+    ],
+    zip_safe=False,
+    cmdclass={
+        'build': build,
+        'build_icons': build_icons,
+        'build_themes_json': build_themes_json,
+        'compile_scss': compile_scss,
+        'compile_translations': compile_translations,
+        'install_lib': install_lib,
+        'sdist': eo_sdist,
+    },
+)

src/inkscape_wrapper.py

@@ -20,7 +20,7 @@ inkscape = subprocess.Popen(
 )
 
 for line in inkscape.stdout:
-    if "dbus_" in line and ": assertion 'connection != NULL' failed" in line:
+    if 'dbus_' in line and ": assertion 'connection != NULL' failed" in line:
         continue
 
     sys.stdout.write(line)

src/render-imgs-categories.py

@@ -23,7 +23,8 @@ import subprocess
 import sys
 import xml.etree.ElementTree as ET
 
-inkscape = os.path.abspath(os.path.join(os.path.dirname(__file__), 'inkscape_wrapper.py'))
+base_dir = os.path.dirname(__file__)
+inkscape = os.path.abspath(os.path.join(base_dir, 'inkscape_wrapper.py'))
 
 names = {
     '02': 'famille',
@@ -91,19 +92,25 @@ parser = argparse.ArgumentParser()
 parser.add_argument('path', help='out path')
 parser.add_argument('--primary', default='E0037A')
 parser.add_argument('--secondary', default='6D1F80')
+parser.add_argument('--skip-existing', action='store_true')
 
 args = parser.parse_args()
 path_out = args.path
 
-if not os.path.exists(path_out):
-    os.makedirs(path_out)
+os.makedirs(path_out, exist_ok=True)
 
 for filename in filenames:
     outname = names.get(re.search(r'\d+', filename).group())
+    if (
+        args.skip_existing
+        and os.path.exists(os.path.join(path_out, '%s.png' % outname))
+        and os.path.exists(os.path.join(path_out, '%s-on.png' % outname))
+    ):
+        continue
 
     fd = open('tmp-%s.svg' % outname, 'w')
     fd.write(
-        open(os.path.join('pictos', filename))
+        open(os.path.join(base_dir, 'pictos', filename))
         .read()
         .replace('E0037A', args.primary)
         .replace('6D1F80', args.secondary)
@@ -123,7 +130,7 @@ for filename in filenames:
         ]
     )
 
-    tree = ET.parse(open(os.path.join('pictos', filename)))
+    tree = ET.parse(open(os.path.join(base_dir, 'pictos', filename)))
     parent_map = {c: p for p in tree.iter() for c in p}
     for i in range(10):
         for node in tree.iter():

src/render-imgs-dashboard.py

@@ -24,6 +24,7 @@ import sys
 import tempfile
 import xml.etree.ElementTree as ET
 
+base_dir = os.path.dirname(__file__)
 inkscape = os.path.abspath(os.path.join(os.path.dirname(__file__), 'inkscape_wrapper.py'))
 
 names = {
@@ -55,6 +56,7 @@ parser.add_argument('--selected-width')
 parser.add_argument('--title')
 parser.add_argument('--title-height')
 parser.add_argument('--title-width')
+parser.add_argument('--skip-existing', action='store_true')
 
 args = parser.parse_args()
 path_out = args.path
@@ -72,8 +74,7 @@ for variant in ('normal', 'selected', 'title'):
         'width': getattr(args, variant + '_width'),
     }
 
-if not os.path.exists(path_out):
-    os.makedirs(path_out)
+os.makedirs(path_out, exist_ok=True)
 
 for filename in filenames:
     icon_name = names.get(re.search(r'\d+', filename).group())
@@ -82,12 +83,15 @@ for filename in filenames:
         variant_colour = variant_data.get('colour')
         variant_height = variant_data.get('height')
         variant_width = variant_data.get('width')
-        tree = ET.parse(open(os.path.join('pictos', filename)))
+        tree = ET.parse(open(os.path.join(base_dir, 'pictos', filename)))
         if variant_name:
             out_filepath = os.path.join(path_out, '%s-%s.png' % (icon_name, variant_name))
         else:
             out_filepath = os.path.join(path_out, '%s.png' % icon_name)
 
+        if args.skip_existing and os.path.exists(out_filepath):
+            continue
+
         for node in tree.iter():
             tag_name = node.tag.split('}')[-1]
             if tag_name == 'path':

static/aix-marseille-metropole/_vars.scss

@@ -27,7 +27,7 @@ $nav-item-selected-mode: bottom-border;
 $nav-item-hover: $nav-item-selected-mode;
 $nav-active-color: $red;
 $nav-item-selected-border: 3px solid $nav-active-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-menu-color: $primary-color;
 $nav-border-color: transparent;
 $nav-mobile-menu-item-hover-background: transparent;

static/alpes-maritimes-2018/_custom.scss

@@ -75,18 +75,16 @@ div#header-wrapper {
 		padding-right: 100px;
 	}
 
-	span {
-		a {
-			color: inherit;
-			&:first-child {
-				&::before {
-					content: url('img/icone-connexion.svg');
-					display: inline-block;
-					width: 1em;
-					height: 1em;
-					margin-right: 0.3em;
-					vertical-align: sub;
-				}
+	a {
+		color: inherit;
+		&.account-link, &.login-link {
+			&::before {
+				content: url('img/icone-connexion.svg');
+				display: inline-block;
+				width: 1em;
+				height: 1em;
+				margin-right: 0.3em;
+				vertical-align: sub;
 			}
 		}
 	}
@@ -1049,7 +1047,7 @@ div.tracking-code-input-cell.homepage {
 	form {
 		padding: 0 1em 1em 1em;
 	}
-	input#tracking-code {
+	input.tracking-code--input {
 		margin-right: 1rem;
 	}
 }

static/alpes-maritimes-2022/_vars.scss

@@ -62,7 +62,7 @@ $nav-submenu-background: white;
 $nav-item-selected-color: $nav-active-color;
 $nav-item-selected-background: none;
 $nav-item-hover-color: $nav-active-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $responsive-menu: left-to-right; // custom right-to-left adaptation
 $nav-mobile-menu-background: white;
 $nav-after-image: false;

static/angouleme/_vars.scss

@@ -38,7 +38,7 @@ $nav-full-width-background: false;
 $nav-height: 50px;
 $nav-submenu-background: $blue;
 $nav-item-hover-background: $dark-blue;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-mobile-item-color: black;
 $nav-mobile-item-hover-background: $dark-blue;
 $nav-mobile-item-hover-color: white;

static/arles-2020/_custom.scss

@@ -448,7 +448,7 @@ div.searchcell {
 			border: 1px solid #aaa;
 		}
 	}
-	button {
+	button.combo-search--button {
 		position: absolute;
 		right: 1em;
 		background-color: transparent;
@@ -458,6 +458,7 @@ div.searchcell {
 		width: 35px;
 		padding: 5px 0px;
 		text-indent: -99999px;
+		margin-right: 0.25em;
 		&::before {
 			position: absolute;
 			right: 5px;
@@ -584,6 +585,7 @@ hr {
 
 
 .list-with-images {
+	@extend .bare-list;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;

static/armentieres/_combo.scss

@@ -11,7 +11,13 @@
 
 	&--content {
 		.cell {
-			padding: 0 5rem 2rem 5rem;
+			padding: 2rem 5rem 2rem 5rem;
+		}
+
+		.text-cell {
+			h1, h2, h3, p {
+				margin-bottom: 0;
+			}
 		}
 	}
 
@@ -30,17 +36,23 @@
 		padding: 0.5rem 4rem !important;
 	}
 
+	&-item-content {
+		margin-bottom: 0 !important;
+	}
+
 	&-nav label {
 		background-color: white;
 	}
 
 	&-item-title {
+		@extend h1;
 		line-height: 1 !important;
-		font-size: $fz-1;
 	}
 
 	&-item-description {
 		max-width: 100% !important; // too complex selector in core
+		font-family: 'Archivo Black', sans-serif;
+		margin-bottom: 0;
 	}
 }
 
@@ -51,7 +63,7 @@ div#sidebar {
 		display: flex;
 		align-items: center;
 		color: $red;
-		font-size: $fz-3;
+		font-size: $title-font-size;
 		&::after {
 			content: '';
 			background: $gray-light;
@@ -79,7 +91,7 @@ div#sidebar {
 	}
 
 	&.foldable > div > h2:first-child {
-		height: 70px;
+		min-height: 50px;
 		margin: 0;
 		padding-left: 30px;
 
@@ -90,6 +102,7 @@ div#sidebar {
 		border: $yellow solid $gray;
 		color: black;
 		text-transform: none;
+		font-size: $fz-5;
 
 		&:hover {
 			box-shadow: $widget-focus-box-shadow;
@@ -116,24 +129,34 @@ div#sidebar {
 		position: relative;
 
 		> div > h2:first-child {
-			padding-left: 100px;
+			padding-left: 70px;
 
 			@media($max-mobile-viewport) {
-				padding-left: 60px;
+				padding-left: 40px;
 			}
 		}
 
-		picture img {
+		picture {
 			position: absolute;
-			top: 15px;
-			left: 30px;
-			height: 40px;
-			padding: 0;
+			top: 0;
+			left: 10px;
+			height: 50px;
+			width: 60px;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 0.5rem;
 
 			@media($max-mobile-viewport) {
-				left: 20px;
-				height: 30px;
-				top: 18px;
+				left: 5px;
+				width: 35px;
+			}
+
+			img {
+				margin: 0;
+				padding: 0;
+				max-height: 100%;
 			}
 		}
 	}
@@ -242,11 +265,6 @@ div.wcscurrentformscell {
 // Search cell
 .gru-content div.searchcell {
 	.combo-search {
-		&--hint {
-			padding: 0;
-			margin-bottom: 1rem;
-		}
-
 		&--button {
 			display: none;
 		}
@@ -298,7 +316,7 @@ div.wcscurrentformscell {
 		h2:first-child {
 			color: black;
 			background: transparent;
-			font-size: $fz-4;
+			font-size: $title-font-size;
 			margin: 0;
 			padding: 0;
 
@@ -427,7 +445,7 @@ div.wcscurrentformscell {
 	}
 
 	&--button {
-		@extend %inverted-button;
+		@extend %black-button;
 
 		margin: 0.5rem 0;
 
@@ -445,8 +463,8 @@ div.wcscurrentformscell {
 
 .arm-suggest {
 	&--content {
-		height: 80px;
-		padding: 0.5rem 0 0.5rem 1rem;
+		min-height: 80px;
+		padding: 1rem;
 
 		display: grid;
 		grid-template-columns: 1fr auto;
@@ -548,6 +566,10 @@ div.wcscurrentformscell {
 			font-size: $fz-small;
 			margin-left: 1rem;
 		}
+
+		&:hover {
+			background: $yellow !important;
+		}
 	}
 }
 
@@ -567,4 +589,5 @@ div.wcscurrentformscell {
 
 %cell-links-list {
 	@include arm-link-icon('user');
+	@include arm-link-icon('form');
 }

static/armentieres/_common.scss

@@ -5,26 +5,52 @@
 
 h1 {
 	font-size: $fz-1;
-	font-family: 'Archivo Black', 'Rubik', sans-serif;
+	font-family: 'Archivo Black', sans-serif;
 	margin-top: 0;
+
+	@media($max-mobile-viewport) {
+		font-size: $fz-2;
+	}
 }
 
 h2 {
 	font-size: $fz-2;
-	font-family: 'Viga', 'Rubik', sans-serif;
+	font-family: 'Viga', sans-serif;
 	margin-top: 0;
+
+	@media($max-mobile-viewport) {
+		font-size: $fz-3;
+	}
 }
 
 h3 {
 	font-size: $fz-3;
-	font-family: 'Viga', 'Rubik', sans-serif;
+	font-family: 'Viga', sans-serif;
 	margin-top: 0;
+
+	@media($max-mobile-viewport) {
+		font-size: $fz-4;
+	}
 }
 
 h4 {
 	font-size: $fz-4;
-	font-family: 'Viga', 'Rubik', sans-serif;
+	font-family: 'Viga', sans-serif;
 	margin-top: 0;
+
+	@media($max-mobile-viewport) {
+		font-size: $fz-5;
+	}
+}
+
+h5 {
+	font-size: $fz-5;
+	font-family: 'Viga', sans-serif;
+	margin-top: 0;
+
+	@media($max-mobile-viewport) {
+		font-size: 1rem;
+	}
 }
 
 li {

static/armentieres/_footer.scss

@@ -7,6 +7,7 @@
 	.back-top {
 		position: absolute;
 		right: 50px;
+		top: -70px;
 
 		&--link {
 			border-radius: 13px;

static/armentieres/_header.scss

@@ -51,13 +51,19 @@ div.gru-nav {
 		}
 
 		& + ul {
-			position: static;
+			@media($min-desktop-viewport) {
+				position: static;
+			}
 			width: 100%;
 
 			&:before {
 				height: 0;
 			}
 		}
+
+		&.toggled + ul {
+			height: fit-content;
+		}
 	}
 
 	.menu {

static/armentieres/_vars.scss

@@ -15,16 +15,17 @@ $secondary-color: $yellow;
 
 
 /// Typo
-$font-family: Rubik, sans-serif;
+$font-family: Manrope, sans-serif;
 $link-color: $primary-color;
 $link-decoration: none;
 $link-hover-decoration: underline;
 
 $base-font: 16;
-$fz-1: 1rem * 60 / 16;
-$fz-2: 1rem * 37 / 16;
-$fz-3: 1rem * 26 / 16;
-$fz-4: 1rem * 22 / 16;
+$fz-1: 2.5rem;
+$fz-2: 2rem;
+$fz-3: 1.6rem;
+$fz-4: 1.3rem;
+$fz-5: 1.1rem;
 $fz-small: 14em / $base-font;
 $fz-xsmall: 11em / $base-font;
 $font-size: 1rem;
@@ -41,7 +42,6 @@ $notification-icon-size: 2rem;
 $sidebar-columns-gutter: 50px;
 $back-top-display: block;
 $back-top-icon-character: "\f062";
-$back-top-layout-position: fixed (bottom: 300px);
 
 $transition: 0.2s;
 
@@ -56,7 +56,7 @@ $nav-border-color: transparent;
 $nav-button-background: transparent;
 $nav-button-bar-height: 4px;
 $nav-button-color: $primary-color;
-$nav-color: $gray;
+$nav-color: $gray-dark;
 $nav-item-hover-background: transparent;
 $nav-item-hover-border: $primary-color 4px solid;
 $nav-item-hover-color: #333333;
@@ -67,9 +67,9 @@ $nav-mobile-bottom-bar-item-hover-color: black;
 $nav-mobile-bottom-bar-item-selected-background: $primary-color;
 $nav-mobile-bottom-bar-item-selected-color: black;
 $nav-mobile-menu-background: white;
-$nav-mobile-menu-item-color: $gray;
+$nav-mobile-menu-item-color: $gray-dark;
 $nav-mobile-menu-item-hover-color: $gray-dark;
-$nav-submenu-color: $gray;
+$nav-submenu-color: $gray-dark;
 $responsive-menu: left-to-right;
 
 // Title
@@ -77,8 +77,7 @@ $title-padding: 0;
 $title-color: black;
 $title-font-size: $fz-4;
 $title-font-family: 'Viga', sans-serif;
-$title-transform: uppercase;
-$title-weight: 700;
+$title-weight: normal;
 $title-background: transparent;
 
 // Carrousel
@@ -108,12 +107,13 @@ $footer-background: $gray-dark;
 $wcs-step-current-label-color: black;
 $wcs-step-color: $gray;
 $wcs-step-border-bottom: 1px solid $gray-light;
-$wcs-step-current-border-bottom: 2px solid $gray-light;
+$wcs-step-current-border-bottom: 1px solid $gray-light;
 $form-sidebar-width: 25%;
 $form-sidebar-gutter: 3rem;
 
 $form-accent-color: $primary-color;
 $widget-border-radius: $border-radius;
+$widget-unique-checkbox-position: left;
 $button-color: black;
 $button-background: $secondary-color;
 $buttons-order: previous (grow), cancel (grow), submit;

static/armentieres/_wcs.scss

@@ -5,21 +5,21 @@
 	&--content {
 		max-width: $width;
 		margin: 0 auto;
-		padding: 1.5rem 0 2.5rem 0;
+		padding: 2rem 0 2rem 0;
 	}
 
 	&--title {
 		margin: 0;
-		max-width: 35rem;
 		text-transform: uppercase;
-		font-size: $fz-1;
+		font-size: $fz-2;
 	}
 
 	&--description {
 		@media($max-mobile-viewport) {
 			display: none;
 		}
-		margin-top: 4rem;
+		margin-top: 1rem;
+		font-family: 'Viga', sans-serif;
 	}
 
 	@media($max-mobile-viewport) {
@@ -29,6 +29,7 @@
 
 		&--title {
 			text-align: center;
+			font-size: $fz-4;
 		}
 	}
 }
@@ -43,10 +44,11 @@ div#tracking-code {
 		flex-direction: column;
 		h3 {
 			background: transparent;
-			color: black;
+			color: $gray-dark;
 			text-transform: none;
 			text-align: center;
 			margin-bottom: 0.7rem;
+			margin-top: 0;
 		}
 		a {
 			text-align:center;
@@ -54,6 +56,7 @@ div#tracking-code {
 			padding: 0.5rem;
 			border-radius: $border-radius;
 			font-weight: bold;
+			font-family: 'Viga', sans-serif;
 		}
 	}
 
@@ -90,10 +93,10 @@ div#tracking-code {
 
 %black-button {
 	@extend %button;
-	background: black;
+	background: $gray-dark;
 	color: white;
 	&:hover {
-		background: black;
+		background: $gray-dark;
 		color: white;
 	}
 }
@@ -113,6 +116,10 @@ div#tracking-code {
 	}
 }
 
+div.widget div.title, div.hint {
+	margin-bottom: 0.5em;
+}
+
 input, input[type="search"], textarea, select {
 	transition: $transition;
 }
@@ -200,6 +207,15 @@ input::placeholder {
 }
 
 // Steps
+.wcs-steps {
+	h2 {
+		margin: 1rem 0 0 0;
+		display: block;
+		color: $red;
+		font-size: $fz-3;
+	}
+}
+
 .wcs-step {
 	border-radius: 0;
 	align-items: center;
@@ -207,10 +223,6 @@ input::placeholder {
 		font-weight: normal;
 	}
 
-	&--marker-nb {
-		font-weight: bold;
-	}
-
 	@media($min-desktop-viewport) {
 		&.step-before::after {
 			content: '\f00c';

static/armentieres/style.scss

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 
 @import '../includes/fonts/archivo-black';
-@import '../includes/fonts/rubik';
 @import '../includes/fonts/viga';
+@import '../includes/fonts/manrope';
 
 @import 'vars';
 @import '../includes/publik';

static/arpajon/_custom.scss

@@ -140,9 +140,7 @@ div#rub_service > h2:first-child,
 	}
 }
 
-.column div.a2-block,
-.gru-content div.cell,
-div.block {
+%cell {
 	padding: 0;
 
 	& h2 + div {

static/atreal-ideau/_custom.scss

@@ -198,10 +198,11 @@ div#main-content-wrapper {
 }
 
 // Cells
-.column div.a2-block,
-.gru-content div.cell,
-.block {
+%cell {
 	margin-bottom: $columns-gutter;
+	input, input[type="search"], textarea, select {
+		background: $widget-background-in-cell;
+	}
 }
 div.gru-content .cell.trackingcodeinputcell button {
 	color: white;
@@ -210,14 +211,6 @@ div.gru-content .cell.text-cell > div {
 	padding-top: 0.5rem;
 	padding-bottom: 0.5rem;
 }
-div.a2-continue,
-div.a2-block,
-.gru-content .cell,
-.block {
-	input, input[type="search"], textarea, select {
-		background: $widget-background-in-cell;
-	}
-}
 .a2-block {
 	padding: 1rem;
 }

static/avray/_vars.scss

@@ -30,7 +30,7 @@ $nav-item-selected-border: 4px solid transparent;
 $nav-item-hover-background: transparent;
 $nav-item-hover-color: $nav-item-selected-color;
 $nav-item-hover-border: 4px solid $primary-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $footer-background: #e0e0e0;
 $footer-color: black;

static/beaulieu/_vars.scss

@@ -13,7 +13,7 @@ $nav-active-color: $primary-color;
 $nav-submenu-background: #f1f1f1;
 $nav-submenu-color: #222;
 $nav-item-selected-mode: bottom-border;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $border-radius: 3px;
 $button-background: $primary-color;
 $title-background: $primary-color;

static/bouches-du-rhone/_custom.scss

@@ -152,3 +152,27 @@ span.pastille-rouge {
 	font-family: sans-serif;
 	color: #800;
 }
+
+#login-page {
+	.block-saml {
+		display: flex;
+	}
+
+	.block-saml > div {
+		margin: auto auto;
+		display: block;
+		height: 10em;
+		width: 20em;
+		text-align: center;
+	}
+
+	.block-saml > div > form > button {
+		display: flex;
+		align-items: center;
+		padding: revert
+	}
+
+	.block-saml > div > form > span {
+		margin-left: 5px;
+	}
+}

static/bouches-du-rhone/_vars.scss

@@ -22,7 +22,7 @@ $nav-menu-color: $second-blue;
 $nav-active-color: $second-blue;
 $nav-item-hover-color: $blue-grey;
 $nav-item-selected-background: transparent;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-mobile-mode: hidden;
 $nav-after-image: false;
 

static/bouches-du-rhone/config.json

@@ -2,6 +2,11 @@
    "label" : "Bouches-du-Rhône",
    "settings" : {
       "combo" : {
+         "COMBO_ASSET_SLOTS.update" : {
+            "button:adfs" : {
+               "label" : "Bouton : Connexion ADFS"
+            }
+         },
          "JSON_CELL_TYPES.update" : {
             "cd13_dossier_contacts" : {
                "cache_duration" : 3600,
@@ -293,6 +298,36 @@
                "url" : "{{ passerelle_url }}rsa13/{% firstof slug rsa13_slug \"rsa\" %}/platform/{{ plateforme_id }}/beneficiaire/{{ brsa_id }}/transport/?email={{ user_email }}&ip={{ request.META.REMOTE_ADDR }}",
                "varnames" : []
             },
+            "rsa13-beneficiaire-evenement" : {
+               "cache_duration" : 0,
+               "force_async" : true,
+               "form" : [
+                  {
+                     "label" : "Identifiant du connecteur",
+                     "required" : false,
+                     "varname" : "slug"
+                  }
+               ],
+               "log_errors" : false,
+               "name" : "RSA Extranet : bénéficiaire - évènement",
+               "url" : "{{ passerelle_url }}rsa13/{% firstof slug rsa13_slug \"rsa\" %}/platform/{{ plateforme_id }}/beneficiaire/{{ brsa_id }}/evenement/{{ evenement_id }}/?email={{ user_email }}&ip={{ request.META.REMOTE_ADDR }}",
+               "varnames" : []
+            },
+            "rsa13-beneficiaire-evenements" : {
+               "cache_duration" : 0,
+               "force_async" : true,
+               "form" : [
+                  {
+                     "label" : "Identifiant du connecteur",
+                     "required" : false,
+                     "varname" : "slug"
+                  }
+               ],
+               "log_errors" : false,
+               "name" : "RSA Extranet : bénéficiaire - évènements",
+               "url" : "{{ passerelle_url }}rsa13/{% firstof slug rsa13_slug \"rsa\" %}/platform/{{ plateforme_id }}/beneficiaire/{{ brsa_id }}/evenement/?email={{ user_email }}&ip={{ request.META.REMOTE_ADDR }}",
+               "varnames" : []
+            },
             "rsa13-coordinateurs" : {
                "additional-data" : [
                   {

static/boussu-2022/_vars.scss

@@ -19,7 +19,7 @@ $nav-item-selected-background: $nav-background;
 $nav-item-selected-color: white;
 $nav-item-hover-background: $nav-background;
 $nav-item-hover-color: white;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-submenu-background: $nav-background;
 $nav-submenu-color: $nav-color;
 $nav-button-background: $red;

static/braine-l-alleud/_vars.scss

@@ -16,7 +16,7 @@ $nav-item-selected-background: $nav-background;
 $nav-item-selected-color: black;
 $nav-item-hover-background: $nav-background;
 $nav-item-hover-color: black;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-submenu-background: $nav-background;
 $nav-submenu-color: $nav-color;
 $nav-button-background: white;

static/cabourg/_custom.scss

@@ -0,0 +1,51 @@
+#header-wrapper {
+	height: $header-height;
+}
+
+#logo a {
+	margin-top: 1em;
+	height: 130px;
+	line-height: 130px;
+	color: $primary-color;
+	font-weight: normal;
+	@media ($max-mobile-viewport) {
+		margin-top: 0.25em;
+		height: 80px;
+		line-height: 80px;
+	}
+}
+
+#main-content {
+	background: white;
+}
+
+@media ($max-mobile-viewport) {
+	#nav-wrapper {
+		margin-top: calc(-1 * (#{$nav-menu-side}));
+		a {
+			font-family: Verdana, Arial, sans-serif;
+			font-weight: normal;
+		}
+	}
+	#logo {
+		padding-left: 0;
+	}
+	#header-wrapper {
+		height: $header-mobile-height;
+	}
+}
+
+#footer .cell {
+	margin: 0;
+	&.coordonnees {
+		background: white;
+		color: black;
+	}
+	&.footer-droite {
+		background: $secondary-color;
+		color: white;
+		a {
+			color: white;
+		}
+	}
+}

static/cabourg/_vars.scss

@@ -0,0 +1,40 @@
+$primary-color: #737B4C;
+$secondary-color: rgb(168, 35, 42);
+
+$font-family: Raleway, Arial, sans-serif;
+$font-size: 16px;
+
+$width: 1300px;
+
+$link-color: $secondary-color;
+
+$title-color: $primary-color;
+$title-weight: bold;
+$title-font-size: $font-size * 1.2;
+$title-background: transparent;
+
+$header-height: 200px;
+$header-mobile-height: 140px;
+
+$button-color: white;
+$button-background: $secondary-color;
+$button-hover-background: rgb(60, 58, 55);
+$button-border-radius: 5px;
+
+$nav-button-background: $secondary-color;
+$nav-color: $primary-color;
+$nav-item-selected-mode: bottom-border;
+$nav-item-selected-border: 4px solid $secondary-color;
+$nav-active-color: lighten($secondary-color, 5);
+$nav-menu-side: 46px;
+
+$nav-mobile-menu-item-color: rgb(102, 102, 102);
+$nav-mobile-bottom-bar-background: $secondary-color;
+$nav-mobile-bottom-bar-color: white;
+$nav-mobile-menu-background: white;
+
+$cell-entry-hover-background: #fafafa;
+$cell-border: 1px solid rgb(250, 243, 243);
+$cell-entry-border: $cell-border;
+
+$footer-background: rgb(191, 191, 191);

static/cabourg/config.json

@@ -0,0 +1,14 @@
+{
+  "label": "Cabourg",
+  "variables": {
+    "theme_color": "#b1b993"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" }
+      }
+    }
+  }
+}

static/cabourg/style.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import '../includes/fonts/raleway';
+@import 'custom';

static/caen/_custom.scss

@@ -94,20 +94,18 @@ label {
 }
 
 %cancel-button {
-	&, &:hover {
-		padding: 1.1em 2em 1em;
-		background-color: #fff;
-		color: black;
-		border-color: $gray;
-	}
+	--background: #fff;
+	--color: black;
+	padding: 1.1em 2em 1em;
+	border-color: $gray;
 }
 
 %orange-button {
-	@extend %cancel-button;
-	&, &:hover {
-		background-color: $orange !important;
-		border-color: $orange;
-	}
+	padding: 1.1em 2em 1em;
+	--color: black;
+	--background: #{$orange};
+	--hover-background: #{$orange};
+	border-color: $orange;
 }
 	
 //
@@ -492,7 +490,7 @@ $topmessage-alt :
 	}
 }
 
-div.tracking-code-input-cell {
+.gru-content div.tracking-code-input-cell {
 	@extend .cell-with-dash;
 	@extend .cell-blue;
 	p {
@@ -507,20 +505,20 @@ div.tracking-code-input-cell {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: stretch;
-	}
-	input#tracking-code {
-		flex: 1 1 0;
-		margin: 0;
-		min-width: 8em;
-	}
-	button {
-		margin-right: 0;
-		border-radius: 3px;
-		margin-left: 0.25em;
-		&:hover {
-			background: $orange;
-			color: black;
-			box-shadow: none;
+		input.tracking-code--input {
+			flex: 1 1 0;
+			margin: 0;
+			min-width: 8em;
+		}
+		button {
+			@extend %button;
+			--hover-background: #{$orange};
+			margin-right: 0;
+			border-radius: 3px;
+			margin-left: 0.25em;
+			&:hover {
+				box-shadow: none;
+			}
 		}
 	}
 	&.cell h2 + div {
@@ -619,10 +617,6 @@ div#rub_service {
 	}
 }
 
-div.gru-content .submit-button button,
-div.gru-content button.submit-button  {
-	@extend %orange-button;
-}
 div.gru-content .previous-button button {
 	@extend %cancel-button;
 }
@@ -701,10 +695,11 @@ footer {
 
 // MISC
 
-a.lien {
+#main-content a.lien {
 	&-telechargement, &-externe {
 		text-transform: uppercase;
 		font-weight: bold;
+		color: $link-color;
 		&::before {
 			margin-right: 0.45em;
 			line-height: 1;

static/caen/_vars.scss

@@ -68,6 +68,7 @@ $button-background: black;
 $buttons-order: cancel (grow), previous, submit;
 $button-hover-color: black;
 $button-hover-background: white;
+$submit-button-style: "%orange-button";
 
 $form-sidebar-gutter: $columns-gutter;
 $form-sidebar-width: 25.5%;
@@ -89,3 +90,5 @@ $footer-link-color: white;
 
 $timetable-cell-background: $green;
 $timetable-cell-hover-background: $violet;
+
+$notification-force-link-style: false;

static/calvados-cd14/_vars.scss

@@ -12,7 +12,7 @@ $link-color: $blue;
 $nav-background: #f4f2e6;
 $nav-active-color: $primary-color;
 $nav-item-selected-mode: bottom-border;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-submenu-color: $font-color;
 $nav-after-image-height: 300px;
 $nav-item-selected-border: 4px solid $blue;

static/calvados-intranet-cd14/_vars.scss

@@ -41,7 +41,7 @@ $nav-item-selected-mode: bottom-border;
 $nav-submenu-color: $font-color;
 $nav-after-image-height: 300px;
 $nav-item-selected-border: 4px solid $primary-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $cell-border: none;
 $cell-image-position: top;

static/cantal/_vars.scss

@@ -17,7 +17,7 @@ $nav-item-selected-color: $primary-color;
 $nav-item-selected-background: white;
 $nav-item-hover-color: $primary-color-focus;
 $nav-item-hover-background: white;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $button-color: white;
 $button-background: $primary-color;

static/cap-atlantique/_custom.scss

@@ -123,7 +123,8 @@ div#nav {
 //
 //	CELLS
 //
-.list-of-forms-cell {
+.list-of-forms-cell,
+.link-list-cell {
 	.gru-content &.cell {
 		margin-bottom: $columns-gutter;
 		border: none;
@@ -141,13 +142,33 @@ div#nav {
 				right: 1rem;
 			}
 		}
-		&.has-asset-picture picture {
-			display: block;
-			text-align: center;
-			border-bottom: $cell-entry-border;
-			img {
-				display: inline-block;
+		&.has-asset-picture {
+			> div {
+				display: grid;
+				grid-template-rows: 4rem auto;
+				grid-template-columns: auto 1fr;
+
+				& > h2 {
+					grid-area: 1 / 2 / 2 / 2;
+					height: 100%;
+					align-self: center;
+					border-bottom: $cell-entry-border;
+				}
+
+				& > picture {
+					grid-area: 1 / 1 / 2 / 2;
+					border-bottom: $cell-entry-border;
+
+					img {
+						height: 4rem;
+					}
+				}
+
+				& > .links-list {
+					grid-area: 2 / 1 / 3 / 3;
+				}
 			}
+
 		}
 	}
 }
@@ -208,6 +229,7 @@ div#rub_service {
 
 	h3 {
 		@extend h2;
+		margin-bottom: 1em;
 		padding-left: 0;
 
 	}

static/castelnau-le-lez/_vars.scss

@@ -10,7 +10,7 @@ $nav-color: $primary-color;
 $nav-active-color: $primary-color;
 $nav-submenu-color: $primary-color;
 $nav-full-width-background: true;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $border-radius: 0px;
 $button-background: $primary-color;
 $title-background: transparent;

static/cci/_combo.scss

@@ -73,9 +73,7 @@
 	margin-top: 4rem;
 }
 
-.column div.a2-block,
-.gru-content div.cell,
-.block {
+%cell {
 	margin-bottom: 1.8rem;
 }
 
@@ -226,7 +224,7 @@ div.text-cell {
 }
 
 .tracking-code-input-cell {
-	input#tracking-code {
+	input.tracking-code--input {
 		width: 100%;
 		margin-bottom: 1em;
 	}

static/cinor-2021/_vars.scss

@@ -33,7 +33,7 @@ $nav-item-hover-background: $font-color;
 $nav-item-hover-color: white;
 $nav-item-selected-background: transparent;
 $nav-item-selected-color: $nav-active-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $responsive-menu: left-to-right;
 $nav-menu-side: $topLinks_height;

static/clapiers/_vars.scss

@@ -10,7 +10,7 @@ $nav-background: #f9f9f9;
 $nav-color: $font-color;
 $nav-submenu-color: $font-color;
 $nav-active-color: $primary-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $button-background: #219bd3;
 $title-background: #219bd3;
 $title-color: white;

static/clermont-metropole/_vars.scss

@@ -22,7 +22,7 @@ $nav-background: transparent;
 $nav-active-color: $primary-color;
 $nav-item-hover-background: #ffffff;
 $nav-item-hover-color: $primary-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-color: #ffffff;
 
 $nav-mobile-menu-background: $primary-color;

static/clisson-sevre-et-maine-agglo/_vars.scss

@@ -15,7 +15,7 @@ $nav-active-color: $primary-color;
 $nav-item-selected-color: white;
 $nav-item-hover-color: white;
 $nav-item-selected-mode: bottom-border;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $border-radius: 0px;
 $button-background: $primary-color;
 $title-background: $primary-color;

static/cnil-2023/_custom.scss

@@ -0,0 +1,722 @@
+//
+//	Typo
+//
+
+h1, .h1 {
+	font-size: $fz-1;
+	font-family: $ff-ss-serif-cond;
+	text-align: center;
+	@media ($max-mobile-viewport) {
+		font-size: $fz-1m;
+	}
+}
+h2, .h2 {
+	@extend %title;
+	color: $font-color;
+}
+h3, .h3 {
+	font-size: $fz-2;
+	color: $font-color;
+	font-weight: 300;
+	text-transform: uppercase;
+	@media ($max-mobile-viewport) {
+		font-size: $fz-2m;
+	}
+}
+h4, .h4 {
+	font-size: $fz-3;
+	color: $font-color;
+	font-family: $ff-ss-serif-cond;
+	font-weight: bold;
+	@media ($max-mobile-viewport) {
+		font-size: $fz-3m;
+	}	
+}
+a {
+	&:hover {
+		color: $blue-dark;
+	}
+}
+.arrow-link {
+	font-family: $ff-ss-serif-cond;
+	font-weight: bold;
+	text-decoration: none;
+	display: block;
+	&::before {
+		content: "";
+		display: inline-block;
+		width: 1em;
+		height: 0.9em;
+		background: url(icons/arrow-right.svg) no-repeat;
+		background-size: 100%;
+		margin-right: .5em;
+		text-decoration: none;
+	}
+}
+.cnil-blue-title {
+	color: $blue;
+}
+label {
+	color: $gray;
+	font-size: $fz-small;
+	font-weight: normal;
+	.required {
+		color: $error-color;
+	}
+}
+
+
+//
+//	Layout
+//
+
+div#header,
+div#footer,
+div#main-content-wrapper,
+.page-width,
+.header-width {
+	padding-left: $columns-gutter;
+	padding-right: $columns-gutter;
+}
+@media ($max-mobile-viewport) {
+	.central-content #sidebar {
+		margin: 0;
+	}
+	#columns-wrapper {
+		padding: 0;
+	}	
+}
+
+
+//
+//	Header
+//
+
+$header-padding-desktop: 28px;
+$header-padding-mobile: 12px;
+
+.portal-profil {
+	background-color: var(--portal-profil-color);
+	color: white;
+	font-family: $ff-ss-serif;
+	text-transform: uppercase;
+	p {
+		margin: 0;
+		padding: 0.2em 0;
+	}
+}
+#top {
+	display: flex;
+	align-items: flex-end;
+	@media ($max-mobile-viewport) {
+		flex-wrap: wrap;
+	}
+}
+#logo.has-logo {
+	position: relative;
+	flex-grow: 1;
+	line-height: 0;
+	padding-top: $header-padding-desktop;
+	padding-bottom: $header-padding-desktop;
+	text-align: left;
+	@media ($max-mobile-viewport) {
+		padding-top: $header-padding-mobile;
+		padding-bottom: $header-padding-mobile;
+		padding-left: $nav-menu-side + 10px;
+	}
+	a::before {
+		@media ($max-mobile-viewport) {
+			height: 24px;
+			width: 79px;
+		}
+	}
+}
+
+#toplinks {
+	position: relative;
+	font-family: $ff-ss-serif;
+	font-size: $fz-xsmall;
+	margin-bottom: $header-padding-desktop;
+	@media ($max-mobile-viewport) {
+		margin-bottom: $header-padding-mobile;
+	}
+	@media ($min-desktop-viewport) {
+		white-space: nowrap;
+	}
+
+	.logout {
+		vertical-align: text-top;
+		&:hover {
+			filter: brightness(0.5);
+		}
+	}
+}
+.toplinks--list-item:first-child {
+	&::after {
+		content: "⋅"
+	}
+}
+
+
+//
+//	NAV
+//
+
+.site-nav {
+	flex-grow: 1;
+	@media (max-width: $nav-mobile-limit) {
+		order: 1;
+		flex-basis: 100%;
+	}
+}
+.gru-nav-wrapper {
+	@media (max-width: $nav-mobile-limit) {
+		margin-top: calc(-1 * #{$nav-menu-side} - 7px);
+	}
+}
+div.gru-nav {
+	.gru-nav-button {
+		margin-left: 0;
+		margin-bottom: 12px;
+	}
+	> ul {
+		margin: 0;
+	}
+}
+// hide nav to anonymous user
+.anonymous-user {
+	.site-nav {
+		display: none;
+	}
+	#logo.has-logo {
+		@media ($max-mobile-viewport) {
+			padding-left: 0;
+		}
+	}	
+}
+
+
+//
+//	Main
+//
+
+main {
+	margin-top: 20px;
+}
+
+.cnil-page-header {
+	p {
+		@extend .h3;
+		margin-bottom: 2rem;
+		text-transform: none;
+		text-align: center;
+		font-family: $ff-ss-serif-cond;
+		strong {
+			font-weight: inherit;
+		}
+	}
+}
+
+
+//
+//	Cells
+//
+
+%title {
+	line-height: 1.1;
+}
+
+// foldable icon to left
+div.cell.foldable > div > h2:first-child {
+	display: flex;
+	padding-right: extract-right($title-padding);
+	&::after {
+		font-size: $fz-3;
+		color: $font-color;
+		position: static;
+		display: inline-block;
+		flex: 0 0 1.5rem;
+		margin-right: 1rem;
+		text-align: center;
+		line-height: 1;
+		order: -1;
+		align-self: center;
+	}
+}
+// More left padding on cells
+@media($min-desktop-viewport) {
+	.page-template-standard-sidebar #columns .cell {
+		&:not(.foldable) .cell--title,
+		&:not(.foldable) h2:first-child,
+		h2:first-child ~ * {
+			padding-left: 3.5rem;
+		}
+		div.links-list ul {
+			padding-left: 0;
+		}
+	}
+}
+// Default links-list
+%cell-links-list {
+	padding-left: 1em;
+	padding-right: 1em;
+	& > li > a {
+		font-family: $ff-ss-serif;
+		font-weight: 600;
+		padding-left: 0;
+		padding-right: 0;
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+	li div.description {
+		padding: 0;
+		p {
+			margin-right: 0;
+			margin-left: 0;
+		}
+	}
+}
+
+// Custom cells
+.bordered-links-list {
+	.gru-content &.cell {
+		.links-list ul {
+			& > li {
+				position: relative;
+				border: 1px solid $gray-dark;
+				background-color: $gray-xxlight;
+				margin-bottom: 1em;
+				padding: 0 1em;
+			}
+			& > li > a {
+				position: static;
+				&::before {
+					content: "";
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					right: 0;
+				}
+			}
+		}
+	}
+}
+.two-cols-links-list {
+	.gru-content &.cell {
+		.links-list ul {
+			@extend .fx-grid;
+			--grid-gutter: 1em;
+			padding: 1em;
+			@media ($min-desktop-viewport) {
+				--nb-cols: 2;
+			}
+		}
+	}
+}
+.cell-light-title {
+	.gru-content &.cell {
+		.cell--title, h2:first-child {
+			@extend .h3;
+		}
+	}
+}
+.arrow-links-list {
+	.gru-content &.cell {
+		.links-list ul {
+			& > li {
+				border: none;
+			}
+			& > li:not(:last-child) a {
+				padding-bottom: 0;
+			}
+			& > li > a {
+				display: flex;
+				flex-wrap: nowrap;
+				@extend .arrow-link;
+			}
+		}
+	}
+}
+
+.wcs-current-drafts-cell,
+.wcs-current-forms-cell {
+	.gru-content &.cell {
+		// Forms counter
+		.cell--title, h2:first-child {
+			display: flex;
+			.cnil-forms-counter {
+				flex-grow: 1;
+				text-align: right;
+				color: $font-color;
+				margin-left: .66em;
+			}
+		}
+		@extend .bordered-links-list;
+		.list-of-forms {
+			ul > li {
+				padding-left: 48px;
+				background: url(icons/file.svg) no-repeat;
+				background-position: 16px center;
+				background-size: 16px auto;
+			}
+			.form-title {
+				flex-grow: 1;
+				font-family: $ff-serif;
+			}
+			.form-number {
+				flex-grow: 0;
+				font-family: $ff-serif;
+				font-weight: normal;
+				opacity: 1;
+				color: $gray;
+				font-size: $font-size-small;
+			}
+			.form-digest {
+				color: $font-color;
+			}
+			.form-status {
+				font-family: $ff-serif;
+				font-size: $fz-small;
+				color: $blue;
+			}
+		}
+	}
+}
+
+#sidebar {
+	.cell {
+		@extend .cell-light-title;
+	}
+	.tracking-code-input-cell form {
+		input {
+			margin-bottom: 1rem;
+			margin-top: 0;
+		}	
+		button {
+			@extend %button;
+			vertical-align: baseline;
+			margin-bottom: 1rem;
+		}
+
+	} 
+
+} 
+
+//
+//	WCS & Forms
+//
+
+%button {
+	text-transform: uppercase;
+	font-family: $ff-ss-serif-cond;
+	font-weight: bold;
+	box-shadow: none !important;
+	&:disabled {
+		--background: #{$gray};
+	}
+}
+
+%submit-button {
+	--background: #{$blue};
+	border-color: var(--background);
+}
+%cancel-button {
+	--color: #{$blue};
+	--background: white;
+	--hover-color: #{$blue-dark};
+	--hover-background: white;
+	border-color: currentColor;
+}
+
+ div.buttons {
+	.previous-button button {
+		@extend %cancel-button;
+	}
+	.cancel-button button {
+		&:not(:hover) {
+			border-color: white;
+		}
+	}
+}
+
+$form-padding: 1rem;
+
+%form-separator {
+	&::before {
+		content: "";
+		display: block;
+		background-color: $body-background;
+		height: $fz-small;
+		margin-bottom: $form-padding;
+		margin-left: -1*$form-padding;
+		margin-right: -1*$form-padding;
+	}
+}
+
+div#rub_service {
+	display: flow-root;
+	.drafts-recall,
+	form {
+		padding: $form-padding;
+	}
+	.drafts-recall {
+		border-bottom: $form-padding solid $body-background;
+	}
+	h3 {
+		@extend .h4;
+	}
+	h3.separator {
+		@extend %form-separator;
+	}
+	h4 {
+		font-size: 1rem;
+		color: $blue;
+		font-family: $ff-serif;
+		font-weight: normal;
+		&::before {
+			content: "– "
+		}
+	}
+	div.buttons {
+		@extend %form-separator;
+		&::before {
+			flex-basis: calc(100% + #{$form-padding*2)};
+		}
+	}
+	div.dataview {
+		padding: $form-padding;
+		.label {
+			@extend label;
+		}
+	}
+	.back-home-button {
+		padding: $form-padding;
+		a {
+			@extend .arrow-link;
+		}
+	}
+}
+
+.widget-with-error {
+	input, textarea, select {
+		border-color: $error-color;
+		border-width: 1px;
+		outline: 1px solid $error-color;
+	}
+}
+
+div#tracking-code {
+	background-color: white;
+	padding-bottom: 1rem;
+	h3 {
+		@extend .h3;
+		padding-bottom: 0;
+	}
+	a {
+		font-family: $ff-ss-serif;
+		color: $blue;
+	}
+	form {
+		padding-left: 1rem;
+	}
+	.form-discard-draft {
+		margin-right: 0;
+	}
+} 
+
+// Steps
+.wcs-steps {
+	background-color: white;
+	font-family: $ff-ss-serif-cond;
+	h2 {
+		@extend .h3;
+		display: block;
+	}
+}
+
+@media ($mq-max--wcs-steps-small-layout) {
+	.wcs-steps {
+		display: flex;
+		align-items: baseline;
+	}
+	.wcs-step {
+		&.current {
+			font-weight: normal;
+		}
+		&--marker::before {
+			all: unset;
+			content: "/";
+			order: 2;
+
+		}
+		&--marker-nb, &--marker-total {
+			transform: none;
+			font-size: 1rem;
+		}
+	}
+}
+
+@include desktop-vertical-steps() {
+	.wcs-steps {
+		font-size: 1rem;
+		padding-bottom: 1rem;
+		font-weight: bold;
+		&--list {
+			margin-bottom: 0;
+		}
+	}
+	.wcs-step {
+		padding-left: 2em;
+		&.step-before {
+			color: $blue;
+			background-size: 1em auto;
+			background-image: url(icons/check.svg);
+			background-repeat: no-repeat;
+			background-position: top 50% left 0.8em;
+		}
+		&.step-before &--marker {
+			color: inherit;
+		}
+		&.current {
+			background-size: 1ex 1ex;
+			background-repeat: no-repeat;
+			background-position: top 50% left 1em;
+			background-image: radial-gradient(closest-side, #{$font-color} 100%, transparent);
+		}
+		&--label {
+			font-size: 1em;
+		}
+		&--marker-nb::after {
+			content: ".";
+		}	
+	}	
+}
+
+//
+//	A2
+//
+
+.cnil-login-page,
+.cnil-registration-page {
+	--padding: 0.5rem;
+	background: white;
+	padding: var(--padding);
+	padding-top: 1px;
+	@media ($min-desktop-viewport) {
+		--padding: 1rem
+	}
+}
+
+.a2-block-title,
+div.block h2.a2-block-title,
+div.a2-block h2.a2-block-title,
+#frontend-registration-email h2 {
+	@extend .h4;
+	text-align: center;
+}
+
+//
+//	Notifications
+//
+
+.errornotice,
+.warningnotice,
+.successnotice,
+.infonotice {
+	border: 1px solid var(--dark-color);
+	font-size: $fz-small;
+	padding: 1em;
+	padding-left: 3em;
+	a:not(.pk-button) {
+		color: var(--dark-color);
+	}
+	&::before {
+		top: 1em;
+		color: var(--dark-color);
+		background-repeat: no-repeat;
+		background-size: 100%;
+	}
+}
+.errornotice {
+	--dark-color: #D02829;
+	&::before {
+		content: "";
+		background-image: url(icons/alert-rouge.svg);
+	}
+}
+.warningnotice {
+	--dark-color: #776100;
+	&::before {
+		content: "";
+		background-image: url(icons/alert-jaune.svg);
+	}
+}
+.successnotice {
+	--dark-color: #008619;
+}
+.infonotice {
+	--dark-color: #004084;
+	&::before {
+		content: "";
+		background-image: url(icons/info.svg);
+	}
+}
+
+
+//
+//	Footer
+//
+
+#footer {
+	font-size: $fz-small;
+
+	a:hover {
+		color: $blue-light;
+	}
+
+	.cell h2:first-child,
+	.cell--title {
+		background-color: transparent;
+		color: white;
+		font-size: 1em;
+		font-weight: 800;
+		font-family: $ff-ss-serif;
+		text-transform: uppercase;
+	}
+	div.links-list ul {
+		> li {
+			border-bottom: none
+		}
+		> li > a {
+			font-size: $fz-xsmall;
+			font-family: $ff-serif;
+			font-style: italic;
+			padding-bottom: 0.15em;
+			padding-top: 0.15em;
+		}
+	}
+	.menucell {
+		.menu {
+			margin: 1em 0;
+		}
+		.menu--item {
+			padding-right: .33em;
+			margin-right: .33em;
+		}
+		.menu--link {
+			text-transform: uppercase;
+			font-weight: 800;
+			padding: 0;
+			&:not(:hover) {
+				text-decoration: none;
+			}
+			&:hover {
+				color: $blue-light;
+			}
+		}
+	}
+}
+
+

static/cnil-2023/_vars.scss

@@ -0,0 +1,115 @@
+// Colors
+$gray: #686767;
+$gray-dark: #444;
+$gray-xdark: #222;
+$gray-xlight: #EFEDE2;
+$gray-xxlight: #FAFAF7;
+$blue-light: #79baff;
+$blue: #3879BF;
+$blue-dark: #004084;
+$red: #D02829;
+
+// Typo
+$ff-serif: Georgia, serif;
+$ff-ss-serif: 'Open Sans', sans-serif;
+$ff-ss-serif-cond: 'Open Sans Condensed', sans-serif;
+
+$base-font: 18;
+
+$fz-1: 38rem / $base-font;
+$fz-1m: 28rem / $base-font;
+$fz-2: 32rem / $base-font;
+$fz-2m: 24rem / $base-font;
+$fz-3: 22rem / $base-font;
+$fz-3m: 20rem / $base-font;
+$fz-small: 16rem / $base-font;
+$fz-xsmall: 14rem / $base-font;
+
+// Core vars
+$width: 1280em / $base-font;
+$mobile-limit: 64em;
+$very-small-limit: 35em;
+$columns-gutter: 16px;
+$sidebar-width: 290px;
+
+$font-family: Georgia, "Times New Roman", Times, serif;
+$font-size: 100% / ( 16 / $base-font );
+$font-size-small: $fz-small;
+$font-size-xsmall: $fz-xsmall;
+$font-color: $gray-xdark;
+$link-color: $blue;
+$link-decoration: underline;
+
+$primary-color: #003D8D;
+$body-background: $gray-xlight;
+$header-background-color: white;
+$header-logo-size: 155px 47px;
+$toplinks-style: none;
+
+$nav-font-family: $ff-ss-serif;
+$nav-font-weight: 400;
+$nav-text-transform: uppercase;
+$nav-item-selected-mode: bottom-border;
+
+$nav-border-color: none;
+$nav-button-color: $gray;
+$nav-button-background: transparent;
+$nav-menu-side: 32px;
+$nav-color: $blue;
+$nav-item-selected-border: 13px solid $red;
+$nav-item-hover-background: none;
+$nav-item-hover-color: $nav-color;
+$nav-mobile-menu-background: white;
+$nav-mobile-menu-item-color: $nav-color;
+$nav-after-image: false;
+
+$title-font-family: $ff-ss-serif-cond;
+$title-font-size: $fz-2;
+$title-weight: bold;
+$title-color: $blue;
+$title-padding: 1rem;
+
+$cell-border: none;
+$cell-entry-hover-background: transparent;
+$cell-entry-hover-color: $blue-dark;
+$cell-open-foldable-icon: "\f105"; // angle-right
+$cell-close-foldable-icon: "\f107"; // angle-down
+
+$form-title-style: none;
+$form-sidebar-width: $sidebar-width;
+$form-sidebar-gutter: $columns-gutter;
+
+$button-background: $gray-dark;
+$button-color: white;
+$button-border: 1px solid $button-background;
+$button-hover-background: $blue-dark;
+$button-border-radius: 2px;
+$buttons-order: cancel, previous, submit;
+$button-padding: 0.625rem 2em;
+
+$form-background: white;
+$error-color: $red;
+$form-accent-color: $blue;
+$widget-unique-checkbox-position: left;
+$widget-border: 1px solid $gray;
+$widget-focus-border: 1px solid $blue;
+$widget-focus-outline: 1px solid $blue;
+
+$wcs-steps-small-layout-limit: $mobile-limit;
+$wcs-steps-spacing: 0;
+$wcs-step-color: $gray;
+$wcs-step-current-color: $font-color;
+$wcs-step-border-bottom: none;
+
+$notification_error_color: #FFF4F4;
+$notification_warning_color: #FFF9E3;
+$notification_success_color: #F0FFF2;
+$notification_info_color: #F0F8FF;
+$notification-icon-size: 20px;
+
+
+$footer-background: $gray-xdark;
+$footer-color: white;
+$footer-link-color: $footer-color;
+$footer-menucell-separator: 2px solid currentColor;
+

static/cnil-2023/config.json

@@ -0,0 +1,15 @@
+{
+  "label": "CNIL (2023)",
+  "variables": {
+    "theme_color": "#003D8D",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": {"label": "Emails : logo"}
+      }
+    }
+  }
+}

static/cnil-2023/extra.js

@@ -0,0 +1,12 @@
+// Add forms counter after cell title
+$(document).on('combo:cell-loaded', function(e, cell){
+	const cellType = ["wcs-current-forms-cell", "wcs-current-drafts-cell"]
+	if (cellType.some(className => cell.classList.contains(className))) {
+		const title = cell.querySelector("h2")
+		const nbForms = cell.querySelectorAll('.list-of-forms > ul > li').length
+		const nbTag = document.createElement('span')
+		nbTag.classList.add('cnil-forms-counter')
+		nbTag.innerText = nbForms
+		title.appendChild(nbTag)
+	}
+})

static/cnil-2023/icons/alert-jaune.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <g id="icon-alert-jaune" transform="translate(-347,-109)">
+  <rect transform="translate(347,109)" width="32" height="32" fill="none" data-name="Rectangle 515"/>
+  <path id="ic_fluent_error_circle_24_regular" d="m357 109a10 10 0 1 1-10 10 10 10 0 0 1 10-10zm0 1.667a8.333 8.333 0 1 0 8.333 8.333 8.342 8.342 0 0 0-8.333-8.333zm0 10.833a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0-7.5a0.75 0.75 0 0 1 0.744 0.648l7e-3 0.1v4.5a0.75 0.75 0 0 1-1.493 0.1l-7e-3 -0.1v-4.5a0.75 0.75 0 0 1 0.749-0.748z" fill="#776100"/>
+ </g>
+</svg>

static/cnil-2023/icons/alert-rouge.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <g id="icon-alert-rouge" transform="translate(-347,-109)">
+  <rect transform="translate(347,109)" width="32" height="32" fill="none" data-name="Rectangle 515"/>
+  <path id="ic_fluent_error_circle_24_regular" d="m357 109a10 10 0 1 1-10 10 10 10 0 0 1 10-10zm0 1.667a8.333 8.333 0 1 0 8.333 8.333 8.342 8.342 0 0 0-8.333-8.333zm0 10.833a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0-7.5a0.75 0.75 0 0 1 0.744 0.648l7e-3 0.1v4.5a0.75 0.75 0 0 1-1.493 0.1l-7e-3 -0.1v-4.5a0.75 0.75 0 0 1 0.749-0.748z" fill="#d02829"/>
+ </g>
+</svg>

static/cnil-2023/icons/arrow-right.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="icon-arrow-right" transform="translate(-89 -364)">
+    <rect id="Rectangle_600" data-name="Rectangle 600" width="24" height="24" transform="translate(89 364)" fill="none"/>
+    <path id="ic_fluent_arrow_right_24_regular" d="M13.267,4.209A.75.75,0,0,0,12.233,5.3l6.251,5.955H3.75a.75.75,0,0,0,0,1.5H18.484L12.233,18.7a.75.75,0,1,0,1.034,1.087l7.42-7.067a1,1,0,0,0,.3-.58.758.758,0,0,0,0-.29,1,1,0,0,0-.3-.578L13.267,4.209Z" transform="translate(89 363.985)" fill="#3879bf"/>
+  </g>
+</svg>

static/cnil-2023/icons/check.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="icon-check" transform="translate(-89 -364)">
+    <rect id="Rectangle_600" data-name="Rectangle 600" width="24" height="24" transform="translate(89 364)" fill="none"/>
+    <path id="ic_fluent_checkmark_24_regular" d="M4.53,12.97a.75.75,0,0,0-1.06,1.06l4.5,4.5a.75.75,0,0,0,1.06,0l11-11a.75.75,0,0,0-1.06-1.06L8.5,16.94,4.53,12.97Z" transform="translate(89.731 363.731)" fill="#3879bf"/>
+  </g>
+</svg>

static/cnil-2023/icons/file.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="20" version="1.1" viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg">
+ <g id="icon-file" transform="translate(-739,-740)">
+  <rect transform="translate(739,740)" width="32" height="32" fill="none" data-name="Rectangle 607"/>
+  <path id="ic_fluent_document_24_regular" d="m753.5 758a0.5 0.5 0 0 1-0.5 0.5h-12a0.5 0.5 0 0 1-0.5-0.5v-16a0.5 0.5 0 0 1 0.5-0.5h6v4.5a2 2 0 0 0 2 2h4.5zm-5-15.379 3.878 3.879h-3.378a0.5 0.5 0 0 1-0.5-0.5zm5.914 3.793-5.829-5.828c-0.026-0.026-0.058-0.046-0.085-0.07a2.072 2.072 0 0 0-0.219-0.18c-0.04-0.027-0.086-0.045-0.128-0.068a2.243 2.243 0 0 0-0.216-0.116 1.977 1.977 0 0 0-0.624-0.138c-0.047 0-0.093-0.014-0.141-0.014h-6.172a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-10.172a2 2 0 0 0-0.586-1.414z" fill="#3879bf"/>
+  <path d="m753.5 758a0.5 0.5 0 0 1-0.5 0.5h-12a0.5 0.5 0 0 1-0.5-0.5v-16a0.5 0.5 0 0 1 0.5-0.5h6v4.5a2 2 0 0 0 2 2h4.5zm-5-15.379 3.878 3.879h-3.378a0.5 0.5 0 0 1-0.5-0.5zm5.914 3.793-5.829-5.828c-0.026-0.026-0.058-0.046-0.085-0.07a2.072 2.072 0 0 0-0.219-0.18c-0.04-0.027-0.086-0.045-0.128-0.068a2.243 2.243 0 0 0-0.216-0.116 1.977 1.977 0 0 0-0.624-0.138c-0.047 0-0.093-0.014-0.141-0.014h-6.172a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-10.172a2 2 0 0 0-0.586-1.414z" fill="#3879bf"/>
+ </g>
+</svg>

static/cnil-2023/icons/info.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <g id="icon-info" transform="translate(-347,-58)">
+  <rect transform="translate(347,58)" width="32" height="32" fill="none" data-name="Rectangle 515"/>
+  <g id="ic_fluent_book_information_24_regular" transform="translate(345,56)" fill="#004084">
+   <path d="m13.25 7a1 1 0 1 1-1-1 1 1 0 0 1 1 1zm-1.75 2.75v5a0.75 0.75 0 1 0 1.5 0v-5a0.75 0.75 0 0 0-1.5 0z" data-name="Tracé 367"/>
+   <path d="m4 4.5a2.5 2.5 0 0 1 2.5-2.5h11.5a2.5 2.5 0 0 1 2.5 2.5v14.25a0.75 0.75 0 0 1-0.75 0.75h-14.25a1 1 0 0 0 1 1h13.25a0.75 0.75 0 0 1 0 1.5h-13.25a2.5 2.5 0 0 1-2.5-2.5zm15 13.5v-13.5a1 1 0 0 0-1-1h-11.5a1 1 0 0 0-1 1v13.5z" data-name="Tracé 368"/>
+  </g>
+ </g>
+</svg>

static/cnil-2023/icons/logout.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 2.5C10.5 2.22386 10.2761 2 10 2C9.72386 2 9.5 2.22386 9.5 2.5V8.5C9.5 8.77614 9.72386 9 10 9C10.2761 9 10.5 8.77614 10.5 8.5V2.5Z" fill="#3879BF"/><path d="M13.7432 4.00089C13.5039 3.86307 13.1982 3.94533 13.0604 4.18462C12.9226 4.42391 13.0048 4.72962 13.2441 4.86744C14.4843 5.58172 15.454 6.68534 16.0029 8.00706C16.5518 9.32878 16.6492 10.7947 16.2798 12.1774C15.9105 13.5601 15.0952 14.7822 13.9603 15.6542C12.8255 16.5262 11.4346 16.9993 10.0034 17C8.57224 17.0008 7.18084 16.5291 6.04508 15.6584C4.90932 14.7876 4.0927 13.5663 3.72193 12.184C3.35115 10.8017 3.44695 9.33564 3.99446 8.01335C4.54197 6.69105 5.51058 5.58642 6.75 4.87084C6.98915 4.73277 7.07109 4.42697 6.93302 4.18783C6.79495 3.94868 6.48915 3.86674 6.25 4.00481C4.8199 4.83048 3.70227 6.10506 3.07053 7.63078C2.43879 9.15651 2.32825 10.8481 2.75607 12.443C3.18388 14.038 4.12613 15.4472 5.43663 16.4519C6.74712 17.4567 8.35259 18.0009 10.0039 18C11.6553 17.9991 13.2602 17.4533 14.5696 16.4472C15.879 15.441 16.8198 14.0309 17.246 12.4355C17.6721 10.84 17.5598 9.1486 16.9265 7.62353C16.2931 6.09847 15.1742 4.82507 13.7432 4.00089Z" fill="#3879BF"/></svg>

static/cnil-2023/style.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import '../includes/fonts/opensans-condensed';
+@import '../includes/fonts/opensans';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';

static/cnil/_custom.scss

@@ -376,7 +376,7 @@ div.widget label {
 	}
 }
 
-#profile span.label {
+#profile .label {
 	color: $font-color;
 	font-weight: bold;
 }

static/cnil/_vars.scss

@@ -33,7 +33,7 @@ $nav-color: $lightblue;
 $nav-active-color: #333;
 $nav-item-selected-background: transparent;
 $nav-item-selected-color: $nav-active-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-submenu-color: $nav-color;
 $border-radius: 0;
 $button-background: $logoblue;

static/concarneau/_vars.scss

@@ -20,7 +20,7 @@ $nav-item-hover-color: white;
 
 $nav-item-selected-background: $primary-color;
 $nav-item-selected-color: white;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $nav-submenu-background: $tertiary-color;
 $nav-submenu-color: $font-color;

static/correze-cd19-intranet/_custom.scss

@@ -0,0 +1,289 @@
+@import '../includes/fonts/firasans';
+@import '../includes/fonts/roboto-condensed';
+
+%big-title {
+	@extend %title;
+	background: transparent;
+	color: $font-color;
+	padding-left: 0.5rem;
+	font-size: 2.2rem;
+}
+
+%button {
+	@extend %button;
+	box-shadow: none;
+	font-weight: bold;
+	&:hover {
+		box-shadow: none;
+	}
+}
+
+%cancel-button {
+	@extend %button;
+	font-weight: normal;
+	background: #aaa;
+}
+
+body {
+	background: #fffffe url(img/background.jpg) repeat-y;
+	background-attachment: fixed;
+	background-position: top center;
+}
+
+#columns div.textcell {
+	@extend .pk-transparent;
+	h1 {
+		@extend %big-title;
+	}
+	h2, h2:first-child {
+		@extend %big-title;
+		font-size: 1.5rem;
+	}
+}
+
+div#header {
+	background: white;
+	box-shadow: 0 20px 10px $nav-background;
+	@media ($min-desktop-viewport) {
+		padding-left: $columns-gutter;
+		padding-right: $columns-gutter;
+	}
+	#logo {
+		padding-bottom: 20px;
+		a {
+			display: block;
+			height: 120px;
+			background-size: 200px auto;
+			background-position: bottom left;
+		}
+		@media screen and ($max-mobile-viewport) {
+			padding-top: 20px;
+			a {
+				padding-left: 0;
+			}
+		}
+	}
+	@media screen and ($max-mobile-viewport) {
+		box-shadow: none;
+	}
+}
+
+.site-nav {
+	z-index: 1000;
+}
+
+div#main-content-wrapper {
+	box-shadow: 0 -20px 10px $nav-background;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	background: white;
+}
+
+#toplinks {
+	background: #f6f6f6;
+	border: none;
+	box-shadow: none;
+	border-radius: 0;
+	a {
+		display: inline-block;
+		color: black;
+		padding: 5px 10px 10px 10px;
+		text-decoration: underline;
+		&:hover {
+			color: $orange;
+		}
+	}
+	@media screen and ($max-mobile-viewport) {
+		left: 0;
+		right: 0;
+		max-width: none;
+		font-size: 14px;
+	}
+}
+
+#nav {
+	border-bottom: 5px solid $orange;
+	ul {
+		margin: 0;
+	}
+}
+
+// Page picture
+body.has-picture .site-nav::after {
+	box-sizing: content-box;
+	position: static;
+	max-width: $width;
+	margin: 0 auto;
+	padding-top: 20%;
+	height: 0;
+
+	@media (min-width: $width) {
+		padding-top: 270px;
+	}
+
+	@media ($max-mobile-viewport) {
+		content: none;
+	}
+}
+
+#main-content {
+	@media ($min-desktop-viewport) {
+		padding-left: $columns-gutter;
+		padding-right: $columns-gutter;
+	}
+}
+
+div.gru-nav > ul > li a {
+	font-weight: normal;
+}
+
+div.drafts-recall a,
+div.textcell a {
+	text-decoration: underline;
+	&.pk-button, &.pk-big-button {
+		text-decoration: none;
+	}
+}
+
+form p label, .field--label {
+	font-size: 110%;
+}
+
+// CUSTOM FOOTER
+#footer {
+	font-family: $title-font-family;
+	font-size: 1.125em;
+	padding: $columns-gutter;
+
+	@media ($min-desktop-viewport) {
+		padding: 0 $columns-gutter * 2 $columns-gutter;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		> .cell {
+			flex: 0 1 25%;
+		}
+	}
+
+	// social icons
+	[class*="icon-"]::before {
+		font-family: FontAwesome;
+		line-height: 1;
+	}
+	.icon-facebook::before {
+		content: "\f09a";
+	}
+	.icon-twitter::before {
+		content: "\f099";
+	}
+	.icon-youtube::before {
+		content: "\f167";
+	}
+	.icon-instagram::before {
+		content: "\f16d";
+	}
+	.icon-instagram::before {
+		content: "\f16d";
+	}
+	.icon-linkedin::before {
+		content: "\f0e1";
+	}
+	.icon-viadeo::before {
+		content: "\f2a9";
+	}
+	.icon-phone::before {
+		content: "\f095";
+	}
+
+
+	div.textcell {
+		h1, h2 {
+			font-size: 2.1rem;
+			margin-bottom: 0;
+			margin-top: 0;
+		}
+		p {
+			margin: 8px 0;
+		}
+
+		a {
+			color: white;
+		}
+
+		&.footer-network {
+			flex-basis: auto;
+			a {
+				background: #546e7a;
+				color: #b0bec5;
+				font-size: 1.52941176470588em;
+				display: inline-block;
+				width: 42px;
+				height: 54px;
+				line-height: 54px;
+				text-align: center;
+				text-decoration: none;
+
+				&:hover {
+					color: black;
+				}
+			}
+		}
+
+		&.footer-copyright {
+			font-size: 1rem;
+			font-weight: 300;
+			flex: 0 0 100%;
+			color: #b0bec5;
+		}
+	}
+	div.links-list {
+		text-align: right;
+		li {
+			border-bottom: none !important;
+			display: block;
+			font-size: 1rem;
+
+			a {
+				display: inline;
+				padding: 0;
+				color: #b0bec5;
+				&:hover {
+					text-decoration: underline;
+					background: none;
+					color: white;
+				}
+
+			}
+		}
+	}
+}
+
+#footer-wrapper {
+	margin-top: 0;
+}
+
+#side {
+	padding-left: 1rem;
+}
+
+div#rub_service {
+	max-width: 900px;
+	margin: auto;
+
+	> h2 {
+		@extend %big-title;
+	}
+}
+
+.form-content--sidebox + #rub_service {
+	max-width: none;
+	margin: 0;
+}
+
+input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
+	border-bottom-width: 2px;
+	&:focus:not([readonly]) {
+		border-bottom-width: 2px;
+	}
+}

static/correze-cd19-intranet/_vars.scss

@@ -0,0 +1,49 @@
+$orange: #e98e00;
+$primary-color: $orange;
+
+$font-color: #444;
+$font-size: 100%;
+$font-family: "Fira Sans", sans-serif;
+$width: 1350px;
+$mobile-width: none;
+
+$nav-background: #747474;
+$nav-color: white;
+$nav-active-color: $orange;
+$nav-mobile-bottom-bar-background: $nav-background;
+$nav-text-transform: uppercase;
+
+$border-radius: 0px;
+$button-background: $orange;
+$button-color: white;
+$widget-border: 1px solid #ced4da;
+$widget-focus-background: #f0f0f0;
+$widget-focus-outline: none;
+$widget-focus-box-shadow: inset 2px 2px 5px 0 #c9c9c9;
+$widget-unique-checkbox-position: left;
+$title-background: $primary-color;
+$title-font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$title-color: white;
+$title-weight: 900;
+$title-padding: .5rem 1rem;
+$link-color: $font-color;
+
+$cell-image-position: top;
+$cell-image-padding: none;
+
+
+$wcs-steps-spacing: 0.7rem;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-tie-width: 3px;
+$wcs-step-marker-tie-color: $primary-color;
+$wcs-step-marker-background: #eee;
+$wcs-step-current-marker-color: black;
+$wcs-step-current-marker-background: $primary-color;
+
+$buttons-order: previous, submit, cancel;
+$buttons-alignment: center;
+
+$footer-background: #455a63;
+$footer-color: white;
+$footer-full-width-background: false;

static/correze-cd19-intranet/config.json

@@ -0,0 +1,15 @@
+{
+  "label": "Corrèze (CD19) - Intranet",
+  "variables": {
+    "theme_color": "#e98e00"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" },
+        "footer:logo": { "label": "Pied de page : logo" }
+      }
+    }
+  }
+}

static/correze-cd19-intranet/style.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';

static/correze-cd19/_vars.scss

@@ -11,7 +11,7 @@ $nav-background: #747474;
 $nav-color: white;
 $nav-active-color: $green;
 $nav-mobile-bottom-bar-background: $nav-background;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $border-radius: 0px;
 $button-background: $green;

static/cournonterral/_vars.scss

@@ -11,7 +11,7 @@ $nav-background: white;
 $nav-color: $font-color;
 $nav-submenu-color: $font-color;
 $nav-active-color: #50ae32;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $border-radius: 0px;
 $button-background: $primary-color;
 $title-background: $primary-color;

static/dordogne-cd24/_custom.scss

@@ -832,6 +832,9 @@ h3.login-password-title {
 }
 
 .authentic-page {
+	#logo {
+		display: none;
+	}
 	#nav-wrapper {
 		display: none;
 	}

static/dordogne-cd24/_vars.scss

@@ -22,7 +22,7 @@ $nav-mobile-bottom-bar-color: #3d424a;
 $nav-mobile-bottom-bar-item-selected-background: #879B35;
 $nav-mobile-bottom-bar-item-hover-background: #879B35;
 $nav-after-image-height: 0;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $widget-background: $primary-color;
 $widget-border: 0;

static/dsfr/_custom.scss

@@ -19,10 +19,7 @@
 	}
 }
 
-div.a2-continue,
-div.a2-block,
-.gru-content .cell,
-.block {
+%cell {
 	border-bottom: 4px solid $blue-france-500;
 }
 

static/ehess/_custom.scss

@@ -0,0 +1,149 @@
+@media($min-desktop-viewport) {
+	#top {
+		display: flex;
+	}
+}
+
+#logo a {
+	height: 100px;
+	line-height: 100px;
+	color: $primary-color;
+	text-transform: uppercase;
+	font-weight: normal;
+	@media screen and ($min-desktop-viewport) {
+		margin-top: .5em;
+	}
+}
+
+#toplinks {
+	a {
+		color: white;
+	}
+}
+
+#nav-wrapper {
+	margin-bottom: 10px;
+
+	@media($min-desktop-viewport) {
+		background: $nav-background;
+	}
+
+	div#nav > ul > li > a {
+		border-radius: $border-radius;
+	}
+
+	div.gru-nav ul li {
+		border-right: 1px solid $misc-blue;
+		&:last-child {
+			border-right: none;
+		}
+	}
+	@media screen and ($min-desktop-viewport) {
+		margin-top: 5em;
+	}
+}
+
+@if $nav-after-image == true {
+	body.has-picture .site-nav::after {
+		top: 0;
+	}
+}
+
+@media screen and ($min-desktop-viewport) {
+	@if $nav-after-image == true {
+		body.has-picture .site-nav::after {
+			content: "";
+			display: none;
+		}
+		body.has-picture div#header-wrapper::after {
+			content: "";
+			display: block;
+			width: 100%;
+			height: $nav-after-image-height;
+			background-color: transparent;
+			background-image: var(--page-picture);
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: cover;
+			position: relative;
+			top: -0.5rem;
+		}
+	}
+}
+
+@media ($max-mobile-viewport) {
+	div.gru-nav .gru-nav-button + ul {
+		border: none;
+	}
+}
+
+main {
+	margin-top: 2em;
+	%button {
+		box-shadow: none;
+	}
+	%button:hover {
+		border: 1px solid #dcdcdc;;
+		box-shadow: none;
+	}
+	h1.form-content--title {
+		font-family: 'Work Sans', sans-serif;
+		text-transform: uppercase;
+		color: $secondary-color;
+		font-size: 1.3em;
+		font-weight: 500;
+	}
+}
+
+@media screen and ($min-desktop-viewport) {
+	div.gru-content div.tracking-code-input-cell form input {
+		margin-bottom: 1em;
+	}
+}
+
+#rub_service {
+	h2 {
+		font-size: 1.8em;
+	}
+	h3 {
+		font-size: 1.6em;
+	}
+	h4 {
+		font-size: 1.4em;
+	}
+		h2, h3, h4 {
+		color: $primary-color;
+	}
+}
+
+#profile .label {
+	color: $tertiary-color;
+}
+
+@media screen and ($max-mobile-viewport) {
+	#logo a {
+		display: block;
+		height: 75px;
+		overflow: hidden;
+	}
+}
+
+#footer-wrapper {
+	a:hover {
+		color: $primary-color;
+	}
+	@media screen and ($min-desktop-viewport) {
+		img {
+			float:right;
+			margin-top: 3em;
+			max-width: 80px;
+		}
+	}
+}
+
+%inverted-button {
+	box-shadow: none;
+	&:hover {
+		box-shadow: none;
+	}
+}

static/ehess/_vars.scss

@@ -0,0 +1,74 @@
+$primary-color: #00B9AF;
+$secondary-color: #0A1C66;
+$tertiary-color: #5A6473;
+
+$clay-white: #FAF7ED;
+$minium-orange: #EB5E45;
+$nickel-yellow: #FFF26B;
+$misc-blue: #4c8da6;
+
+$width: 1160px;
+$border-radius: 0px;
+$box-shadow: none;
+$notification_error_color: $minium-orange;
+$notification_warning_color: $nickel-yellow;
+$link-color: $primary-color;
+$link-decoration: none;
+
+$font-color: $secondary-color;
+$font-size: 0.938em;
+$font-family: 'Public Sans', sans-serif;
+
+$title-background: white;
+$title-color: $primary-color;
+$title-font-family: 'Butler Stencil';
+$title-font-size: 1.5em;
+$title-weight: 700;
+
+$toplinks-background: $primary-color;
+$toplinks-border-radius: 0;
+$toplinks-box-shadow: none;
+
+$nav-background: white;
+$nav-submenu-background: #eee;
+$nav-submenu-color: #333;
+$nav-button-background: $primary-color;
+$nav-border-color: transparent;
+$nav-color: $secondary-color;
+$nav-active-color: $secondary-color;
+$nav-item-selected-color: $secondary-color;
+$nav-item-selected-background: white;
+$nav-item-hover-color: white;
+$nav-item-hover-background: $secondary-color;
+$nav-text-transform: uppercase;
+$nav-after-image: true;
+$responsive-menu: top-to-bottom;
+$nav-font-family: 'Public Sans', sans-serif;
+$nav-font-size: 1em;
+$nav-font-style: normal;
+$nav-font-weight: 400;
+
+$widget-focus-border: 1px solid $misc-blue;
+$widget-focus-box-shadow: 0 0 4px $misc-blue;
+$widget-focus-outline: none;
+$widget-border: 1px solid $misc-blue;
+$widget-box-shadow: none;
+$widget-border-radius: 5px;
+
+$button-background: $primary-color;
+$button-focus-outline-offset: 1px;
+$button-box-shadow: none;
+$button-hover-background: white;
+$button-hover-color: $primary-color;
+$button-border-radius: 5px;
+$cancel-button-style: "%inverted-button";
+
+$cell-image-position: top;
+$cell-image-padding: none;
+$cell-border: none;
+$cell-entry-hover-background: $clay-white;
+$cell-entry-hover-color: $primary-color;
+$cell-entry-border: 1px solid $tertiary-color;
+
+$footer-background: $secondary-color;
+$footer-link-color: white;

static/ehess/config.json

@@ -0,0 +1,16 @@
+{
+  "label": "École des hautes études en sciences sociales",
+  "variables": {
+    "theme_color": "#00B9AF",
+    "favicon": "ehess/img/favicon.ico",
+    "include_registration_link": false
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" }
+      }
+    }
+  }
+}

static/ehess/style.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@import '../includes/fonts/butler-stencil';
+@import '../includes/fonts/publicsans';
+@import '../includes/fonts/worksans';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';

static/entrouvert/_custom.scss

@@ -66,6 +66,10 @@ a.pk-button:hover {
 	border: none;
 	box-shadow: none;
 	font-size: 0.812rem;
+
+	@media($max-mobile-viewport) {
+		display: none;
+	}
 }
 
 .page-index {

static/essey-les-nancy/_vars.scss

@@ -19,7 +19,7 @@ $nav-item-selected-mode: bottom-border;
 $nav-item-hover-background: white;
 $nav-item-hover-color: #333;
 $nav-item-selected-border: 2px solid $primary-color;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 $nav-mobile-menu-background: white;
 
 $border-radius: 0px;

static/essonne-cd91/_vars.scss

@@ -16,7 +16,7 @@ $nav-background: white;
 $nav-color: #63636c;
 $nav-active-color: $primary-color;
 $nav-submenu-color: #63636c;
-$nav-item-transform: uppercase;
+$nav-text-transform: uppercase;
 
 $button-background: $nav-background;
 $nav-button-background: white;

static/est-ensemble/_authentic.scss

@@ -0,0 +1,67 @@
+body.authentic-page {
+	.gru-nav {
+		display: none;
+	}
+	&.has-header-background #header {
+		padding-top: 50px;
+		background-image: none;
+		height: 0;
+	}
+	.cell {
+		border: 0;
+	}
+	h1#logo {
+		display: none;
+	}
+	.page-width, .footer-width {
+		max-width: 1080px;
+	}
+	#columns {
+		.block, .a2-block {
+			box-shadow: 1px 2px 2px #dedede;
+		}
+	}
+	.cell.logos-villes {
+		ul {
+			padding: 0;
+			@media (max-width: $very-small-limit) {
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+			}
+		}
+		li {
+			list-style-type: none;
+			img {
+				max-width: 200px;
+			}
+			@media (min-width: $very-small-limit + 1) {
+				img {
+					height: 80px;
+					width: auto;
+					max-width: none;
+				}
+				display: inline;
+				margin: 0 10px;
+				position: relative;
+				&:not(:last-child) {
+					&::after {
+						content: '';
+						display: inline-block;
+						width: 1px;
+						height: 48px;
+						border-left: 1px solid #999;
+						position: absolute;
+						bottom: 16px;
+					}
+					a {
+						margin-right: 20px;
+					}
+				}
+			}
+		}
+	}
+	a#publik-portal-agent {
+		display: none;
+	}
+}

static/est-ensemble/_custom.scss

@@ -8,6 +8,16 @@ body {
 	}
 }
 
+#header {
+	display: flex;
+	align-items: center;
+	@media ($min-desktop-viewport) {
+		h1.has-logo {
+			margin-left: 20px;
+		}
+	}
+}
+
 div#main-content-wrapper {
 	@media ($max-mobile-viewport) {
 		margin-top: 5px;
@@ -49,3 +59,65 @@ div.gru-nav {
 		}
 	}
 }
+
+div.wcsformcell.has-asset-picture {
+	margin-left: 1.5rem;
+	a {
+		text-decoration: none;
+		&:hover {
+			color: $cell-entry-hover-color;
+		}
+	}
+	img {
+		padding: $cell-image-padding;
+	}
+	span.form--title {
+		display: block;
+		padding: 0 $cell-image-padding;
+		font-weight: 600;
+	}
+	div.description {
+		padding: 0 1rem;
+		font-size: 0.9em;
+	}
+}
+
+/* custom est-ensemble menu entry */
+div.gru-nav ul {
+	@media ($min-desktop-viewport) {
+		display: flex;
+	}
+}
+
+div.gru-nav li.menu-est-ensemble {
+	@media ($min-desktop-viewport) {
+		margin-left: auto;
+	}
+	a {
+		@media ($min-desktop-viewport) {
+			background: $ee-red;
+			span {
+				color: white;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+		span::before {
+			content: '\f015';
+			font-family: FontAwesome;
+			margin-right: 5px;
+		}
+	}
+}
+
+.block-password .widget {
+	max-width: initial;
+}
+
+@media ($min-desktop-viewport) {
+	#login-page {
+		display: flex;
+	}
+}
+