From f2dd0e0ec914e4c45bb85071a38f46be625af8cf Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 4 Nov 2021 15:11:10 +0100
Subject: [PATCH] thonon-agglomeration-online: new theme (#58367)

---
 .../thonon-agglomeration-online/_custom.scss  | 630 ++++++++++++++++++
 static/thonon-agglomeration-online/_vars.scss |  96 +++
 .../thonon-agglomeration-online/config.json   |  36 +
 .../img/menu/bell.svg                         |   1 +
 .../img/menu/books.svg                        |   1 +
 .../img/menu/click.svg                        |   1 +
 .../img/menu/group-green.svg                  |   1 +
 .../img/menu/group-yellow.svg                 |   1 +
 .../img/menu/meeting.svg                      |  70 ++
 .../img/menu/megaphone.svg                    |   1 +
 static/thonon-agglomeration-online/style.scss |   6 +
 .../combo/cells/btn-with-icon/link-cell.html  |  11 +
 .../combo/page_template.html                  |  10 +
 .../thonon-agglomeration-online/theme.html    |  28 +
 14 files changed, 893 insertions(+)
 create mode 100644 static/thonon-agglomeration-online/_custom.scss
 create mode 100644 static/thonon-agglomeration-online/_vars.scss
 create mode 100644 static/thonon-agglomeration-online/config.json
 create mode 100644 static/thonon-agglomeration-online/img/menu/bell.svg
 create mode 100644 static/thonon-agglomeration-online/img/menu/books.svg
 create mode 100644 static/thonon-agglomeration-online/img/menu/click.svg
 create mode 100644 static/thonon-agglomeration-online/img/menu/group-green.svg
 create mode 100644 static/thonon-agglomeration-online/img/menu/group-yellow.svg
 create mode 100644 static/thonon-agglomeration-online/img/menu/meeting.svg
 create mode 100644 static/thonon-agglomeration-online/img/menu/megaphone.svg
 create mode 100644 static/thonon-agglomeration-online/style.scss
 create mode 100644 templates/variants/thonon-agglomeration-online/combo/cells/btn-with-icon/link-cell.html
 create mode 100644 templates/variants/thonon-agglomeration-online/combo/page_template.html
 create mode 100644 templates/variants/thonon-agglomeration-online/theme.html

diff --git a/static/thonon-agglomeration-online/_custom.scss b/static/thonon-agglomeration-online/_custom.scss
new file mode 100644
index 00000000..edeac17a
--- /dev/null
+++ b/static/thonon-agglomeration-online/_custom.scss
@@ -0,0 +1,630 @@
+.color-cyan {
+	color: $cyan;
+}
+
+.list-nude {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.download-link {
+	&::after {
+		content: "\00A0\f019";
+		font-family: FontAwesome, sans-serif;
+	}
+}
+
+
+%title {
+	display: flex;
+	margin-bottom: 1em;
+	padding-bottom: 0;
+	&::before {
+		content: "";
+		order: 1;
+		height: 1px;
+		flex: 1 0 0;
+		align-self: center;
+		background-color: currentColor;
+		margin-left: .66em;
+	}
+}
+
+%button {
+	text-transform: uppercase;
+	font-size: $fz-small;
+	font-weight: 500;
+	padding: 1em;
+}
+
+.button-right-arrow {
+	@extend %button;
+	display: inline-flex;
+	align-items: center;
+	padding: 0;
+	padding-left: 15px;
+	overflow: hidden;
+
+	&::after {
+		content: "→";
+		color: white;
+		background-color: $cyan;
+		padding: 10px;
+		font-weight: bold;
+		margin-left: 1em;
+	}
+}
+
+.button-left-arrow {
+	@extend .button-right-arrow;
+	padding-left: 0;
+	padding-right: 1em;
+	&::after {
+		content: "←";
+		order: -1;
+		margin-left: 0;
+		margin-right: 1em;
+	}
+}
+
+label {
+	font-weight: 600;
+}
+
+//
+//	HEADER
+//
+
+#top {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+
+	@media ($max-mobile-viewport) {
+		height: 75px;
+	}
+	@media ($min-desktop-viewport) {
+		padding-bottom: 20px;	
+	}
+}
+
+
+h1#logo.has-logo{
+	padding-left: 0;
+	a {
+		min-width: 0;
+		width: 100px;
+		height: 50px;
+		@media ($min-desktop-viewport) {
+			width: 180px;
+			height: 85px;
+			margin-right: 20px;
+		}
+	}
+	@media ($max-mobile-viewport) {
+		flex-grow: 1;
+	}
+}
+
+.theme-header--baseline {
+	font-size: $fz-small;
+	text-transform: uppercase;
+}
+
+//
+//	TOPLINKS
+//
+
+#toplinks {
+	position: static;
+	border: none;
+	box-shadow: none;
+	border-radius: 0;
+	padding: 0;
+
+	@media ($max-mobile-viewport) {
+		padding-right: $mobile-header-height;
+	}
+
+	span {
+		display: inline-block;
+	}
+
+	a {
+		text-transform: uppercase;
+		display: inline-block;
+
+		&.login-link, &.logout {
+			background-color: $gray-dark;
+			color: white;
+			padding: .66em 1em;
+			&:hover {
+				background-color: $cyan;
+				text-decoration: none;
+			}
+		}
+
+		&.registration {
+			display: none;
+		}
+		&.account-link {
+			color: $gray-medium;
+			font-weight: 500;
+		}
+	}
+	.sep {
+		display: none;
+	}
+	@media ($max-mobile-viewport) {
+		a {
+			display: block;
+			font-size: $fz-small;
+		}
+	}
+	@media ($min-desktop-viewport) {
+		flex: 1 0 100%;
+		order: -1;
+		text-align: right;
+	}
+}
+
+//
+//	NAV
+//
+
+.site-nav {
+	@media ($min-desktop-viewport) {
+		flex-grow: 1;
+		text-align: right;
+		align-self: flex-end;
+	}
+}
+
+div.gru-nav .gru-nav-button + ul {
+	margin: 0;
+	> li {
+		a {
+			font-weight: 500;
+			> span {
+				position: relative;
+			}
+		}
+		> a {
+			background: no-repeat white;
+			@media ($max-mobile-viewport) {
+				background-size: 2.1em;
+				background-position: left 0.66em center ;
+				border-radius: 1em !important;
+				border-bottom: none;
+				margin-bottom: 10px;
+				padding-left: 3.5em;
+				+ ul {
+					display: none;
+				}
+			}
+			@media ($min-desktop-viewport) {
+				background-position: bottom 2.2em center ;
+				padding-bottom: 0;
+				padding-top: 4em;
+			}
+		}
+	}
+}
+// submenu
+div.gru-nav > ul ul {
+	padding: .33em;
+	a:hover {
+		border-color: transparent;
+		color: $nav-color;
+	}
+}
+// badge
+div.gru-nav span.badge, 
+div.menucell span.badge {
+	$size: 1.5em;
+	&::before, &::after {
+		content: none;
+	}
+	display: inline-block;
+	width: $size;
+	height: $size;
+	line-height: $size;
+	border-radius: 50%;
+	text-align: center;
+	background-color: #E10000;
+	color: white;
+	font-weight: bold;
+}
+div.gru-nav span.badge {
+	position: absolute;
+	right: calc(100% + .5em);
+	bottom: 50%;
+	@media ($min-desktop-viewport) {
+		right: auto;
+		bottom: calc( 100% + 2em);
+		left: calc(50%);
+	}
+}
+
+// right-to-left adaptation
+@media ($max-mobile-viewport) {
+	@if $responsive-menu == left-to-right {
+		body {
+			border-left: none;
+		}
+		div.gru-nav .gru-nav-button {
+			border: 20px solid;
+			left: auto;
+			right: 0;
+			top: 0;
+			+ ul {
+				transform: translateX(100%);
+				left: auto;
+				right: 0;
+				width: auto;
+				padding-left: 1em;
+				padding-right: 1em;
+			}
+		}
+	}
+}
+
+//
+//	MAIN
+//
+
+main {
+	padding-top: $columns-gutter;
+}
+.gru-content {
+	padding-left: 0.7em;
+	padding-right: 0.7em;
+}
+
+//
+//	CELLS
+//
+
+// cell--body
+.column div.a2-block,
+.gru-content div.cell,
+.block {
+	margin-bottom: $columns-gutter;
+	& h2 ~ div,
+	.cell--body,
+	&.menu-cell {
+		background-color: white;
+		border-radius: $cell-border-radius;
+		overflow: hidden;
+	}
+}
+
+// cell pagination
+.cell-items-pagination {
+	background: none !important;
+}
+
+// Custom search form
+div.search-cell {
+	form {
+		background-color: white;
+		padding: 0;
+		border: 1px solid $gray;
+		border-radius: 10em;
+		overflow: hidden;
+		input, input:focus {
+			margin-right: 0;
+			border: none !important;
+		}
+		button {
+			border-radius: 50%;
+			order: -1;
+			background-color: $font-color;
+			color: white;
+			position: relative;
+			padding: 5px;
+			font-size: $fz-2;
+			width: 3em;
+			height: 3em;
+			&:hover {
+				background-color: $cyan;
+				color: white;
+			}
+		}
+	}
+}
+.combo-search--button {
+	&::before {
+		content: "\f002";
+		font-family: FontAwesome;
+	}
+	&-label {
+		display: none;
+	}
+}
+
+// Custom link cell
+.btn-with-icon {
+	&--link {
+		@extend %button;
+		text-transform: none;
+		padding: 0;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		text-align: left;
+		margin-right: 0;
+		margin-bottom: 0.5rem;
+		font-size: 1rem;
+		font-weight: normal;
+		&:hover {
+			background-color: $font-color;
+		}
+	}
+	&--icon {
+		background-color: white;
+		background-origin: content-box;
+		background-size: contain;
+		background-position: center;
+		background-repeat: no-repeat;
+		display: inline-block;
+		flex-basis: 3.2em;
+		border: .5em solid transparent;
+		border-left-width: 1em;
+		align-self: stretch;
+	}
+	&--label {
+		padding: .8em;
+		display: inline-block;
+		line-height: 1.2em;
+	}
+}
+.big-btn-with-icon {
+	.btn-with-icon {
+		&--link {
+			font-size: $fz-2;
+			&:hover {
+				background-color: $cyan;
+			}
+		}
+	}
+}
+// custom .menu-cell
+div.menu-cell ul {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	& > li {
+		border-bottom: none !important;
+	}
+	& > li > a {
+		color: $font-color;
+		padding-top: .5rem;
+		padding-bottom: .5rem;
+		&::before {
+			content: ">";
+			color: $gray;
+			font-weight: bold;
+			margin-right: .33em;
+		}
+		&:hover {
+			color: $cyan;
+			background-color: transparent;
+		}
+	}
+}
+
+
+//
+//	JSON CELLS (TILES)
+//
+
+// all tiles
+.tiles--list {
+	@extend .list-nude;
+}
+.tiles--item {
+	margin-bottom: 0.5rem;
+}
+.tiles--btn {
+	text-align: right;
+	> a:last-child {
+		margin-right: 0;
+	}
+}
+.tile {
+	color: inherit;
+	text-decoration: none;
+	display: block;
+	line-height: 1.4;
+
+	&:hover {
+		text-decoration: none;
+
+		.tile--title {
+			color: $cyan;
+		}
+	}
+}
+.tile--picture {
+	background-color: white;
+	display: block;
+	position: relative;
+	height: auto;
+}
+.tile--img {
+	position: absolute;
+	inset: 0 0 0 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+.tile--body {
+	background-color: white;
+	padding: 2rem;
+
+	& > * {
+		margin-top: 0;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+.actu--date,
+.tile--date {
+	color: $gray-medium;
+	margin-bottom: 0.2rem;
+}
+.tile--title {
+	font-size: $fz-2;
+	text-transform: uppercase;
+	font-weight: 600;
+}
+// Actus tiles
+.tile-actu {
+	@media ($min-desktop-viewport) {
+		display: flex;
+
+		> * {
+			flex-basis: 50%;
+			flex-grow: 1
+		}
+	}
+	.tile--picture {
+		padding-top: 54%;
+		@media ($min-desktop-viewport) {
+			padding-top: 27%;
+		}
+	}
+}
+// tile actu small
+.tile-actu-small {
+	.tile--picture {
+		padding-top: 64%;
+		@media ($min-desktop-viewport) {
+			padding-top: 32%;
+		}
+	}
+}
+// tile actu mini
+.actus-mini--list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2px;
+	margin-bottom: 0.5rem;
+}
+.actus-mini--item {
+	min-width: 12rem;
+	flex: 1 0 0;
+	background-color: white;
+	margin-bottom: 0;
+}
+.tile-actu-mini {
+	display: block;
+}
+// People tiles
+.peoples--list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+
+}
+.peoples--item {
+	background-color: white;
+	flex: 1 1 30%;
+	max-width: 14rem;
+	@media (max-width: $very-small-limit) {
+		flex-basis: 40%;
+	}
+}
+.tile-people {
+	.tile--body {
+		padding: .33em;
+	}
+	.tile--title {
+		font-size: 1rem;
+		margin-bottom: 0;
+	}
+	.tile--subtitle {
+		color: $gray-medium;
+		text-transform: uppercase;
+		font-weight: normal;
+	}
+	.tile--picture {
+		padding-top: 13rem;
+	}
+}
+// actus
+.actu--title {
+	@extend %title;
+	&::before {
+		content: none;
+	}
+}
+.actu--insert-title,
+.actu--footer-title {
+	font-size: $fz-2 !important;
+	margin-bottom: 0.2em !important;
+	&::before {
+		content: none !important;
+	}
+}
+.actu--picture {
+	background-color: white;
+	display: block;
+}
+.actu--legend {
+	color: $gray-medium;
+	font-size: $fz-small;
+	padding: 1em;
+}
+.actu--body,
+.actu-footer {
+	line-height: 1.4;
+}
+.actu--insert {
+	border-left: .33em solid $cyan;
+	padding: .66em;
+	background-color: hsla(0, 0%, 0%, 0.05);
+}
+.actu--footer {
+	ul {
+		@extend .list-nude;
+		margin-bottom: 1em;
+	}
+	li {
+		margin-bottom: 0.33em;
+		&::before {
+			content: ">";
+			color: $gray;
+			font-weight: bold;
+			margin-right: .33em;
+		}
+	}
+}
+
+
+//
+//	FORMS
+//
+
+div.buttons .submit-button button,
+.gru-content form:not(.combo-search-form) button.submit-button, {
+	@extend .button-right-arrow;
+}
+
+div.gru-content button.previous-button,
+div.buttons .previous-button button {
+	@extend .button-left-arrow;
+}
+
+
+//
+//	WCS
+//
+
+div.widget div.title {
+	margin-bottom: .25em;
+}
+
diff --git a/static/thonon-agglomeration-online/_vars.scss b/static/thonon-agglomeration-online/_vars.scss
new file mode 100644
index 00000000..9022155c
--- /dev/null
+++ b/static/thonon-agglomeration-online/_vars.scss
@@ -0,0 +1,96 @@
+// colors
+$cyan: #178387;
+$gold: #FEC307;
+$green: #06B486;
+$orange: #FF6F00;
+$violet: #8338EC;
+$blue: #3A86FF;
+$pink: #EF237B;
+$gray-dark: #2E2E2E;
+$gray-medium: #828282;
+$gray: #B4B4B4;
+$gray-light: #DBDBDB;
+$gray-xlight: #F4F4F4;
+
+// font-size
+$base-font: 15;
+$fz-1: 25em / $base-font;
+$fz-2: 20em / $base-font;
+$fz-small: 12em / $base-font;
+
+$mobile-header-height: 75px;
+// $desktop-header-height: ;
+
+// Core vars
+$width: 1400em / $base-font;
+$mobile-limit: 64em;
+$very-small-limit: 35em;
+$columns-gutter: 40em / 15;
+$sidebar-position: right;
+$sidebar-width: 480em / 15;
+$sidebar-columns-gutter: 80em / 15;
+$grid-gutter: 2rem;
+$columns-gutter: 2rem;
+
+$font-family: Poppins, sans-serif;
+$font-size: $base-font / 16 * 100%;
+$font-color: $gray-dark;
+$link-color: $cyan;
+
+$primary-color: $cyan;
+$body-background: $gray-xlight;
+
+$header-background-color: white;
+
+$nav-item-selected-mode: bottom-border;
+$nav-color: $gray-dark;
+$nav-active-color: $nav-color;
+$nav-item-selected-background: transparent;
+$nav-item-selected-color: $nav-color;
+$nav-menu-side: $mobile-header-height;
+$nav-button-background: $gray-dark;
+$nav-button-color: white !important;
+$nav-submenu-background: white;
+$nav-submenu-color: $gray-medium;
+$nav-mobile-menu-background: $gray-dark;
+$nav-mobile-menu-item-color: $gray-dark;
+$nav-mobile-menu-item-hover-background: $gray-xlight;
+$nav-after-image: false;
+$responsive-menu: left-to-right; // based on left-to-right, but use a custom right-to-left
+
+$nav-mobile-bottom-bar-item-hover-color: $gold;
+
+$title-background: transparent;
+$title-color: $gray-dark;
+$title-font-size: $fz-1;
+$title-weight: bold;
+$title-transform: uppercase;
+$title-padding: 0;
+
+$cell-background: transparent;
+$cell-border: none;
+$cell-title-cover-border: false;
+$cell-entry-border: 1px solid $body-background;
+$cell-entry-hover-color: white;
+$cell-entry-hover-background: $cyan;
+$cell-border-radius: 1rem;
+
+$button-background: white;
+$button-hover-background: $cyan;
+$button-color: $font-color;
+$button-hover-color: white;
+$button-border-radius: $cell-border-radius;
+$button-border: none;
+
+$form-sidebar-position: right;
+$form-sidebar-width: 400em / 15;
+$form-sidebar-gutter: $sidebar-columns-gutter;
+
+$widget-unique-checkbox-position: left;
+$widget-border: 1px solid $gray;
+$widget-focus-border: 1px solid $gray-dark;
+$widget-border-radius: 1em;
+
+$footer-background: $gray-dark;
+$footer-color: white;
+$footer-link-color: $footer-color;
diff --git a/static/thonon-agglomeration-online/config.json b/static/thonon-agglomeration-online/config.json
new file mode 100644
index 00000000..a090b013
--- /dev/null
+++ b/static/thonon-agglomeration-online/config.json
@@ -0,0 +1,36 @@
+{
+  "label": "Thonon Agglomération Online",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#178387",
+    "include_top_links": true,
+    "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_TEMPLATES.update" : {
+        "data_linkcell" : {
+          "big-btn-icon" : {
+            "extra-css-classes" : "big-btn-with-icon",
+            "label" : "bouton avec image (grand)",
+            "template" : "combo/cells/btn-with-icon/link-cell.html"
+          },
+          "btn-icon" : {
+            "extra-css-classes" : "btn-with-icon",
+            "label" : "bouton avec image",
+            "template" : "combo/cells/btn-with-icon/link-cell.html"
+          }
+        }
+      },
+      "COMBO_CELL_ASSET_SLOTS.update": {
+        "data_linkcell": {
+          "picture": {"prefix": "Icône"}
+        }
+      }
+    }
+  }
+}
diff --git a/static/thonon-agglomeration-online/img/menu/bell.svg b/static/thonon-agglomeration-online/img/menu/bell.svg
new file mode 100644
index 00000000..b5ab71e1
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.689" height="28.267" viewBox="0 0 23.689 28.267"><defs><style>.a{fill:#2e2e2e;stroke:#2e2e2e;stroke-width:0.8px;}</style></defs><g transform="translate(-1.6 0.4)"><g transform="translate(11.156 0)"><path class="a" d="M14.006,4.784a.572.572,0,0,1-.572-.572V2.289a1.144,1.144,0,0,0-2.289,0V4.212a.572.572,0,1,1-1.144,0V2.289a2.289,2.289,0,1,1,4.578,0V4.212A.572.572,0,0,1,14.006,4.784Z" transform="translate(-10 0)"/></g><g transform="translate(9.439 22.889)"><path class="a" d="M12.506,24.578A4.01,4.01,0,0,1,8.5,20.572a.572.572,0,1,1,1.144,0,2.861,2.861,0,0,0,5.722,0,.572.572,0,1,1,1.144,0A4.01,4.01,0,0,1,12.506,24.578Z" transform="translate(-8.5 -20)"/></g><g transform="translate(2 3.433)"><path class="a" d="M23.172,23.6H3.717A1.717,1.717,0,0,1,2.6,20.579a7.957,7.957,0,0,0,2.832-6.091V11.011a8.011,8.011,0,1,1,16.022,0v3.477a7.948,7.948,0,0,0,2.823,6.083A1.717,1.717,0,0,1,23.172,23.6ZM13.444,4.144a6.874,6.874,0,0,0-6.867,6.867v3.477a9.092,9.092,0,0,1-3.228,6.957.572.572,0,0,0,.367,1.011H23.172a.572.572,0,0,0,.372-1.007,9.1,9.1,0,0,1-3.233-6.961V11.011a6.874,6.874,0,0,0-6.867-6.867Z" transform="translate(-2 -3)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/thonon-agglomeration-online/img/menu/books.svg b/static/thonon-agglomeration-online/img/menu/books.svg
new file mode 100644
index 00000000..6895b16e
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/books.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34.092" height="34.88" viewBox="0 0 34.092 34.88"><defs><style>.a{fill:#8338ec;stroke:#8338ec;stroke-width:0.2px;}</style></defs><g transform="translate(0.1 0.113)"><g transform="translate(0 0)"><g transform="translate(0)"><path class="a" d="M39.394,31.922h0L30.952.416a.562.562,0,0,0-.687-.4L22.659,2.057a.549.549,0,0,0-.267.176V1.025A.562.562,0,0,0,21.83.463H6.084a.562.562,0,0,0-.562.562V33.641a.562.562,0,0,0,.562.562H21.83a.562.562,0,0,0,.562-.562V3.234L30.7,34.25a.562.562,0,0,0,.543.417.582.582,0,0,0,.144-.019l7.6-2.038A.562.562,0,0,0,39.394,31.922Zm-26,1.157H6.647V1.588h6.748Zm7.873,0H14.519V1.588h6.748Zm10.376.337L23.493,3,30.011,1.25l8.15,30.418Z" transform="translate(-5.522 0)"/></g></g><g transform="translate(2.249 3.837)"><path class="a" d="M41.458,54.589H38.084a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-37.522 -54.589)"/></g><g transform="translate(2.249 6.087)"><path class="a" d="M41.458,86.589H38.084a.562.562,0,1,0,0,1.125h3.374a.562.562,0,1,0,0-1.125Z" transform="translate(-37.522 -86.589)"/></g><g transform="translate(10.122 3.837)"><path class="a" d="M153.458,54.589h-3.374a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-149.522 -54.589)"/></g><g transform="translate(10.122 6.087)"><path class="a" d="M153.458,86.589h-3.374a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-149.522 -86.589)"/></g><g transform="translate(19.758 3.837)"><path class="a" d="M291,55.023a.562.562,0,0,0-.678-.416l-.029.008-3.262.873a.562.562,0,0,0,.286,1.088h.005l3.262-.873A.562.562,0,0,0,291,55.023Z" transform="translate(-286.608 -54.591)"/></g><g transform="translate(20.345 6.014)"><path class="a" d="M299.329,85.971a.562.562,0,0,0-.689-.4h0l-3.259.873a.562.562,0,0,0,.286,1.088h.005l3.262-.873A.563.563,0,0,0,299.329,85.971Z" transform="translate(-294.96 -85.554)"/></g><g transform="translate(25.876 26.655)"><path class="a" d="M378.008,379.62a.562.562,0,0,0-.685-.4l-3.262.873a.562.562,0,0,0,.146,1.106h0a.568.568,0,0,0,.146-.019l3.259-.873A.562.562,0,0,0,378.008,379.62Z" transform="translate(-373.644 -379.205)"/></g><g transform="translate(26.463 28.828)"><path class="a" d="M386.353,410.532a.562.562,0,0,0-.685-.4l-3.262.873a.562.562,0,0,0,.146,1.105.539.539,0,0,0,.146-.02l3.262-.873A.562.562,0,0,0,386.353,410.532Z" transform="translate(-381.988 -410.117)"/></g><g transform="translate(10.122 27.455)"><path class="a" d="M153.458,390.589h-3.374a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-149.522 -390.589)"/></g><g transform="translate(10.122 29.705)"><path class="a" d="M153.458,422.589h-3.374a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-149.522 -422.589)"/></g><g transform="translate(2.249 27.455)"><path class="a" d="M41.458,390.589H38.084a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-37.522 -390.589)"/></g><g transform="translate(2.249 29.705)"><path class="a" d="M41.458,422.589H38.084a.562.562,0,0,0,0,1.125h3.374a.562.562,0,0,0,0-1.125Z" transform="translate(-37.522 -422.589)"/></g><g transform="translate(0 0)"><g transform="translate(0 0)"><path class="a" d="M39.394,31.922h0L30.952.416a.562.562,0,0,0-.687-.4L22.659,2.057a.549.549,0,0,0-.267.176V1.025A.562.562,0,0,0,21.83.463H6.084a.562.562,0,0,0-.562.562V33.641a.562.562,0,0,0,.562.562H21.83a.562.562,0,0,0,.562-.562V3.234L30.7,34.25a.562.562,0,0,0,.543.417.582.582,0,0,0,.144-.019l7.6-2.038A.562.562,0,0,0,39.394,31.922Zm-26,1.157H6.647V1.588h6.748Zm7.873,0H14.519V1.588h6.748Zm10.376.337L23.493,3,30.011,1.25l8.15,30.418Z" transform="translate(-5.522 0)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/static/thonon-agglomeration-online/img/menu/click.svg b/static/thonon-agglomeration-online/img/menu/click.svg
new file mode 100644
index 00000000..62f74bd7
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/click.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.503" height="36.591" viewBox="0 0 27.503 36.591"><defs><style>.a{fill:#5980ff;stroke:#5980ff;stroke-width:0.2px;}</style></defs><g transform="translate(0.1 0.1)"><g transform="translate(10.613 10.616)"><g transform="translate(0)"><path class="a" d="M229.806,164.755l-15.161-15.161a.759.759,0,0,0-1.295.537v20.993a.758.758,0,0,0,1.224.6l3.849-3.01,3.36,6.046a.76.76,0,0,0,1,.309l4.548-2.274a.756.756,0,0,0,.385-.453.769.769,0,0,0-.061-.593l-3.166-5.7h4.776a.759.759,0,0,0,.537-1.295Zm-6.6-.22a.76.76,0,0,0-.664,1.126l3.407,6.13-3.191,1.6-3.437-6.189a.76.76,0,0,0-.512-.376.747.747,0,0,0-.152-.015.761.761,0,0,0-.467.161l-3.323,2.6V151.96l12.575,12.575Z" transform="translate(-213.35 -149.372)"/></g></g><g transform="translate(10.613)"><g transform="translate(0)"><path class="a" d="M214.108,0a.758.758,0,0,0-.758.758V5.307a.758.758,0,0,0,1.516,0V.758A.758.758,0,0,0,214.108,0Z" transform="translate(-213.35)"/></g></g><g transform="translate(0 10.613)"><path class="a" d="M69.323,149.333H64.774a.758.758,0,1,0,0,1.516h4.548a.758.758,0,1,0,0-1.516Z" transform="translate(-64.016 -149.333)"/></g><g transform="translate(16.678 10.613)"><g transform="translate(0)"><path class="a" d="M303.99,149.333h-4.548a.758.758,0,0,0,0,1.516h4.548a.758.758,0,1,0,0-1.516Z" transform="translate(-298.683 -149.333)"/></g></g><g transform="translate(3.108 3.109)"><g transform="translate(0)"><path class="a" d="M112.256,47.186l-3.217-3.216a.758.758,0,0,0-1.072,1.072l3.217,3.216a.762.762,0,0,0,.537.221.749.749,0,0,0,.535-.221A.759.759,0,0,0,112.256,47.186Z" transform="translate(-107.745 -43.749)"/></g></g><g transform="translate(3.108 14.903)"><g transform="translate(0)"><path class="a" d="M112.256,209.923a.759.759,0,0,0-1.072,0l-3.217,3.216a.758.758,0,0,0,1.072,1.072l3.217-3.216A.759.759,0,0,0,112.256,209.923Z" transform="translate(-107.745 -209.701)"/></g></g><g transform="translate(14.9 3.108)"><g transform="translate(0)"><path class="a" d="M278.188,43.956a.758.758,0,0,0-1.073,0L273.9,47.172a.759.759,0,0,0,1.073,1.072l3.217-3.216A.759.759,0,0,0,278.188,43.956Z" transform="translate(-273.676 -43.733)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/static/thonon-agglomeration-online/img/menu/group-green.svg b/static/thonon-agglomeration-online/img/menu/group-green.svg
new file mode 100644
index 00000000..3c9b2c4c
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/group-green.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.306" height="37.711" viewBox="0 0 38.306 37.711"><defs><style>.a{fill:#06b486;stroke:#06b486;stroke-width:0.5px;}</style></defs><g transform="translate(-3988.48 -1406.597)"><g transform="translate(4004.237 1406.847)"><path class="a" d="M4036.844,1413.641a3.4,3.4,0,1,1,3.4-3.4A3.4,3.4,0,0,1,4036.844,1413.641Zm0-5.731a2.334,2.334,0,1,0,2.334,2.334A2.337,2.337,0,0,0,4036.844,1407.91Z" transform="translate(-4033.447 -1406.847)"/></g><g transform="translate(3988.73 1417.141)"><path class="a" d="M3998.279,1463.449a2.492,2.492,0,0,0-3.929,0,2.5,2.5,0,0,1-2.5-2.5v-10.711a2.006,2.006,0,0,1-.826.27,2.094,2.094,0,0,1-2.3-2.083v-8.242a3.659,3.659,0,0,1,3.655-3.655h7.789a.532.532,0,0,1,.5.71,2.825,2.825,0,0,0-.17.961v8.952a1.139,1.139,0,0,0,.186.617.546.546,0,0,1,.083.283v.6h0v12.295A2.5,2.5,0,0,1,3998.279,1463.449Zm-1.433-2.5a1.433,1.433,0,0,0,2.866,0v-12.614c0-.044,0-.089,0-.137a2.2,2.2,0,0,1-.27-1.047V1438.2a3.855,3.855,0,0,1,.049-.608h-7.105a2.6,2.6,0,0,0-2.592,2.592v8.242a1.029,1.029,0,0,0,1.133,1.026,1.076,1.076,0,0,0,.928-1.093V1442.7a.531.531,0,1,1,1.063,0v18.25a1.433,1.433,0,0,0,2.866,0v-9.5a.532.532,0,0,1,1.063,0Z" transform="translate(-3988.73 -1436.532)"/></g><g transform="translate(3993.145 1409.737)"><path class="a" d="M4004.63,1421.521a3.17,3.17,0,1,1,3.169-3.169A3.173,3.173,0,0,1,4004.63,1421.521Zm0-5.276a2.106,2.106,0,1,0,2.105,2.107A2.108,2.108,0,0,0,4004.63,1416.245Z" transform="translate(-4001.46 -1415.182)"/></g><g transform="translate(4014.492 1417.141)"><path class="a" d="M4069.443,1463.449a2.492,2.492,0,0,0-3.929,0,2.5,2.5,0,0,1-2.5-2.5v-12.591a.57.57,0,0,1,.023-.157,5.992,5.992,0,0,0,.247-1.049V1438.2a2.837,2.837,0,0,0-.17-.961.531.531,0,0,1,.5-.71h7.788a3.658,3.658,0,0,1,3.654,3.655v8.242a2.094,2.094,0,0,1-2.3,2.083,1.989,1.989,0,0,1-.826-.271v10.712A2.5,2.5,0,0,1,4069.443,1463.449Zm-1.433-2.5a1.433,1.433,0,0,0,2.866,0v-12.547c0-.015,0-.029,0-.044V1442.7a.532.532,0,0,1,1.063,0v5.62c0,.014,0,.029,0,.042a1.076,1.076,0,0,0,.927,1.089,1.031,1.031,0,0,0,1.134-1.026v-8.242a2.6,2.6,0,0,0-2.592-2.592h-7.1a3.856,3.856,0,0,1,.048.608v8.952a5.885,5.885,0,0,1-.271,1.285v12.512a1.433,1.433,0,0,0,2.866,0v-9.5a.532.532,0,0,1,1.063,0Z" transform="translate(-4063.019 -1436.532)"/></g><g transform="translate(3999.442 1414.889)"><path class="a" d="M4029.946,1459.18a2.662,2.662,0,0,0-4.268,0,2.668,2.668,0,0,1-2.665-2.665V1444.8a2.125,2.125,0,0,1-.947.33,2.244,2.244,0,0,1-2.445-2.218v-8.952a3.935,3.935,0,0,1,3.923-3.924h8.535a3.932,3.932,0,0,1,3.693,2.605h0a3.917,3.917,0,0,1,.231,1.318v8.952a2.245,2.245,0,0,1-2.445,2.218,2.119,2.119,0,0,1-.947-.33v11.716A2.668,2.668,0,0,1,4029.946,1459.18Zm-2.134-3.2a.531.531,0,0,1,.531.532,1.6,1.6,0,1,0,3.2,0v-13.67a.532.532,0,0,1,.531-.531h0a.531.531,0,0,1,.531.53,1.215,1.215,0,0,0,1.049,1.228,1.164,1.164,0,0,0,1.094-.539,1.146,1.146,0,0,0,.188-.621v-8.952a2.873,2.873,0,0,0-2.861-2.861h-8.535a2.866,2.866,0,0,0-2.691,1.9,2.829,2.829,0,0,0-.17.961v8.952a1.139,1.139,0,0,0,.186.617,1.161,1.161,0,0,0,1.1.543,1.214,1.214,0,0,0,1.049-1.232.531.531,0,1,1,1.063,0v13.676a1.6,1.6,0,0,0,3.205,0A.532.532,0,0,1,4027.812,1455.983Z" transform="translate(-4019.621 -1430.036)"/></g><g transform="translate(4015.783 1409.737)"><path class="a" d="M4069.911,1421.521a3.17,3.17,0,1,1,3.17-3.169A3.172,3.172,0,0,1,4069.911,1421.521Zm0-5.276a2.106,2.106,0,1,0,2.107,2.107A2.109,2.109,0,0,0,4069.911,1416.245Z" transform="translate(-4066.742 -1415.182)"/></g><g transform="translate(4007.103 1430.575)"><path class="a" d="M4042.242,1486.594a.532.532,0,0,1-.531-.531V1475.8a.531.531,0,1,1,1.063,0v10.261A.532.532,0,0,1,4042.242,1486.594Z" transform="translate(-4041.71 -1475.269)"/></g><g transform="translate(4002.835 1420.18)"><path class="a" d="M4029.936,1453.338a.532.532,0,0,1-.531-.531v-6.98a.531.531,0,1,1,1.063,0v6.98A.532.532,0,0,1,4029.936,1453.338Z" transform="translate(-4029.404 -1445.295)"/></g><g transform="translate(4011.37 1420.18)"><path class="a" d="M4054.547,1453.344a.532.532,0,0,1-.532-.531v-6.986a.532.532,0,1,1,1.063,0v6.986A.532.532,0,0,1,4054.547,1453.344Z" transform="translate(-4054.015 -1445.295)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/thonon-agglomeration-online/img/menu/group-yellow.svg b/static/thonon-agglomeration-online/img/menu/group-yellow.svg
new file mode 100644
index 00000000..02935929
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/group-yellow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.306" height="37.711" viewBox="0 0 38.306 37.711"><defs><style>.a{fill:#fec307;stroke:#fec307;stroke-width:0.5px;}</style></defs><g transform="translate(-3988.48 -1406.597)"><g transform="translate(4004.237 1406.847)"><path class="a" d="M4036.844,1413.641a3.4,3.4,0,1,1,3.4-3.4A3.4,3.4,0,0,1,4036.844,1413.641Zm0-5.731a2.334,2.334,0,1,0,2.334,2.334A2.337,2.337,0,0,0,4036.844,1407.91Z" transform="translate(-4033.447 -1406.847)"/></g><g transform="translate(3988.73 1417.141)"><path class="a" d="M3998.279,1463.449a2.492,2.492,0,0,0-3.929,0,2.5,2.5,0,0,1-2.5-2.5v-10.711a2.006,2.006,0,0,1-.826.27,2.094,2.094,0,0,1-2.3-2.083v-8.242a3.659,3.659,0,0,1,3.655-3.655h7.789a.532.532,0,0,1,.5.71,2.825,2.825,0,0,0-.17.961v8.952a1.139,1.139,0,0,0,.186.617.546.546,0,0,1,.083.283v.6h0v12.295A2.5,2.5,0,0,1,3998.279,1463.449Zm-1.433-2.5a1.433,1.433,0,0,0,2.866,0v-12.614c0-.044,0-.089,0-.137a2.2,2.2,0,0,1-.27-1.047V1438.2a3.855,3.855,0,0,1,.049-.608h-7.105a2.6,2.6,0,0,0-2.592,2.592v8.242a1.029,1.029,0,0,0,1.133,1.026,1.076,1.076,0,0,0,.928-1.093V1442.7a.531.531,0,1,1,1.063,0v18.25a1.433,1.433,0,0,0,2.866,0v-9.5a.532.532,0,0,1,1.063,0Z" transform="translate(-3988.73 -1436.532)"/></g><g transform="translate(3993.145 1409.737)"><path class="a" d="M4004.63,1421.521a3.17,3.17,0,1,1,3.169-3.169A3.173,3.173,0,0,1,4004.63,1421.521Zm0-5.276a2.106,2.106,0,1,0,2.105,2.107A2.108,2.108,0,0,0,4004.63,1416.245Z" transform="translate(-4001.46 -1415.182)"/></g><g transform="translate(4014.492 1417.141)"><path class="a" d="M4069.443,1463.449a2.492,2.492,0,0,0-3.929,0,2.5,2.5,0,0,1-2.5-2.5v-12.591a.57.57,0,0,1,.023-.157,5.992,5.992,0,0,0,.247-1.049V1438.2a2.837,2.837,0,0,0-.17-.961.531.531,0,0,1,.5-.71h7.788a3.658,3.658,0,0,1,3.654,3.655v8.242a2.094,2.094,0,0,1-2.3,2.083,1.989,1.989,0,0,1-.826-.271v10.712A2.5,2.5,0,0,1,4069.443,1463.449Zm-1.433-2.5a1.433,1.433,0,0,0,2.866,0v-12.547c0-.015,0-.029,0-.044V1442.7a.532.532,0,0,1,1.063,0v5.62c0,.014,0,.029,0,.042a1.076,1.076,0,0,0,.927,1.089,1.031,1.031,0,0,0,1.134-1.026v-8.242a2.6,2.6,0,0,0-2.592-2.592h-7.1a3.856,3.856,0,0,1,.048.608v8.952a5.885,5.885,0,0,1-.271,1.285v12.512a1.433,1.433,0,0,0,2.866,0v-9.5a.532.532,0,0,1,1.063,0Z" transform="translate(-4063.019 -1436.532)"/></g><g transform="translate(3999.442 1414.889)"><path class="a" d="M4029.946,1459.18a2.662,2.662,0,0,0-4.268,0,2.668,2.668,0,0,1-2.665-2.665V1444.8a2.125,2.125,0,0,1-.947.33,2.244,2.244,0,0,1-2.445-2.218v-8.952a3.935,3.935,0,0,1,3.923-3.924h8.535a3.932,3.932,0,0,1,3.693,2.605h0a3.917,3.917,0,0,1,.231,1.318v8.952a2.245,2.245,0,0,1-2.445,2.218,2.119,2.119,0,0,1-.947-.33v11.716A2.668,2.668,0,0,1,4029.946,1459.18Zm-2.134-3.2a.531.531,0,0,1,.531.532,1.6,1.6,0,1,0,3.2,0v-13.67a.532.532,0,0,1,.531-.531h0a.531.531,0,0,1,.531.53,1.215,1.215,0,0,0,1.049,1.228,1.164,1.164,0,0,0,1.094-.539,1.146,1.146,0,0,0,.188-.621v-8.952a2.873,2.873,0,0,0-2.861-2.861h-8.535a2.866,2.866,0,0,0-2.691,1.9,2.829,2.829,0,0,0-.17.961v8.952a1.139,1.139,0,0,0,.186.617,1.161,1.161,0,0,0,1.1.543,1.214,1.214,0,0,0,1.049-1.232.531.531,0,1,1,1.063,0v13.676a1.6,1.6,0,0,0,3.205,0A.532.532,0,0,1,4027.812,1455.983Z" transform="translate(-4019.621 -1430.036)"/></g><g transform="translate(4015.783 1409.737)"><path class="a" d="M4069.911,1421.521a3.17,3.17,0,1,1,3.17-3.169A3.172,3.172,0,0,1,4069.911,1421.521Zm0-5.276a2.106,2.106,0,1,0,2.107,2.107A2.109,2.109,0,0,0,4069.911,1416.245Z" transform="translate(-4066.742 -1415.182)"/></g><g transform="translate(4007.103 1430.575)"><path class="a" d="M4042.242,1486.594a.532.532,0,0,1-.531-.531V1475.8a.531.531,0,1,1,1.063,0v10.261A.532.532,0,0,1,4042.242,1486.594Z" transform="translate(-4041.71 -1475.269)"/></g><g transform="translate(4002.835 1420.18)"><path class="a" d="M4029.936,1453.338a.532.532,0,0,1-.531-.531v-6.98a.531.531,0,1,1,1.063,0v6.98A.532.532,0,0,1,4029.936,1453.338Z" transform="translate(-4029.404 -1445.295)"/></g><g transform="translate(4011.37 1420.18)"><path class="a" d="M4054.547,1453.344a.532.532,0,0,1-.532-.531v-6.986a.532.532,0,1,1,1.063,0v6.986A.532.532,0,0,1,4054.547,1453.344Z" transform="translate(-4054.015 -1445.295)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/thonon-agglomeration-online/img/menu/meeting.svg b/static/thonon-agglomeration-online/img/menu/meeting.svg
new file mode 100644
index 00000000..28622a8d
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/meeting.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="44" height="44" version="1.1" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <defs>
+  <style>.a{fill:#ff6f00;stroke:#ff6f00;stroke-width:0.2px;}</style>
+ </defs>
+ <g transform="translate(-3083.4 -629.49)">
+  <g transform="translate(3093 629.59)">
+   <g transform="translate(0 .38)">
+    <path class="a" transform="translate(-3106.3 -630.51)" d="m3122.1 645.74a0.637 0.637 0 0 1-0.635-0.638v-2.97a0.636 0.636 0 0 1 0.219-0.479l3.134-2.729a13.5 13.5 0 0 0 3.544-4.883l0.632-1.492a0.556 0.556 0 0 0-1-0.484l-0.484 0.884a14.761 14.761 0 0 1-4.37 4.925 3.284 3.284 0 0 1-1.916 0.613h-5.817a3.288 3.288 0 0 1-1.926-0.619 14.785 14.785 0 0 1-4.329-4.9l-0.495-0.907a0.557 0.557 0 0 0-1 0.484l0.632 1.492a13.507 13.507 0 0 0 3.544 4.883l3.134 2.729a0.634 0.634 0 0 1 0.219 0.48v2.971a0.637 0.637 0 0 1-1.273 0v-2.681l-2.916-2.539a14.771 14.771 0 0 1-3.88-5.346l-0.632-1.492a1.829 1.829 0 0 1 3.29-1.589l0.5 0.907a13.487 13.487 0 0 0 3.953 4.471 2.017 2.017 0 0 0 1.184 0.381h5.817a2.021 2.021 0 0 0 1.178-0.376 13.491 13.491 0 0 0 3.991-4.5l0.484-0.884a1.829 1.829 0 0 1 3.289 1.59l-0.632 1.492a14.759 14.759 0 0 1-3.88 5.346l-2.916 2.539v2.682a0.637 0.637 0 0 1-0.643 0.639z"/>
+   </g>
+   <g transform="translate(8.81)">
+    <path class="a" transform="translate(-3127.5 -629.59)" d="m3130.7 635.92a3.164 3.164 0 1 1 3.164-3.163 3.167 3.167 0 0 1-3.164 3.163zm0-5.054a1.891 1.891 0 1 0 1.891 1.891 1.893 1.893 0 0 0-1.891-1.891z"/>
+   </g>
+  </g>
+  <g transform="translate(3083.5 658.5)">
+   <g transform="translate(0,7.286)">
+    <path class="a" transform="translate(-3083.5 -716.76)" d="m3098 725.42a0.637 0.637 0 0 1-0.636-0.637v-4.324a2.439 2.439 0 0 0-2.437-2.437h-7.733a2.439 2.439 0 0 0-2.437 2.437v4.324a0.637 0.637 0 1 1-1.273 0v-4.324a3.714 3.714 0 0 1 3.71-3.71h7.733a3.714 3.714 0 0 1 3.71 3.71v4.324a0.637 0.637 0 0 1-0.637 0.637z"/>
+   </g>
+   <g transform="translate(4.344)">
+    <path class="a" transform="translate(-3094 -699.21)" d="m3097.2 705.67a3.233 3.233 0 1 1 3.233-3.233 3.236 3.236 0 0 1-3.233 3.233zm0-5.193a1.96 1.96 0 1 0 1.96 1.96 1.962 1.962 0 0 0-1.96-1.959z"/>
+   </g>
+   <g transform="translate(2.874,10.833)">
+    <path class="a" transform="translate(-3090.4 -725.3)" d="m3091.1 730.42a0.637 0.637 0 0 1-0.637-0.637v-3.85a0.6365 0.6365 0 1 1 1.273 0v3.85a0.637 0.637 0 0 1-0.636 0.637z"/>
+    <g transform="translate(8.131)">
+     <path class="a" transform="translate(-3110 -725.3)" d="m3110.7 730.42a0.637 0.637 0 0 1-0.637-0.637v-3.85a0.6365 0.6365 0 1 1 1.273 0v3.85a0.637 0.637 0 0 1-0.636 0.637z"/>
+    </g>
+   </g>
+   <g transform="translate(13.88)">
+    <g transform="translate(0,7.286)">
+     <path class="a" transform="translate(-3116.9 -716.76)" d="m3131.5 725.42a0.637 0.637 0 0 1-0.637-0.637v-4.324a2.439 2.439 0 0 0-2.437-2.437h-7.733a2.439 2.439 0 0 0-2.437 2.437v4.324a0.6365 0.6365 0 1 1-1.273 0v-4.324a3.714 3.714 0 0 1 3.709-3.71h7.733a3.714 3.714 0 0 1 3.71 3.71v4.324a0.636 0.636 0 0 1-0.635 0.637z"/>
+    </g>
+    <g transform="translate(4.344)">
+     <path class="a" transform="translate(-3127.4 -699.21)" d="m3130.6 705.67a3.233 3.233 0 1 1 3.233-3.233 3.237 3.237 0 0 1-3.233 3.233zm0-5.193a1.96 1.96 0 1 0 1.96 1.96 1.962 1.962 0 0 0-1.96-1.959z"/>
+    </g>
+    <g transform="translate(2.874,10.833)">
+     <path class="a" transform="translate(-3123.9 -725.3)" d="m3124.5 730.42a0.637 0.637 0 0 1-0.636-0.637v-3.85a0.637 0.637 0 1 1 1.273 0v3.85a0.637 0.637 0 0 1-0.637 0.637z"/>
+     <g transform="translate(8.131)">
+      <path class="a" transform="translate(-3143.5 -725.3)" d="m3144.1 730.42a0.637 0.637 0 0 1-0.636-0.637v-3.85a0.6365 0.6365 0 1 1 1.273 0v3.85a0.637 0.637 0 0 1-0.637 0.637z"/>
+     </g>
+    </g>
+   </g>
+   <g transform="translate(27.76)">
+    <g transform="translate(0,7.286)">
+     <path class="a" transform="translate(-3150.4 -716.76)" d="m3164.9 725.42a0.637 0.637 0 0 1-0.636-0.637v-4.324a2.439 2.439 0 0 0-2.437-2.437h-7.733a2.44 2.44 0 0 0-2.437 2.437v4.324a0.6365 0.6365 0 1 1-1.273 0v-4.324a3.714 3.714 0 0 1 3.71-3.71h7.732a3.715 3.715 0 0 1 3.71 3.71v4.324a0.637 0.637 0 0 1-0.636 0.637z"/>
+    </g>
+    <g transform="translate(4.344)">
+     <path class="a" transform="translate(-3160.8 -699.21)" d="m3164.1 705.67a3.233 3.233 0 1 1 3.233-3.233 3.237 3.237 0 0 1-3.233 3.233zm0-5.193a1.96 1.96 0 1 0 1.96 1.96 1.962 1.962 0 0 0-1.96-1.959z"/>
+    </g>
+    <g transform="translate(2.874,10.833)">
+     <path class="a" transform="translate(-3157.3 -725.3)" d="m3157.9 730.42a0.637 0.637 0 0 1-0.636-0.637v-3.85a0.637 0.637 0 1 1 1.273 0v3.85a0.637 0.637 0 0 1-0.637 0.637z"/>
+     <g transform="translate(8.132)">
+      <path class="a" transform="translate(-3176.9 -725.3)" d="m3177.5 730.42a0.637 0.637 0 0 1-0.636-0.637v-3.85a0.6365 0.6365 0 1 1 1.273 0v3.85a0.637 0.637 0 0 1-0.637 0.637z"/>
+     </g>
+    </g>
+   </g>
+  </g>
+  <g transform="translate(3098.7 644.09)">
+   <path class="a" transform="translate(-3120.1 -664.52)" d="m3130.7 676.27h-8.586a0.635 0.635 0 0 1-0.631-0.557l-1.315-10.482a0.637 0.637 0 0 1 0.631-0.716h11.216a0.637 0.637 0 0 1 0.631 0.716l-1.315 10.482a0.635 0.635 0 0 1-0.631 0.557zm-8.026-1.27h7.464l1.155-9.209h-9.769z"/>
+  </g>
+ </g>
+</svg>
diff --git a/static/thonon-agglomeration-online/img/menu/megaphone.svg b/static/thonon-agglomeration-online/img/menu/megaphone.svg
new file mode 100644
index 00000000..e972f4ab
--- /dev/null
+++ b/static/thonon-agglomeration-online/img/menu/megaphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="39" height="30.875" viewBox="0 0 39 30.875"><defs><style>.a{fill:#ef237b;}</style></defs><g transform="translate(-1951.772 -1425.325)"><g transform="translate(1959.897 1425.325)"><g transform="translate(0)"><path class="a" d="M1993.907,1452.951a.839.839,0,0,1-.292-.053l-21.125-8.125a.813.813,0,0,1-.52-.759v-9.75a.812.812,0,0,1,.52-.759l21.125-8.125a.814.814,0,0,1,1.1.759v26a.814.814,0,0,1-.812.813Zm-20.313-9.5,19.5,7.5v-23.634l-19.5,7.5Z" transform="translate(-1971.97 -1425.325)"/></g></g><g transform="translate(1951.772 1433.451)"><g transform="translate(0)"><path class="a" d="M1960.71,1456.9h-5.688a3.253,3.253,0,0,1-3.25-3.25v-4.875a3.253,3.253,0,0,1,3.25-3.25h5.688a.813.813,0,0,1,.812.813v9.75A.813.813,0,0,1,1960.71,1456.9Zm-5.688-9.75a1.626,1.626,0,0,0-1.625,1.625v4.875a1.625,1.625,0,0,0,1.625,1.625h4.875v-8.125Z" transform="translate(-1951.772 -1445.525)"/></g></g><g transform="translate(1956.647 1443.202)"><g transform="translate(0)"><path class="a" d="M1971.2,1482.764h-4.875a.812.812,0,0,1-.8-.7l-1.625-11.375a.812.812,0,0,1,.691-.918.823.823,0,0,1,.918.691l1.526,10.676h3.26l-1.086-9.675a.816.816,0,0,1,.717-.9.825.825,0,0,1,.9.716l1.186,10.579a.813.813,0,0,1-.806.9Z" transform="translate(-1963.89 -1469.766)"/></g></g><g transform="translate(1984.272 1430.201)"><g transform="translate(0 0)"><path class="a" d="M2033.376,1442.321a.812.812,0,0,1-.45-1.488l4.875-3.25a.812.812,0,1,1,.9,1.352l-4.875,3.25A.8.8,0,0,1,2033.376,1442.321Z" transform="translate(-2032.564 -1437.447)"/></g></g><g transform="translate(1984.272 1444.827)"><g transform="translate(0 0)"><path class="a" d="M2038.252,1478.678a.8.8,0,0,1-.45-.137l-4.875-3.25a.812.812,0,0,1,.9-1.352l4.875,3.25a.813.813,0,0,1-.45,1.489Z" transform="translate(-2032.565 -1473.804)"/></g></g><g transform="translate(1984.272 1439.138)"><g transform="translate(0 0)"><path class="a" d="M2038.251,1461.288h-4.875a.813.813,0,0,1,0-1.625h4.875a.813.813,0,0,1,0,1.625Z" transform="translate(-2032.564 -1459.663)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/static/thonon-agglomeration-online/style.scss b/static/thonon-agglomeration-online/style.scss
new file mode 100644
index 00000000..4b06290c
--- /dev/null
+++ b/static/thonon-agglomeration-online/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/poppins';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/thonon-agglomeration-online/combo/cells/btn-with-icon/link-cell.html b/templates/variants/thonon-agglomeration-online/combo/cells/btn-with-icon/link-cell.html
new file mode 100644
index 00000000..f1ff69bb
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-online/combo/cells/btn-with-icon/link-cell.html
@@ -0,0 +1,11 @@
+{% load assets %}
+{% get_asset cell=cell type='picture' as asset %}
+<a class="btn-with-icon--link" href="{{url}}">
+	{% if asset %}
+	<span
+		class="btn-with-icon--icon"
+		style="background-image: url({{asset.asset.url}})"
+	></span>
+	{% endif %}
+	<span class="btn-with-icon--label">{{ title }}</span>
+</a>
diff --git a/templates/variants/thonon-agglomeration-online/combo/page_template.html b/templates/variants/thonon-agglomeration-online/combo/page_template.html
new file mode 100644
index 00000000..ec2680ba
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-online/combo/page_template.html
@@ -0,0 +1,10 @@
+{% extends "combo/page_template.html" %}
+
+{# add header baseline #}
+{% block header-title %}
+  {{ block.super }}
+  <p class="theme-header--baseline desktop-only">
+    L'espace intranet <br>
+    de <span class="color-cyan">Thonon agglo</span>
+  </p>
+{% endblock %}
diff --git a/templates/variants/thonon-agglomeration-online/theme.html b/templates/variants/thonon-agglomeration-online/theme.html
new file mode 100644
index 00000000..2e20ce71
--- /dev/null
+++ b/templates/variants/thonon-agglomeration-online/theme.html
@@ -0,0 +1,28 @@
+{% extends "theme.html" %}
+{% load static %}
+
+{# map menu icons #}
+{% block extra_css %}
+<style>
+  {% if menu_icons %}
+  {% for icon, slug in menu_icons.items %}
+    div.gru-nav > ul > li.menu-{{ slug }} > a {
+      background-image: url("{{site_base}}{% static "" %}{{css_variant}}/img/menu/{{ icon }}.svg");
+    }
+  {% endfor %}
+  {% endif %}
+</style>
+
+<script>
+  {% for icon, slug in menu_icons.items %}
+    console.log(`{{ slug }}`);
+  {% endfor %}
+</script>
+{% endblock %}
+
+{# move nav inside header #top #}
+{% block header-content %}
+  {{ block.super }}
+  {% block nav %}{% endblock %}
+{% endblock %}
+{% block after-header %}{% endblock %}
-- 
2.30.2

