diff --git a/static/clermont-ici/_custom.scss b/static/clermont-ici/_custom.scss
new file mode 100644
index 00000000..6718c4f7
--- /dev/null
+++ b/static/clermont-ici/_custom.scss
@@ -0,0 +1,581 @@
+//
+//	COMPONENTS
+//
+
+%title {
+	text-align: center;
+	line-height: 1.2;
+}
+
+%button {
+	text-transform: uppercase;
+	font-size: $fz-small;
+	font-weight: bold;
+	background-size: 100%;
+	transition: 400ms background-size;
+	&, &:hover {
+		background-image: gradient-ro(90deg);
+	}
+	&:hover {
+		background-size: 200%;
+	}
+}
+
+%cancel-button {
+	&, &:hover {
+		background-image: none;
+		background-color: $beige;
+		border-color: $font-color;
+	}
+}
+
+//
+// HEADER
+//
+#top {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem 0;
+	@media (max-width: $very-small-limit) {
+		font-size: $fz-small;
+	}
+
+	@media ($min-desktop-viewport) {
+		flex-direction: row;
+		align-items: center;
+	}
+
+}
+// Logo
+h1#logo.has-logo {
+	line-height: 1.5;
+	flex-grow: 1;
+	font-size: 1em;
+	@media ($min-desktop-viewport) {
+		font-size: $fz-h3;
+	}
+	a {
+		padding: 1em 0;
+		padding-left: 6.5em;
+		text-indent: 0;
+		background-size: 5em 100%;
+		display: block;
+		text-transform: uppercase;
+		color: $font-color;
+		.site-header--community {
+			display: block;
+			font-size: $fz-small;
+			font-weight: 400;
+		}
+	}
+}
+// user links
+#toplinks {
+	position: static;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	padding: 0;
+	border: none;
+	max-width: none;
+	@media ($max-mobile-viewport) {
+		order: -1;
+		margin-bottom: 1rem;
+	}
+	.login {
+		> a {
+			@extend .pk-button;
+		}
+		.sep {
+			display: none;
+		}
+	}
+	.logged-in {
+		@extend %button;
+		a {
+			color: inherit;
+		}
+		.connected-user {
+			padding-right: .5em;
+			border-right: 2px solid;
+			margin-right: .5em;
+			@media ($min-desktop-viewport) {
+				&::before {
+					content: "bienvenue ";
+					font-weight: normal;
+				}
+			}
+
+		}
+	}
+}
+
+//
+//	NAV
+//
+.nav-btn {
+	display: inline-block;
+	line-height: 1;
+	font-size: 1rem;
+	padding: 0.75em 2em;
+	margin: 0;
+	margin-bottom: .33em;
+	border-radius: $border-radius !important;
+}
+#nav {
+	@media ($min-desktop-viewport) {
+		text-align: right;
+		> ul {
+			display: inline;
+		}
+	}
+}
+.nav--title {
+	@extend .nav-btn;
+	text-transform: uppercase;
+	background-color: white;
+	vertical-align: top;
+}
+div.gru-nav ul {
+	margin: 0;
+	li {
+		@media ($max-mobile-viewport) {
+			display: block;
+		}
+		@media ($min-desktop-viewport) {
+			text-align: center;
+			margin-left: .33em;
+			width: 16em;
+		}
+		a {
+			@extend .nav-btn;
+			display: block;
+			font-weight: 400;
+			background-color: $orange-light;
+		}
+		&.selected a, a:hover {
+			font-weight: bold;
+			text-decoration: underline;
+		}
+	}
+	//subnav
+	ul {
+		display: none !important;
+	}
+}
+// nav over page image
+@media ($min-desktop-viewport) {
+	body.has-picture {
+		#nav-wrapper {
+			position: relative;
+			height: 0;
+			z-index: 1000;
+		}
+		#nav {
+			padding-top: 1rem;
+			padding-right: 1rem;
+		}
+	}
+}
+
+//	
+//	MAIN
+//
+#content {
+	margin-top: 2.5rem;
+}
+
+.community-header--default {
+	background-image: var(--page-picture);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	height: 32em;
+	display: flex;
+	overflow: hidden;
+
+	body:not(.has-picture) & {
+		display: none;
+	}
+}
+.community-header--logo {
+	filter: contrast(0%) brightness(2);
+	display: block;
+	margin: auto;
+	margin-left: 1rem;
+	max-width: 40%;
+	max-height: 12em;
+	height: auto;
+}
+// hide community-header--default if cell in hero placeholder
+* + .community-header--default {
+	display: none;
+}
+
+
+.top-column {
+	div.cell {
+		margin-left: 0;
+		margin-right: 0;
+		margin-bottom: $columns-gutter;
+	}
+}
+
+//
+//	CELLS
+//
+
+// Custom styles
+.centered-cell {
+	.gru-content &.cell {
+		text-align: center;
+		h2:first-child {
+			background-color: transparent;
+			border-bottom: none;
+		}
+		form {
+			text-align: left;
+		}
+	}
+}
+.centered-orange-cell {
+	@extend .centered-cell;
+	.gru-content &.cell {
+		color: black;
+		background: gradient-ro(135deg);
+		background-size: 200%;
+		border: none;
+
+		form {
+			input, select {
+				background-color: transparent;
+				border-color: currentColor;
+			}
+		} 
+	}
+}
+.list-of-forms-cell {
+	$image-width: 2.5rem;
+	.gru-content &.cell {
+		h2:first-child {
+			font-weight: normal;
+			font-size: 1rem;
+			text-align: left;
+			padding-left: $image-width + 2;
+		}
+
+		&.foldable.folded {
+			h2:first-child {
+				background-color: white;
+				border-bottom: none;
+			}
+		}
+
+		// Picture position
+		&.has-asset-picture {
+			> div {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: baseline;
+
+				> * {
+					flex: 0 0 100%;
+				}
+
+				> h2:first-child {
+					flex: 1 0 50%;
+					margin-left: -1 * ($image-width + 1);
+
+				}
+
+				> picture {
+					display: block;
+					order: -1;
+					flex: 0 0 $image-width;
+					align-self: center;
+					margin-left: 1rem;
+					position: relative;
+					z-index: 1;
+
+					img {
+						padding: 0;
+					}
+				}
+			}
+		}
+		//links-list
+		div.links-list ul {
+			& > li {
+				> a {
+					padding-left: $image-width + 2;
+				}
+				&.required-authentication a::after {
+					content: "\f023"; // lock icon
+					top: 0;
+					bottom: 0;
+					left: 1rem;
+					right: auto;
+					margin: auto;
+					width: $image-width;
+					height: 1.5rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				// Gray logo keyword options
+				$logo-width: 5rem;
+				@each $name, $file in $logos-demarche {
+					&[class*="keyword-"][class*="-#{$name}"] a {
+						padding-right: $logo-width + 1;
+						&::before {
+							content: "";
+							display: block;
+							background: url(/assets/logo:#{$file}) no-repeat right center;
+							background-size: contain;
+							height: 2.5rem;
+							width: $logo-width;
+							position: absolute;
+							top: 0;
+							bottom: 0;
+							right: 1rem;
+							left: auto;
+							margin: auto;
+							filter: grayscale(100%);
+						}
+					}
+				}	
+			}
+		}
+	}
+}
+//	Slug 'btn-with-icon'
+// 	optionnal class 'orange' or 'beige'
+.btn-with-icon {
+	.gru-content &.cell {
+		border: none;
+
+		&, &.orange {
+			background-color: $orange;
+		}
+		&.beige {
+			background-color: $beige;
+		}
+	}
+	&--link {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-transform: uppercase;
+		font-weight: 600;
+		color: black;
+		padding: 0 1.5em;
+		&, &:hover {
+			background-color: inherit;
+		}
+	}
+	&--icon {
+		display: block;
+		flex: 0 0 2em;
+		height: 2em;
+		margin-right: .66em;
+		background-size: contain;
+		background-repeat: no-repeat;
+		transform: translateY(-0.2em);
+	}
+	&--label {
+		padding-top: 1.5em;
+		padding-bottom: 1.5em;
+	}
+}
+
+.gru-content {
+	// all cells
+	div.cell {
+		overflow: hidden;
+		.cell--body,
+		& h2 + div {
+			p:first-child {
+				margin-top: 0;
+			}
+		}
+	}
+
+	.tracking-code-input-cell {
+		form {
+			display: flex;
+			button {
+				margin-right: 0;
+				margin-left: 1.5em;
+				flex: 0 1 auto;
+			}
+		}
+	}
+
+	.wcs-forms-of-category-cell,
+	.wcs-current-forms-cell,
+	.wcs-current-drafts-cell {
+		@extend .list-of-forms-cell;
+	}
+
+	.text-cell,
+	.wcs-current-forms-cell,
+	.wcs-current-drafts-cell {
+		@extend .pk-transparent;
+	}
+
+	div.wcs-current-forms-cell,
+	div.wcs-current-drafts-cell {
+		h2:first-child {
+			border-bottom: none;
+			border-radius: $border-radius !important;
+			background-color: $green-light;
+		}
+	}
+	div.wcs-current-drafts-cell {
+		h2:first-child {
+			background-color: $gray;
+		}
+	}
+}
+
+div.carrousel-content input + div div.carrousel-item {
+	padding-left: calc(6rem + 0.7rem);
+}
+
+//
+//	WCS
+//
+
+.wcs-page #columns-wrapper {
+	border: $cell-border;
+	border-radius: $cell-border-radius;
+	padding: 1rem;
+	margin: auto;
+	max-width: 62.5rem;
+	width: 100%;
+}
+
+div#tracking-code {
+	h3 {
+		background: none;
+		border-bottom: none;
+		padding-bottom: 0;
+	}
+	a {
+		font-size: 1rem;
+	}
+}
+
+div#rub_service {
+	h2 {
+		background-color: transparent;
+		border-bottom: none;
+		text-align: left;
+		font-size: $fz-h2;
+		padding-left: 0.5rem;
+	}
+	> h2:first-child {
+		font-size: $fz-h1;
+	}
+}
+
+div.buttons .cancel-button button {
+	@extend %cancel-button;
+}
+
+// Steps
+@media ($mq-min--wcs-steps-horizontal-layout) {
+	.wcs-steps {
+		font-size: 1rem;
+	}
+	.wcs-step {
+		position: relative;
+		flex-basis: 5rem;
+	}
+	.wcs-step--marker {
+		font-size: $fz-h3;
+	}
+	.wcs-step--label {
+		display: block !important;
+		font-size: $fz-xsmall;
+		left: -1.1rem;
+		top: calc(100% + .5em);
+
+	}
+}
+
+
+//
+//	FOOTER
+//
+
+#footer-wrapper {
+	border-bottom: 1.5em solid red;
+	border-image-slice: 1;
+	border-image-source: gradient-ro(-90deg);
+}
+#footer {
+	font-size: $fz-small;
+	font-weight: 500;
+
+	@media (max-width: $very-small-limit) {
+		text-align: center;
+	}
+
+	a {
+		text-align: inherit;
+		font-weight: inherit;
+
+		color: $font-color;
+		padding-top: 0;
+		padding-bottom: 0;
+		display: block;
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.links-list ul {
+		& > li {
+			border-bottom: none;
+		}
+	}	
+}
+
+.back-top {
+	clear: both;
+}
+.back-top--link {
+	&:before {
+		color: $red
+	}
+}
+
+
+// 
+//	Neutral templates
+//
+
+.page-template-sidebar-neutral,
+.page-template-neutral {
+	.site-header--community {
+		display: none !important;
+	}
+}
+
+//
+//	PWA navigation
+//
+
+.pwa-navigation div > ul li a {
+	background-size: auto 40%;
+	background-position: center 20%;
+
+	span {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-transform: uppercase;
+	}
+}
+
diff --git a/static/clermont-ici/_vars.scss b/static/clermont-ici/_vars.scss
new file mode 100644
index 00000000..ecc27b94
--- /dev/null
+++ b/static/clermont-ici/_vars.scss
@@ -0,0 +1,94 @@
+// colors
+$orange: #FF8001;
+$orange-light: #f6ad65;
+$red: #EA0142;
+$beige: #FFF7EF;
+$gray-dark: #555;
+$gray-light: #E9E9E9;
+$gray: #D2D6DE;
+$green-light: #BFE4C4;
+
+@function gradient-ro($angle) {
+	@return linear-gradient($angle, $orange, $red);
+}
+
+// Typo
+$fz-h1: 2.5em;
+$fz-h2: 1.55em;
+$fz-h3: 1.25em;
+$fz-small: 0.875em;
+$fz-xsmall: 0.75em;
+
+// logos démarche
+$logos-demarche: (
+	"ville": "clermont-ferrand",
+	"metro": "clermont-auvergne-metropole"
+);
+
+// Core vars
+$primary-color: $orange;
+$border-radius: 20px;
+$font-color: black;
+$link-color: $red;
+$font-family: montserrat, sans-serif;
+
+$width: 95rem;
+$mobile-limit: 1024px;
+$sidebar-width: 25%;
+$sidebar-min-width: 18rem;
+$sidebar-columns-gutter: 40px;
+
+$nav-border-radius: 0;
+$nav-background: transparent;
+$nav-color: $font-color;
+$nav-menu-color: $nav-color;
+$nav-active-color: $nav-color;
+$nav-item-selected-background: $orange;
+$nav-mobile-mode: custom;
+$nav-after-image: false;
+
+$title-font-size: $fz-h3;
+$title-transform: uppercase;
+$title-weight: 700;
+$title-background: $beige;
+$title-padding: 1.25em 1rem !default;
+$title-border-bottom: 1px solid $font-color;
+
+$carrousel-height: 32rem;
+$carrousel-text-position: middle left;
+$carrousel-navigation-bullet-color: white;
+
+$cell-border: 1px solid $font-color;
+$cell-title-cover-border: false;
+$cell-entry-color: $font-color;
+$cell-entry-border-color: $gray-dark;
+$cell-entry-hover-background: $beige;
+
+$button-background: $orange;
+$button-color: $font-color;
+$button-border-radius: $border-radius / 2;
+
+$widget-unique-checkbox-position: left;
+$widget-border: 1px solid $gray-dark;
+$widget-border-radius: 5px;
+
+$wcs-steps-small-layout-limit: $mobile-limit;
+$wcs-steps-spacing: .33rem;
+$wcs-step-color: $gray-dark;
+$wcs-step-current-color: $font-color;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-background: $orange-light;
+$wcs-step-current-marker-background: gradient-ro(-45deg);
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-tie-width: 2px;
+$wcs-step-marker-tie-color: $font-color;
+
+$form-sidebar-position: top;
+$buttons-order: previous, submit, cancel;
+
+$footer-background: $beige;
+$footer-color: $font-color;
+
+$back-top-display: mobile-only;
+
+$nav-mobile-bottom-bar-background: gradient-ro(-45deg);
diff --git a/static/clermont-ici/config.json b/static/clermont-ici/config.json
new file mode 100644
index 00000000..ad7d0f38
--- /dev/null
+++ b/static/clermont-ici/config.json
@@ -0,0 +1,37 @@
+{
+  "label": "Clermont ICI",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#FF8001",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": { "label": "Emails : logo" },
+        "footer:logo": { "label": "Pied de page: logo" },
+        "logo:clermont-ferrand": { "label" : "logo : ville" },
+        "logo:clermont-auvergne-metropole": { "label" : "logo : métropole" }
+      },
+      "COMBO_CELL_ASSET_SLOTS.update": {
+        "data_linkcell": {
+          "picture": { "prefix": "Icône" }
+        },
+        "wcs_wcsformcell": {
+          "picture": { "prefix": "Icône" }
+        }
+      },
+      "COMBO_PUBLIC_TEMPLATES.update": {
+        "sidebar-neutral": {
+          "name": "Une colonne et une barre latérale - Neutre",
+          "template": "combo/page_template_sidebar_neutral.html"
+        },
+        "neutral": {
+          "name": "Une colonne - Neutre",
+          "template": "combo/page_template_neutral.html"
+        }
+      }
+    }
+  }
+}
diff --git a/static/clermont-ici/style.scss b/static/clermont-ici/style.scss
new file mode 100644
index 00000000..cf7cc33e
--- /dev/null
+++ b/static/clermont-ici/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/montserrat';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/clermont-ici/combo/cells/btn-with-icon/form.html b/templates/variants/clermont-ici/combo/cells/btn-with-icon/form.html
new file mode 100644
index 00000000..b50a88ab
--- /dev/null
+++ b/templates/variants/clermont-ici/combo/cells/btn-with-icon/form.html
@@ -0,0 +1 @@
+{% extends "combo/cells/btn-with-icon/link-cell.html" %}
diff --git a/templates/variants/clermont-ici/combo/cells/btn-with-icon/link-cell.html b/templates/variants/clermont-ici/combo/cells/btn-with-icon/link-cell.html
new file mode 100644
index 00000000..f1ff69bb
--- /dev/null
+++ b/templates/variants/clermont-ici/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/clermont-ici/combo/cells/choix-collectivite/link-list-cell.html b/templates/variants/clermont-ici/combo/cells/choix-collectivite/link-list-cell.html
new file mode 100644
index 00000000..25e4ad92
--- /dev/null
+++ b/templates/variants/clermont-ici/combo/cells/choix-collectivite/link-list-cell.html
@@ -0,0 +1,21 @@
+{% load assets %}
+{% with portail_slug=portail_name|lower|slugify %}
+{% block cell-content %}
+<h2 class="choix-collectivite--title">
+  Vous êtes sur le portail citoyen de {{ collectivite }}
+</h2>
+<div class="cell--body">
+  <form id="choix-collectivite--form">
+    <label class="choix-collectivite--label" for="choix-collectivite--select">
+      Pour changer de collectivité
+    </label>
+    <select id="choix-collectivite--select" class="choix-collectivite--select">
+      <option value="">Sélectionnez</option>
+      {% for link in links %}
+        <option value="{{ link.url }}">{{ link.title }}</option>
+      {% endfor %}
+    </select>
+  </form>
+</div>
+{% endblock %}
+{% endwith %}
diff --git a/templates/variants/clermont-ici/combo/page_template.html b/templates/variants/clermont-ici/combo/page_template.html
new file mode 100644
index 00000000..38c84246
--- /dev/null
+++ b/templates/variants/clermont-ici/combo/page_template.html
@@ -0,0 +1,38 @@
+{% extends "combo/page_template.html" %}
+
+{% block msie_css_page_picture %}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .collectivity-header--default {
+    background-image: url("{{site_base}}{{page.picture.url}}");
+  }
+}
+{% endblock %}
+{% block content-pre %}
+<div class="community-header desktop-only">
+	{% placeholder "hero-page" name="Image de la Page" %}
+	<div class="community-header--default">
+		<img class="community-header--logo" src="{{portal_url}}assets/logo:{{ collectivite|slugify }}" alt="logo {{ collectivite }}">
+	</div>
+</div>
+{% endblock %}
+
+{% block header-title-content %}
+	<span>
+		<span class="sr-only">ICI</span>
+		{% firstof global_title site_title "Compte Citoyen" %}
+	</span>
+	<span class="site-header--community">
+		{{ collectivite }}
+	</span>
+{% endblock %}
+
+{% block menu %}
+	<h2 class="nav--title">vous êtes :</h2>
+    {{ block.super }}
+{% endblock %}
+
+{% block columns-top %}
+<div class="top-column">
+	{% placeholder "columns-top" name="Entête de la Page" %}
+</div>
+{% endblock %}
diff --git a/templates/variants/clermont-ici/combo/page_template_neutral.html b/templates/variants/clermont-ici/combo/page_template_neutral.html
new file mode 100644
index 00000000..75d33a25
--- /dev/null
+++ b/templates/variants/clermont-ici/combo/page_template_neutral.html
@@ -0,0 +1,4 @@
+{% extends "combo/page_template.html" %}
+
+
+{% block nav %}{% endblock %}
diff --git a/templates/variants/clermont-ici/combo/page_template_sidebar_neutral.html b/templates/variants/clermont-ici/combo/page_template_sidebar_neutral.html
new file mode 100644
index 00000000..1b6e0831
--- /dev/null
+++ b/templates/variants/clermont-ici/combo/page_template_sidebar_neutral.html
@@ -0,0 +1,4 @@
+{% extends "combo/page_template_sidebar.html" %}
+
+
+{% block nav %}{% endblock %}
diff --git a/templates/variants/clermont-ici/combo/wcs/tracking_code_input.html b/templates/variants/clermont-ici/combo/wcs/tracking_code_input.html
new file mode 100644
index 00000000..d5589b5e
--- /dev/null
+++ b/templates/variants/clermont-ici/combo/wcs/tracking_code_input.html
@@ -0,0 +1,9 @@
+{% extends "combo/wcs/tracking_code_input.html" %}
+{% load i18n %}
+
+{% block form-pre %}
+<p>
+Un code de suivi peut être associé à vos demandes, il vous facilite les échanges avec les services. Pour retrouver une demande disposant d’un code de suivi, indiquez ce dernier ci-dessous : 
+</p>
+{% endblock %}
+{% block form-top %}{% endblock %}
diff --git a/templates/variants/clermont-ici/includes/back-top.html b/templates/variants/clermont-ici/includes/back-top.html
new file mode 100644
index 00000000..abc3ebe9
--- /dev/null
+++ b/templates/variants/clermont-ici/includes/back-top.html
@@ -0,0 +1,5 @@
+{% extends "includes/back-top.html" %}
+
+{% block back-top-label %}
+	Haut de page
+{% endblock %}