diff --git a/static/toulouse-2022/_custom.scss b/static/toulouse-2022/_custom.scss
new file mode 100644
index 00000000..0a8f10f9
--- /dev/null
+++ b/static/toulouse-2022/_custom.scss
@@ -0,0 +1,516 @@
+@mixin fill-viewport($add-padding-right: 0, $add-padding-left: 0) {
+ width: 100vw;
+ margin-left: calc(-50vw + 50%);
+ padding-right: calc(50vw - 50% + #{$add-padding-right});
+ padding-left: calc(50vw - 50% + #{$add-padding-left});
+}
+
+
+//
+// Typo
+//
+
+html {
+ @media ($max-mobile-viewport) {
+ font-size: 100% / (16 / $base-font-m);
+ }
+ overflow-x: hidden;
+}
+
+h1 {
+ font-size: $fz-1m;
+ font-weight: 900;
+ line-height: 1.5;
+ color: $font-color;
+ @media ($min-desktop-viewport) {
+ font-size: $fz-1;
+ }
+}
+
+h2, .h2 {
+ font-size: $fz-2m;
+ font-weight: 700;
+ line-height: 1.5;
+ color: $salmon-dark;
+ @media ($min-desktop-viewport) {
+ font-size: $fz-2;
+ }
+}
+
+h3, .h3 {
+ font-size: $fz-3m;
+ font-weight: 700;
+ line-height: 1.5;
+ @media ($min-desktop-viewport) {
+ font-size: $fz-3;
+ }
+}
+
+.chapo {
+ font-size: 21em / $base-font-m;
+ font-weight: 300;
+ line-height: 1.25;
+ margin: 0;
+ @media ($min-desktop-viewport) {
+ font-size: 24em / $base-font;
+ }
+}
+
+a {
+ text-decoration: underline;
+}
+
+// button
+%button {
+ box-shadow: none !important;
+ text-decoration: none;
+}
+
+.rounded-button {
+ border-radius: 2em;
+}
+
+.salmon-button {
+ @extend %button;
+ background-color: $salmon;
+ border-color: transparent;
+ &:hover {
+ background-color: $salmon-dark;
+ color: white;
+ }
+}
+
+.rounded-salmon-button {
+ @extend .salmon-button;
+ @extend .rounded-button;
+ padding: .1em .66em;
+}
+
+.gray-button {
+ @extend %button;
+ background-color: $gray-6;
+ border-color: $gray-6;
+ &:hover {
+ background-color: $gray-1;
+ border-color: $gray-1;
+ color: white;
+ }
+}
+
+
+//
+// GLOBAL LAYOUT
+//
+
+#page {
+ @media ($max-mobile-viewport) {
+ // keep space for user-links
+ padding-top: $topbar-mobile-height;
+ }
+}
+// move nav on top
+.site-nav {
+ @media ($min-desktop-viewport) {
+ order: -1;
+ }
+}
+div#header, div#nav {
+ max-width: $header-width;
+}
+// header sticky
+.site-header {
+ @media ($max-mobile-viewport) {
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ }
+}
+
+//
+// HEADER
+//
+.site-header {
+ border-bottom: 1px solid $gray-5;
+}
+#top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ @media ($max-mobile-viewport) {
+ justify-content: flex-start;
+ height: $header-mobile-height;
+ }
+ @media ($min-desktop-viewport) {
+ padding-top: 27px;
+ padding-bottom: 27px;
+ }
+}
+
+#logo {
+ display: block;
+ &, & a {
+ line-height: 0;
+ }
+ @media ($max-mobile-viewport) {
+ &.has-logo {
+ padding-left: 0;
+ a::before {
+ width: 100px;
+ height: 27px;
+ margin-right: 1rem;
+ }
+ }
+ }
+}
+.theme-header-title h2 {
+ font-weight: 300;
+ text-transform: uppercase;
+ margin: 0;
+ color: $font-color;
+ @media ($max-mobile-viewport) {
+ font-size: $fz-small;
+ line-height: 1.3;
+ border-left: 1px solid $gray-5;
+ padding-left: 1em;
+ }
+}
+
+
+//
+// NAV
+//
+div.gru-nav {
+ @media ($min-desktop-viewport) {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ ul {
+ margin: 0;
+ > li > a {
+ font-weight: 500;
+ font-size: $fz-xsmall;
+ }
+ }
+ .gru-nav-button {
+ right: 0.7rem;
+ left: auto;
+ top: calc( (#{$header-mobile-height} - #{$nav-menu-side}) / 2 + #{$topbar-mobile-height});
+ body.scrolled & {
+ top: calc( (#{$header-mobile-height} - #{$nav-menu-side}) / 2);
+ }
+ }
+}
+
+// toplinks moved inside .gru-nav element
+#toplinks {
+ font-size: $fz-xsmall;
+ font-weight: 500;
+ max-width: none;
+ padding: 0.3rem 0.7rem;
+ word-spacing: 1em;
+ @media ($max-mobile-viewport) {
+ width: 100%;
+ }
+ @media ($min-desktop-viewport) {
+ position: static;
+ }
+ a {
+ color: white;
+ text-decoration: none;
+ &:hover {
+ color: $salmon;
+ }
+ &.login-link {
+ @extend .rounded-salmon-button;
+ margin-right: 0;
+ }
+ }
+}
+
+
+//
+// MAIN
+//
+
+main {
+ padding-top: 3rem;
+ @media ($min-desktop-viewport) {
+ padding-left: 0.7rem;
+ padding-right: 0.7rem;
+ }
+}
+
+// Page header
+.theme-page-header {
+ display: flow-root;
+ padding: 0 0.7em;
+ h1:first-child {
+ margin-top: 0;
+ }
+ .cell + .ô-header {
+ display: none;
+ }
+}
+.theme-page-header .text-cell:first-child,
+.ô-header {
+ position: relative;
+ margin-top: 30px;
+ margin-bottom: 60px;
+ @media ($max-mobile-viewport) {
+ margin-left: 0;
+ }
+ &::before {
+ content: "";
+ display: block;
+ width: 105px;
+ height: 130px;
+ position: absolute;
+ top: -38px;
+ left: -49px;
+ z-index: -1;
+ background: url("img/ô.svg") no-repeat;
+ background-size: contain;
+ @media ($max-mobile-viewport) {
+ left: -0.7rem;
+ }
+ }
+}
+
+//
+// CELLS
+//
+
+%cell-links-list {
+ & > li > a {
+ text-decoration: none;
+ }
+}
+
+.gru-content div.cell div.cell-items-pagination button {
+ border-radius: 50%;
+ padding: 0;
+ width: 2.7em;
+ height: 2.7em;
+ float: none !important;
+}
+
+div.list-of-forms span.form-status {
+ color: $gray-2;
+ font-weight: 300;
+ font-size: $fz-small;
+}
+
+.errornotice,
+.warningnotice,
+.successnotice,
+.infonotice {
+ padding-top: 2rem;
+ padding-right: 2rem;
+ padding-bottom: 2rem;
+ color: $font-color;
+ &::before {
+ top: 1.9rem;
+ }
+}
+.errornotice::before {
+ color: $error-color;
+}
+.warningnotice::before {
+ color: $color-warning;
+}
+.successnotice::before {
+ color: $color-success;
+}
+.infonotice::before {
+ color: $color-info;
+}
+
+
+//
+// WCS / Forms
+//
+
+.wcs-page {
+ .theme-page-header {
+ display: none;
+ }
+ .ô-header {
+ margin-bottom: 0;
+ @media ($min-desktop-viewport) {
+ width: calc(75% - 25px);
+ }
+ }
+}
+.form-content--title {
+ @extend h1;
+ padding: 0;
+ @media ($min-desktop-viewport) {
+ float: left;
+ }
+}
+
+div#side {
+ @media ($max-mobile-viewport) {
+ flex-direction: row;
+ }
+}
+div#gauche {
+ div#tracking-code {
+ min-width: 0;
+ font-size: 1rem;
+ order: 0;
+ text-align: left;
+ flex-grow: 1;
+ @media ($min-desktop-viewport) {
+ width: 25%;
+ text-align: right;
+ float: right;
+ }
+ h3 {
+ color: $font-color;
+ display: block;
+ padding: 0;
+ font-size: $fz-xsmall;
+ font-weight: 300;
+ margin-bottom: 0.33em;
+ }
+ a {
+ display: block;
+ font-size: $fz-4;
+ font-weight: bold;
+ color: $salmon-dark;
+ padding: 0;
+ &:not(:hover) {
+ text-decoration: none;
+ }
+ }
+ .form-discard-draft {
+ @extend .rounded-salmon-button;
+ font-size: $fz-xsmall;
+ margin-right: 0;
+ }
+ }
+}
+
+.wcs-steps {
+ clear: both;
+}
+.wcs-step {
+ &--marker {
+ border: 1px solid $gray-5;
+ font-weight: bold;
+ }
+ &.current &--marker {
+ border-color: $wcs-step-color;
+ }
+}
+
+@media ($mq-max--wcs-steps-small-layout) {
+ .wcs-steps {
+ margin-left: 1rem;
+ }
+ .wcs-step.current {
+ .wcs-step--marker {
+ height: 40px;
+ border-radius: 20px !important;
+ background-color: $salmon-dark;
+ border-color: $salmon-dark;
+ > * {
+ transform: none;
+ }
+ &::before {
+ transform: rotate(15deg);
+ height: 1.2em;
+ margin: 0.2em;
+ }
+ }
+ .wcs-step--label {
+ font-size: $fz-small;
+ font-weight: normal;
+ }
+ }
+}
+
+@media ($mq-min--wcs-steps-horizontal-layout) {
+ $label-width: 6rem;
+ .wcs-steps {
+ font-size: 1rem;
+ padding-right: $label-width / 2;
+ padding-top: 2rem;
+ }
+ .wcs-steps--list {
+ flex-wrap: nowrap;
+ justify-content: center;
+ }
+ .wcs-step {
+ position: relative;
+ flex: 0 1 15rem;
+ &.last {
+ flex: 0 0 auto;
+ }
+ }
+ .wcs-step--marker, .wcs-step::after {
+ transform: translateX(calc( (#{$label-width} - #{$wcs-step-marker-size}) / 2 ));
+ }
+ .wcs-step--label {
+ display: block !important;
+ font-size: $fz-xsmall;
+ top: calc(100% + .5em);
+ width: $label-width;
+ }
+}
+
+label {
+ font-size: $fz-small;
+ font-weight: bold;
+}
+
+div#rub_service {
+ clear: both;
+ padding-top: 2rem;
+ h3 {
+ @extend .h2;
+ }
+ h4 {
+ @extend .h3;
+ }
+ div.error {
+ font-weight: normal;
+ font-size: $fz-small;
+ color: $error-color;
+ }
+ .submit-button button::after {
+ content: " \2002\2192";
+ }
+ .previous-button button::before {
+ content: "\2190\2002";
+ }
+}
+
+//
+// FOOTER
+//
+$footer-padding-bottom: 2rem;
+#footer-wrapper {
+ padding-bottom: $footer-padding-bottom;
+}
+#footer {
+ .menu-cell {
+ @include fill-viewport;
+ padding: 1rem 0;
+ background-color: #fff;
+ ul li a {
+ color: $gray-1;
+ text-transform: uppercase;
+ font-size: $fz-xsmall;
+ font-weight: bold;
+ &:hover {
+ color: $primary-color;
+ }
+
+ }
+ // Put .menu-cell only in last position on footer
+ transform: translateY(#{$footer-padding-bottom});
+ }
+}
diff --git a/static/toulouse-2022/_vars.scss b/static/toulouse-2022/_vars.scss
new file mode 100644
index 00000000..4d023f01
--- /dev/null
+++ b/static/toulouse-2022/_vars.scss
@@ -0,0 +1,121 @@
+// Colors
+
+$salmon: #FFA58A;
+$salmon-dark: #D8522A;
+$salmon-light: #F9EEE3;
+
+$gray-1: #212121;
+$gray-2: #4A4A4A;
+$gray-3: #757575;
+$gray-5:#BFBFBF;
+$gray-6: #E2E2E2;
+
+$color-info: #036DCF;
+$color-success: #00840D;
+$color-warning: #FA4C02;
+
+// Typo
+$base-font: 17;
+$base-font-m: 16;
+
+$fz-1: 52em / $base-font;
+$fz-1m: 30em / $base-font-m;
+$fz-2: 36em / $base-font;
+$fz-2m: 26em / $base-font-m;
+$fz-3: 26em / $base-font;
+$fz-3m: 22em / $base-font-m;
+$fz-4: 20em / $base-font;
+$fz-small: 15em / $base-font;
+$fz-xsmall: 13em / $base-font;
+
+// layout
+$header-width: 1440em / $base-font;
+$header-mobile-height: 57px;
+$topbar-mobile-height: 2rem;
+
+// Core vars
+$primary-color: $salmon-dark;
+$font-family: roboto, sans-serif;
+$font-size: 100% / ( 16 / $base-font );
+$font-color: $gray-1;
+$link-color: $primary-color;
+
+$width: 1210em / $base-font;
+$mobile-limit: 1023px;
+$very-small-limit: 35em;
+$columns-gutter: 3rem;
+
+$header-logo-size: 201px 54px;
+$header-background-color: white;
+$toplinks-style: none;
+$toplinks-background: $gray-1;
+
+$nav-background: $gray-1;
+$nav-full-width-background: true;
+$nav-color: white;
+$nav-active-color: $salmon;
+$nav-border-color: none;
+$nav-menu-side: 28px;
+$nav-after-image: false;
+$nav-item-selected-background: transparent;
+$nav-item-selected-color: $nav-active-color;
+$nav-mobile-menu-background: $nav-background;
+$nav-mobile-menu-item-color: $nav-color;
+$nav-button-background: transparent;
+$nav-button-color: $salmon-dark;
+$nav-mobile-bottom-bar-color: $nav-color;
+$nav-mobile-bottom-bar-background: $nav-background;
+$nav-mobile-bottom-bar-hover-color: $nav-active-color;
+$responsive-menu: left-to-right;
+
+$title-background: transparent;
+$title-color: $primary-color;
+$title-font-size: $fz-2;
+$title-weight: bold;
+
+$cell-border: none;
+$cell-background: transparent;
+$cell-entry-color: $gray-2;
+$cell-entry-border-color: $gray-6;
+$cell-entry-hover-color: $primary-color;
+$cell-entry-hover-background: white;
+
+$button-background: white;
+$button-color: $font-color;
+$button-border: 2px solid $salmon;
+$button-hover-background: $salmon;
+
+$title-background: transparent;
+
+$error-color: #D00000;
+$form-sidebar-position: top;
+$wcs-step-color: $font-color;
+$wcs-step-current-color: $wcs-step-color;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-size: 50px;
+$wcs-step-marker-background: white;
+$wcs-step-current-marker-color: white;
+$wcs-step-current-marker-background: $wcs-step-color;
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-tie-width: 1px;
+$wcs-step-marker-tie-color: $gray-5;
+$wcs-steps-small-layout-limit: $mobile-limit;
+
+$widget-border: 1px solid $gray-6;
+$widget-focus-border: 1px solid $gray-3;
+$widget-unique-checkbox-position: left;
+
+$form-accent-color: $primary-color;
+$buttons-order: cancel, previous, submit;
+$buttons-alignment: center;
+$cancel-button-style: ".gray-button";
+
+$notification-icon-size: 28px;
+
+$notification_error_color: rgba($error-color, 0.15);
+$notification_warning_color: rgba($color-warning, 0.15);
+$notification_success_color: rgba($color-success, 0.15);
+$notification_info_color: rgba($color-info, 0.15);
+
+$footer-background: black;
+$footer-color: white;
diff --git a/static/toulouse-2022/config.json b/static/toulouse-2022/config.json
new file mode 100644
index 00000000..264e4ac2
--- /dev/null
+++ b/static/toulouse-2022/config.json
@@ -0,0 +1,15 @@
+{
+ "label": "Toulouse 2022",
+ "variables": {
+ "theme_color": "#FFA58A",
+ "email_header_asset": "emails:logo"
+ },
+ "settings": {
+ "combo": {
+ "COMBO_ASSET_SLOTS.update": {
+ "header:logo": { "label": "Têtière : logo" },
+ "emails:logo": {"label": "Emails : logo"}
+ }
+ }
+ }
+}
diff --git a/static/toulouse-2022/img/ô.svg b/static/toulouse-2022/img/ô.svg
new file mode 100644
index 00000000..d06f1c48
--- /dev/null
+++ b/static/toulouse-2022/img/ô.svg
@@ -0,0 +1,28 @@
+
+
diff --git a/static/toulouse-2022/style.scss b/static/toulouse-2022/style.scss
new file mode 100644
index 00000000..d7337687
--- /dev/null
+++ b/static/toulouse-2022/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/roboto';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/toulouse-2022/combo/page_template.html b/templates/variants/toulouse-2022/combo/page_template.html
new file mode 100644
index 00000000..ce649890
--- /dev/null
+++ b/templates/variants/toulouse-2022/combo/page_template.html
@@ -0,0 +1,15 @@
+{% extends "combo/page_template.html" %}
+{% load combo %}
+
+{% block content-pre %}
+
+{% endblock %}
diff --git a/templates/variants/toulouse-2022/includes/nav.html b/templates/variants/toulouse-2022/includes/nav.html
new file mode 100644
index 00000000..67329fc1
--- /dev/null
+++ b/templates/variants/toulouse-2022/includes/nav.html
@@ -0,0 +1,6 @@
+{% extends "includes/nav.html" %}
+
+{% block nav-bottom %}
+ {% include "includes/user-info.html" %}
+{% endblock %}
+
diff --git a/templates/variants/toulouse-2022/theme.html b/templates/variants/toulouse-2022/theme.html
new file mode 100644
index 00000000..ce88b78f
--- /dev/null
+++ b/templates/variants/toulouse-2022/theme.html
@@ -0,0 +1,11 @@
+{% extends "theme.html" %}
+
+{# Remove header user infos block & add header title #}
+{% block header-content %}
+
+
+{% endblock %}
diff --git a/templates/variants/toulouse-2022/wcs/base.html b/templates/variants/toulouse-2022/wcs/base.html
new file mode 100644
index 00000000..8ab5ece6
--- /dev/null
+++ b/templates/variants/toulouse-2022/wcs/base.html
@@ -0,0 +1,12 @@
+{% extends "wcs/base.html" %}
+
+{% block wcs-form-title %}
+ {% if title %}
+
+ {% endif %}
+{% endblock %}