From 3241d1494c74a43b1c35d6d37ca280d485e5566c Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 19 Aug 2021 16:44:54 +0200
Subject: [PATCH] thonon-agglomeration-2021: new theme (#56244)

---
 static/thonon-agglomeration-2021/_custom.scss | 596 ++++++++++++++++++
 static/thonon-agglomeration-2021/_vars.scss   |  98 +++
 static/thonon-agglomeration-2021/config.json  |  39 ++
 static/thonon-agglomeration-2021/style.scss   |   7 +
 .../choix-collectivite/link-list-cell.html    |  33 +
 .../combo/cells/page-message/text-cell.html   |   7 +
 .../combo/page_template.html                  |   4 +
 .../combo/page_template_sidebar.html          |  18 +
 .../thonon-agglomeration-2021/theme.html      |  23 +
 9 files changed, 825 insertions(+)
 create mode 100644 static/thonon-agglomeration-2021/_custom.scss
 create mode 100644 static/thonon-agglomeration-2021/_vars.scss
 create mode 100644 static/thonon-agglomeration-2021/config.json
 create mode 100644 static/thonon-agglomeration-2021/style.scss
 create mode 100644 templates/variants/thonon-agglomeration-2021/combo/cells/choix-collectivite/link-list-cell.html
 create mode 100644 templates/variants/thonon-agglomeration-2021/combo/cells/page-message/text-cell.html
 create mode 100644 templates/variants/thonon-agglomeration-2021/combo/page_template.html
 create mode 100644 templates/variants/thonon-agglomeration-2021/combo/page_template_sidebar.html
 create mode 100644 templates/variants/thonon-agglomeration-2021/theme.html

diff --git a/static/thonon-agglomeration-2021/_custom.scss b/static/thonon-agglomeration-2021/_custom.scss
new file mode 100644
index 00000000..13cfabf3
--- /dev/null
+++ b/static/thonon-agglomeration-2021/_custom.scss
@@ -0,0 +1,596 @@
+@mixin fa-icon($utf) {
+	content: "#{$utf}";
+	font-family: fontawesome;
+}
+
+
+$wrapper-gutter-mobile: 20px;
+$wrapper-gutter-desktop: $columns-gutter * 2;
+
+@mixin fill-viewport($add-padding-right: 0, $add-padding-left: 0) {
+	@media (min-width: $width + 1) {
+		width: 100vw;
+		margin-left: calc(-50vw + 50%);
+		padding-right: calc(50vw - 50% + #{$add-padding-right});
+		padding-left: calc(50vw - 50% + #{$add-padding-left});
+	}
+}
+
+.theme-wrapper {
+	max-width: $width;
+	width: 100%;
+	margin: 0 auto;
+	padding: $wrapper-gutter-mobile;
+	@media ($max-mobile-viewport) {
+		width: 800px;
+		max-width: 100%;
+	}
+	@media ($min-desktop-viewport) {
+		padding: $columns-gutter $wrapper-gutter-desktop;
+	}
+}
+
+body {
+	overflow-x: hidden;
+}
+
+//
+//	HEADER
+//
+.site-header {
+	background-color: white;
+}
+div#header {
+	@extend .theme-wrapper;
+
+}
+#top {
+	@media ($min-desktop-viewport) {
+		display: flex;
+		align-items: center;
+	}
+}
+h1#logo {
+	padding: 0;
+	@media ($max-mobile-viewport) {
+		text-align: center;
+	}
+	a {
+		width: 150px;
+		height: 45px;
+		@media ($min-desktop-viewport) {
+			width: 200px;
+			height: 55px;
+		}
+	}
+}
+.header-desc {
+	@media ($min-desktop-viewport) {
+		flex: 1 1 auto;
+		margin-left: $columns-gutter;
+	}
+}
+.header-desc--yellow-bloc {
+	background-color: $yellow;
+	text-align: center;
+	padding: 20px;
+	border-radius: $cell-border-radius;
+	position: relative;
+	font-size: $fz-h3;
+	font-weight: 500;
+	strong {
+		font-weight: 700;
+	}
+	@media ($min-desktop-viewport) {
+		font-size: $fz-h2;
+		margin: 0 auto;
+		max-width: 660px;
+	}
+	&::after {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 0;
+		border: 15px solid transparent;
+		border-top-color: $yellow;
+		top: 100%;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+	}
+}
+
+// toplinks
+.toplinks--wrapper {
+	border-bottom: 1px solid #dcdce8;
+}
+#toplinks {
+	// reset
+	position: static;
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+
+	max-width: $width;
+	margin: 0 auto;
+	padding: 0.5em 0;
+	font-weight: 500;
+	letter-spacing: 0.1em;
+	text-align: right;
+	font-size: $fz-small;
+
+	.sep {
+		display: none;
+	}
+
+	> span  {
+		display: inline-flex;
+	}
+
+	a {
+		padding: 0 $columns-gutter / 2;
+		display: inline-block;
+		color: $font-color;
+		white-space: nowrap;
+		&::after {
+			color: darken($gray-light, 15%);
+		}
+
+		&.login-link::after {
+			@include fa-icon("\f2be");
+		}
+		&.registration::after {
+			@include fa-icon(" \f196");
+			font-size: 1.1em;
+			vertical-align: middle;
+		}
+		&.logout::after {
+			@include fa-icon(" \f18e");
+			font-size: 1.1em;
+		}
+		&.account-link {
+			white-space: normal;
+			font-size: $fz-small;
+			line-height: 1.2rem;
+			@media($min-desktop-viewport) {
+				&::before {
+					content: "Bienvenue";
+					font-weight: bold;
+				}
+			}
+		}
+		&:first-child {
+			border-right: 1px solid $gray-light;
+		}
+	}
+}
+
+//
+//	PWA NAV
+//	nav inside sidebar
+//
+.pwa-navigation {
+	left: 0;
+	border-top: 1px solid $gray-light;
+	div > ul {
+		justify-content: space-between;
+
+		li {
+			&:not(:first-child) {
+				border: 1px solid $gray-light;
+				border-width: 0 0 0 1px;
+			}
+			a {
+				padding-top: 40px;
+				padding-bottom: 5px;
+				background-size: auto 25px;
+				background-position: left 50% bottom 25px;
+				span {
+					display: flex;
+					align-items: flex-end;
+					justify-content: center;
+					height: 100%;
+					line-height: .9;
+					font-weight: 600;
+					font-size: 0.7em;
+
+					span.badge {
+						font-size: 1.1em;
+					}
+				}
+			}
+		}
+		li:hover, li.selected {
+			a {
+				background-blend-mode: color-dodge;
+				span span.badge {
+					background-color: white;
+				}
+			}
+		}
+	}
+}
+.sidebar--pwa-navigation {
+	.pwa-navigation {
+		@media ($min-desktop-viewport) {
+			border-top: none;
+			margin-bottom: $columns-gutter;
+			display: block;
+			position: static;
+
+			div > ul {
+				flex-direction: column;
+
+				li {
+					&:not(:first-child) {
+						border-width: 1px 0 0 0;
+					}
+					a {
+						background-size: 30px auto;
+						background-position: left 10px center;
+						padding: 1em;
+						padding-left: 65px;
+						span {
+							align-items: center;
+							justify-content: flex-start;
+							font-size: 1rem;
+							font-weight: 800;
+
+							span.badge {
+								font-size: 0.7em;
+								left: 30px;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+//
+//	MAIN
+//
+
+// top message
+.top-message--wrapper {
+	background-color: $gray-message;
+	@include fill-viewport();
+}
+.top-message {
+	@extend .theme-wrapper;
+	@media ($min-desktop-viewport) {
+		padding-left: 0;
+	}
+}
+.top-message--text-cell {
+	& > div {
+		display: flex;
+		align-items: center;
+		&::before {
+			@include fa-icon("\f05a");
+			display: block;
+			font-size: 1.4em;
+			text-align: center;
+			color: darken($gray-message, 25);
+			@media ($min-desktop-viewport) {
+				flex: 0 0 $wrapper-gutter-desktop;
+			}
+		}
+		picture {
+			flex: 0 0 10em;
+			line-height: 0;
+			img {
+				max-width: 100%;
+			}
+			@media ($max-mobile-viewport) {
+				display: none;
+			}
+		}
+	}
+}
+
+#columns-wrapper {
+	@extend .theme-wrapper;
+	max-width: 100%;
+	#sidebar + & {
+		@media ($min-desktop-viewport) {
+			padding-right: $columns-gutter;
+		}
+	}
+}
+
+%sidebar {
+	background-color: white;
+	@media ($min-desktop-viewport) {
+		padding-left: $columns-gutter;
+	}
+	@media (min-width: $width + 1) {
+		margin-right: calc(-50vw + #{$width/2});
+		padding-right: calc(50vw - #{$width/2} + #{$wrapper-gutter-desktop});		
+	}
+}
+.gru-content #sidebar {
+	@extend .theme-wrapper;
+	@extend %sidebar;
+}
+
+//
+//	CELLS
+//
+
+%title {
+	text-align: center;
+}
+
+$cell-additional-padding : 10px;
+.gru-content div.cell {
+	overflow: hidden;
+	padding: $cell-additional-padding;
+	padding-bottom: $cell-additional-padding * 2;
+	margin-bottom: $wrapper-gutter-mobile;
+	@media ($min-desktop-viewport) {
+		margin-bottom: $columns-gutter;
+	}
+
+	&.foldable.folded {
+		padding-bottom: 0;
+	}
+}
+
+// links-lists
+.gru-content {
+	div#rub_service div.category ul,
+	div#services > ul > li > ul,
+	div#account-management ul,
+	div.links-list ul,
+	div.menucell ul,
+	div.wcsformcell,
+	div.categoriescell ul,
+	div.wcscurrentdraftscell ul,
+	div.wcscurrentformscell ul {
+		& > li > a {
+			padding: 0.5rem 2rem 0.5rem 2.5rem;
+			position: relative;
+			&::before {
+				@include fa-icon("\f0a9");
+				color: $yellow;
+				display: inline-block;
+				position: absolute;
+				left: 1em;
+				width: 1em;
+			}
+			&:hover {
+				text-decoration: underline overline $yellow;
+			}
+		}
+		li div.description {
+			padding: 0 1rem 0 1.5rem;
+		}
+		// Redirection Rubrique link
+		li.keyword-redirection-rubrique a {
+			border: 1px solid $yellow;
+			border-radius: 3px;
+			flex-wrap: nowrap;
+			padding: 0;
+			align-items: center;
+			&:hover {
+				text-decoration: none;
+				background-color: $yellow-xlight;
+			}
+			&::before {
+				color: black;
+				background-color: $yellow;
+				position: static;
+				flex: 0 0 2rem;
+				margin-right: 0.5rem;
+				padding: .33em 0 .33em calc(1rem - 1px);
+				align-self: stretch;
+				display: flex;
+			}
+		}
+	}
+}
+
+// cell picture
+.gru-content div.link-list-cell.has-asset-picture,
+.gru-content div.wcsformsofcategorycell.has-asset-picture {
+	picture img {
+		margin: 10px auto;
+	}
+}
+
+// ".couleur-*" cell
+.colored-cell {
+	.gru-content &.link-list-cell.has-asset-picture,
+	.gru-content &.wcsformsofcategorycell.has-asset-picture{
+		picture {
+			border-radius: $cell-border-radius $cell-border-radius 0 0;
+		}
+		picture, h2:first-child {
+			background-color: currentColor;
+			margin : -#{$cell-additional-padding + extract-width($cell-border)};
+			margin-bottom: 0;
+		}
+		h2:first-child {
+			color: white;
+			position: relative;
+			z-index: 1;
+			&::before {
+				content: "";
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 5em;
+				background: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 0.5));
+				z-index: -1;
+			}
+		}
+		img {
+			position: relative;
+			z-index: 2;
+		}
+	}
+}
+@each $color, $hexa in $cell-header-color {
+	.couleur-#{$color} {
+		.gru-content &.link-list-cell.has-asset-picture,
+		.gru-content &.wcsformsofcategorycell.has-asset-picture {
+			@extend .colored-cell;
+			picture, h2:first-child {
+				background-color: $hexa;
+			}
+		}
+	}
+}
+
+// Gray cell
+.gray-cell {
+	.gru-content &.cell {
+		background-color: #e9e3e3;
+		border: none;
+
+		p {
+			font-size: $fz-small;
+		}
+	}
+}
+
+#sidebar .cell {
+	@extend .gray-cell; 
+}
+
+// 
+//	FORMS
+//
+%button {
+	&, &:hover {
+		font-weight: 500;
+		box-shadow: none;
+	}
+}
+%button2 {
+	@extend %button;
+	background-color: white;
+	&:hover {
+		background-color: $yellow-xlight;
+	}
+}
+%cancel-button {
+	background-color: white;
+	border-color: black;
+	&:hover {
+		background-color: $gray-xlight;
+	}
+}
+
+
+
+// 
+//	WCS
+//
+div#rub_service {
+	h2 {
+		font-size: $fz-h1;
+		text-align: left;
+		padding-left: 0.5rem;
+	}
+	h3 {
+		font-size: $fz-h3;
+		text-transform: uppercase;
+		display: flex;
+		&::after {
+			content: "";
+			height: 2px;
+			background-color: $yellow;
+			display: block;
+			flex: 1;
+			margin-left: .66em;
+			align-self: center;
+		}
+	}
+	h4 {
+		text-transform: uppercase;
+	}
+
+	.previous-button button {
+		@extend %button2;
+	}
+}
+div#gauche {
+	background-color: white;
+	@media ($min-desktop-viewport) {
+		padding: $columns-gutter;
+		width: 33%;
+		+ div#rub_service {
+			width: calc(66% - #{$columns-gutter});
+		}
+	}
+	@media ($max-mobile-viewport) {
+		width: auto;
+		margin-left: -1 *$wrapper-gutter-mobile;
+		margin-right: -1 * $wrapper-gutter-mobile;
+		padding: $wrapper-gutter-mobile;
+	}
+}
+div#tracking-code {
+	background-color: #e9e3e3;
+	border-radius: $cell-border-radius;
+	padding: $cell-additional-padding;
+	@media ($min-desktop-viewport) {
+		text-align: center;
+		margin-bottom: $columns-gutter;
+		a {
+			padding-left: 0;
+		}
+		button {
+			margin-right: 0;
+		}
+	}
+}
+.wcs-step--marker {
+	font-weight: bold;
+}
+
+//
+//	FOOTER
+//
+#footer-wrapper {
+	margin-top: 0;
+	padding-bottom: 0;
+}
+#footer {
+	padding-top: 2rem;
+	.pk-button {
+		color: white;
+		background-color: transparent;
+		&:hover {
+			background-color: black;
+		}
+	}
+	.cell {
+		&[class^="grid-"],
+		&[class*=" grid-"] {
+			padding-bottom: 2rem;
+		}
+	}
+	.menu-cell {
+		@include fill-viewport();
+		background-color: black;
+		clear: both;
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+		text-transform: uppercase;
+		font-size: $fz-small;
+		@media (max-width: $very-small-limit) {
+			li {
+				display: block;
+				a {
+					justify-content: center;
+				}
+			}
+		}
+	}
+
+}
diff --git a/static/thonon-agglomeration-2021/_vars.scss b/static/thonon-agglomeration-2021/_vars.scss
new file mode 100644
index 00000000..236a39b7
--- /dev/null
+++ b/static/thonon-agglomeration-2021/_vars.scss
@@ -0,0 +1,98 @@
+// Colors
+$yellow: #FCC400;
+$yellow-light: #ffd53f;
+$yellow-xlight: #fff7da;
+$gray-dark: #2A2A2E;
+$gray-light: #D4CAC8;
+$gray-xlight:#f6f4f5;
+$gray-message: #efeef4;
+$blue-dark: #253A8E;
+
+$cell-header-color: (
+	"rouge": #D8635C,
+	"rose": #D1377A,
+	"bleu-fonce": $blue-dark,
+	"prune-fonce": #732066,
+	"turquoise": #3185AD,
+	"violet": #69599F,
+	"bleu-clair": #79ADC2,
+	"vert-fonce": #00965C,
+	"magenta": #E50046,
+	"jaune": $yellow,
+	"vert-clair": #CFCD00,
+	"prune-clair": #942581
+);
+
+// Typo 
+$roboto: Roboto, sans-serif;
+$raleway: Raleway, sans-serif;
+
+$fz-h1: calc(36em / 16);
+$fz-h2: calc(24em / 16);
+$fz-h3: calc(18em / 16);
+$fz-small: 0.875em;
+
+// Core vars
+$body-background: $gray-xlight;
+$font-color: $gray-dark;
+$font-family: $raleway;
+
+$link-color: $blue-dark;
+$primary-color: $yellow;
+
+$width: 1290px;
+$mobile-limit: 1180px;
+$columns-gutter: 30px;
+$sidebar-width: 30%;
+$sidebar-position: right;
+$sidebar-columns-gutter: 0;
+
+$nav-mobile-bottom-bar-background: white;
+$nav-mobile-bottom-bar-color: $font-color;
+$nav-mobile-bottom-bar-item-hover-background: $yellow;
+$nav-mobile-bottom-bar-item-hover-color: $nav-mobile-bottom-bar-color;
+$nav-mobile-bottom-bar-item-selected-background: $nav-mobile-bottom-bar-item-hover-background;
+$nav-mobile-bottom-bar-item-selected-color: $nav-mobile-bottom-bar-item-hover-color;
+$nav-mobile-bottom-bar-badge-color: font-color;
+$nav-mobile-bottom-bar-badge-background: $yellow;
+
+$title-background: transparent;
+$title-weight: bold;
+$title-font-size: $fz-h3;
+
+$cell-border-radius: 12px;
+$cell-border: 1px solid $gray-light;
+$cell-title-cover-border: false;
+$cell-image-position: top;
+$cell-entry-border-color: transparent;
+$cell-entry-color: $font-color;
+$cell-entry-hover-color: black;
+$cell-entry-font-weight: 500;
+$cell-entry-hover-background: transparent;
+
+$widget-unique-checkbox-position: left;
+$widget-border-radius: 5px;
+$widget-focus-border: 1px solid black;
+
+$button-border-radius: 5px;
+$button-background: $yellow;
+$button-color: black;
+$button-border: 1px solid $yellow;
+$button-hover-background: $yellow-light;
+$button-focus-outline: 1px solid black;
+$buttons-order: cancel, previous, submit;
+
+$form-sidebar-position: right;
+
+$wcs-steps-spacing: 1rem;
+$wcs-step-color: $gray-dark;
+$wcs-step-current-color: black;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-background: $gray-message;
+$wcs-step-current-marker-background: $yellow;
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-tie-color: $wcs-step-marker-background;
+$wcs-step-marker-tie-width: 2px;
+
+$footer-background: $gray-dark;
+$footer-link-color: $yellow;
diff --git a/static/thonon-agglomeration-2021/config.json b/static/thonon-agglomeration-2021/config.json
new file mode 100644
index 00000000..95234da6
--- /dev/null
+++ b/static/thonon-agglomeration-2021/config.json
@@ -0,0 +1,39 @@
+{
+  "label": "Thonon Agglomération 2021",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#FCC400",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": {"label": "Emails : logo"}
+      },
+      "COMBO_CELL_ASSET_SLOTS.update" : {
+        "data_textcell" : {
+          "picture" : {
+            "prefix" : "Image message"
+          }
+        }
+      },
+      "COMBO_CELL_TEMPLATES.update" : {
+        "data_textcell" : {
+          "page-message" : {
+            "extra-css-classes" : "top-message--text-cell",
+            "label" : "Message d'information",
+            "template" : "combo/cells/page-message/text-cell.html"
+          }
+        },
+        "data_linklistcell" : {
+          "change-community" : {
+            "extra-css-classes" : "choix-collectivite",
+            "label" : "Changer de collectivité",
+            "template" : "combo/cells/choix-collectivite/link-list-cell.html"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/static/thonon-agglomeration-2021/style.scss b/static/thonon-agglomeration-2021/style.scss
new file mode 100644
index 00000000..abff5755
--- /dev/null
+++ b/static/thonon-agglomeration-2021/style.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import '../includes/fonts/raleway';
+@import '../includes/fonts/roboto';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/thonon-agglomeration-2021/combo/cells/choix-collectivite/link-list-cell.html b/templates/variants/thonon-agglomeration-2021/combo/cells/choix-collectivite/link-list-cell.html
new file mode 100644
index 00000000..8e45104f
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-2021/combo/cells/choix-collectivite/link-list-cell.html
@@ -0,0 +1,33 @@
+{% load assets %}
+{% block cell-content %}
+<h2 class="choix-collectivite--title">
+  {{ title }}
+</h2>
+<div class="cell--body">
+  <form id="choix-collectivite--form">
+    <label class="choix-collectivite--label" for="choix-collectivite--select">
+      Ma commune
+    </label>
+    <select id="choix-collectivite--select-{{ cell.id }}" class="choix-collectivite--select">
+      <option value="">Sélectionnez</option>
+      {% for link in links %}
+        <option value="{{ link.url }}">{{ link.title }}</option>
+      {% endfor %}
+    </select>
+    <p>
+      Sélectionnez votre commune et découvrez ses services en ligne.
+    </p>
+  </form>
+</div>
+{% endblock %}
+
+<script>
+  $(function() {
+    $('#choix-collectivite--select-{{ cell.id }}').change(function(e){
+      const link = this.options[this.selectedIndex].value;
+      if (link) {
+        window.location.href = link;
+      }
+    })
+  });
+</script>
diff --git a/templates/variants/thonon-agglomeration-2021/combo/cells/page-message/text-cell.html b/templates/variants/thonon-agglomeration-2021/combo/cells/page-message/text-cell.html
new file mode 100644
index 00000000..55d22803
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-2021/combo/cells/page-message/text-cell.html
@@ -0,0 +1,7 @@
+{% load assets %}
+
+{% include "combo/asset_picture_fragment.html" %}
+
+<div class="cell--body">
+	{{ text }}
+</div>
diff --git a/templates/variants/thonon-agglomeration-2021/combo/page_template.html b/templates/variants/thonon-agglomeration-2021/combo/page_template.html
new file mode 100644
index 00000000..ac62b197
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-2021/combo/page_template.html
@@ -0,0 +1,4 @@
+{% extends "combo/page_template.html" %}
+
+{# remove nav #}
+{% block nav %}{% endblock %}
diff --git a/templates/variants/thonon-agglomeration-2021/combo/page_template_sidebar.html b/templates/variants/thonon-agglomeration-2021/combo/page_template_sidebar.html
new file mode 100644
index 00000000..31e17b22
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-2021/combo/page_template_sidebar.html
@@ -0,0 +1,18 @@
+{% extends "combo/page_template_sidebar.html" %}
+{% load combo i18n pwa %}
+
+{# move PWA nav inside sidebar #}
+{% block before-main-content %}
+	{{ block.super }}
+{% endblock %}
+{% block sidebar %}
+<div id="sidebar">
+{% if pwa_display == "standalone" %}
+	<div class="sidebar--pwa-navigation">
+		{% pwa_navigation %}
+	</div>
+{% endif %}
+{% trans "Sidebar" as name %}
+{% placeholder "sidebar" name=name %}
+</div>
+{% endblock %}
diff --git a/templates/variants/thonon-agglomeration-2021/theme.html b/templates/variants/thonon-agglomeration-2021/theme.html
new file mode 100644
index 00000000..11603c96
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-2021/theme.html
@@ -0,0 +1,23 @@
+{% extends "theme.html" %}
+
+{# Move user infos block & add header content #}
+{% block header-pre %}
+	<div class="toplinks--wrapper">
+     {% block top-links %}{% endblock %}
+	</div>
+{% endblock %}
+{% block header-content %}
+	<div class="header-desc">
+		<h2 class="header-desc--yellow-bloc">{{ header_title|safe }}</h2>
+	</div>
+{% endblock %}
+
+{# Remove nav #}
+{% block nav %}{% endblock %}
+
+{# Top message #}
+{% block content-pre %}
+	<div class="top-message--wrapper">
+		<div class="top-message">{% placeholder "top-message" name="Message d'information" %}</div>
+	</div>
+{% endblock %}
-- 
2.20.1

