From 70732022df66fce8eb4fc66dffa53164dcf9bf39 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Tue, 14 Jun 2022 11:15:27 +0200
Subject: [PATCH] nantes: new theme (#66170)

---
 static/nantes/_custom.scss                    | 664 ++++++++++++++++--
 static/nantes/_vars.scss                      | 167 ++++-
 static/nantes/config.json                     |  31 +-
 .../category-header/forms_of_category.html    |  18 +
 .../category-link/forms_of_category.html      |  16 +
 .../cells/forms-only/forms_of_category.html   |   3 +
 .../variants/nantes/combo/page_template.html  |  20 +
 .../nantes/combo/page_template_homepage.html  |   1 +
 8 files changed, 807 insertions(+), 113 deletions(-)
 create mode 100644 templates/variants/nantes/combo/cells/category-header/forms_of_category.html
 create mode 100644 templates/variants/nantes/combo/cells/category-link/forms_of_category.html
 create mode 100644 templates/variants/nantes/combo/cells/forms-only/forms_of_category.html
 create mode 100644 templates/variants/nantes/combo/page_template.html
 create mode 100644 templates/variants/nantes/combo/page_template_homepage.html

diff --git a/static/nantes/_custom.scss b/static/nantes/_custom.scss
index 24209548..e9c038cd 100644
--- a/static/nantes/_custom.scss
+++ b/static/nantes/_custom.scss
@@ -1,114 +1,632 @@
-h1#logo.has-logo a {
-	display: block;
-	height: 40px;
-	min-width: 200px;
+//
+//	Typo
+//
+
+@mixin orange-focus {
+	&:focus-visible {
+		outline: 1px solid $orange;
+		outline-offset: 2px;
+	}
+}
+
+html {
+	@media ($min-desktop-viewport) {
+		font-size: 112.5%;
+	}
+}
+h1, .h1 {
+	font-size: $fz-1;
+	color : $green;
+	font-weight: normal;
+	line-height: 1.2;
+}
+h2, .h2 {
+	font-size: $fz-2;
+	line-height: 1.2;
+	font-weight: bold;
+}
+h3, .h3 {
+	font-size: $fz-3;
+	line-height: 1.3;
+	font-weight: normal;
+}
+h4, .h4 {
+	font-size: $fz-4;
+	line-height: 1.3;
+	font-weight: normal;
+}
+a, .a {
+	text-decoration: underline dotted;
+	text-underline-offset: 3px;
+	&:hover, &:focus {
+		color: $blue-dark;
+		text-decoration: underline;
+	}
+	@include orange-focus;
+}
+.description, .theme-description {
+	font-size: $font-small;
+	color: $font-color;
+	padding-top: 0;
+	*:first-child {
+		margin-top: 0;
+	}
+	a:not(:hover) {
+		color: inherit;
+		text-decoration: none;
+	}
+}
+
+//
+// buttons
+//
+
+%button {
+	text-decoration: none;
+	border-radius: $button-border-radius !important;
+	&::before {
+		content: none;
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+		color: inherit;
+		font-family: "FontAwesome";
+		margin-right: .33em;
+	}
+}
+
+a.pk-inverted-button,
+div.link-cell.pk-inverted-button ul > li > a {
+	@extend %inverted-button;
+	display: inline-block;
+}
+
+%button.icon-back,
+.link-cell.icon-back ul > li > a {
+	&::before {
+		content: "\f060" !important;
+	}
+}
+
+// hexagone
+@mixin hexagon($width, $radius) {
+	$sqtr3: 1.7320508075688772;
+	border-radius: $radius;
+	height: calc(#{$width / $sqtr3} + #{$radius / 2});
+	&:before,
+	&:after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		background-color: inherit;
+		border-radius: inherit;
+		transform: rotate(60deg);
+		z-index: -1;
+	}
+	&:after {
+		transform: rotate(-60deg);
+	}
+}
+
+
+//
+//	HEADER
+//
+
+#top {
+	display: flex;
+	align-items: center;
+	min-height: $header-height;
+}
+
+h1#logo.has-logo {
+	flex-grow: 1;
+	line-height: 0;
+	margin-right: 1rem;
+	@media ($min-desktop-viewport) {
+		padding-left: 0;
+	}
+	a {
+		&:before {
+			margin-right: 0;
+			@media ($min-desktop-viewport) {
+				width: 360px;
+				height: 55px;
+			}
+		}
+	}
 }
 
 #toplinks {
-	box-sizing: content-box;
-	right: 0;
-	top: 4px;
-	font-size: 90%;
-	width: 280px;
-	max-width: 280px;
-	box-sizing: border-box;
+	position: static;
 	text-align: center;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: 90%;
-	background: #45ccb1;
-	border-radius: 20px;
-	padding: 10px;
-	box-shadow: none;
-	border: none;
+	font-size: $font-small;
+	word-spacing: 1rem;
 	a {
-		text-decoration: underline;
-		color: black;
+		vertical-align: middle;
+	}
+	.login-link,
+	.account-link {
+		display: inline-block;
+		white-space: nowrap;
+		@media ($max-mobile-viewport) {
+			max-width: 9em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		@extend %button;
+		margin-right: 0;
+		&::before {
+			content: "\f2be";
+		}
 	}
 }
 
-.site-header {
-	z-index: 100;
-	#header {
-		transition: all ease 0.2s;
-		margin-top: 3rem;
-		h1 {
-			margin-top: 0.4rem;
-			a {
-				padding-left: 1rem;
+
+//
+//	NAV
+//
+.gru-nav-wrapper {
+	@media ($max-mobile-viewport) {
+		margin-top: -$header-height;
+	}
+}
+div.gru-nav .gru-nav-button {
+	height: 80px;
+	border: 0 solid transparent;
+	border-width: #{($header-height - $nav-menu-side) / 2} 0;
+	.icon-bar {
+		height: 3px;
+	}
+	&:not(.toggled) {
+		.icon-bar-1, .icon-bar-3 {
+			width: 50%;
+			left: 25%;
+		}
+	}
+	+ ul {
+		margin: 0;
+		a {
+			font-weight: 600;
+			&:hover {
+				text-decoration: underline;
+				text-decoration-thickness: 2px;
+				text-underline-offset: 5px;
 			}
 		}
 	}
 }
 
-div#nav {
-	padding-right: 1rem;
-	z-index: 10;
-	margin-top: 0;
-	& > ul {
-		transition: all ease 0.2s;
-		margin-top: 2rem;
-		margin-bottom: 2rem;
-		li > a {
-			font-weight: normal;
+// Page image
+body.has-picture .site-nav::after {
+	position: static;;
+	margin-bottom: -3rem;
+	@media ($max-mobile-viewport) {
+		height: 125px;
+	}
+}
+
+//
+//	Main
+//
+
+main {
+	padding-left: 1em;
+	padding-right: 1em;
+}
+#columns-wrapper {
+	padding: 0;
+}
+
+// Page header
+.theme-page-header {
+	display: flow-root;
+	background-color: white;
+	border-radius: $radius-l;
+	padding: 1rem;
+	@media (max-width: $width) {
+		margin: 0 0.33rem;
+	}
+	@media ($min-desktop-viewport) {
+		padding: 3rem;
+	}
+	h1:first-child {
+		margin-top: 0;
+	}
+	.cell + .default-header {
+		display: none;
+	}
+	.page-header--description {
+		font-size: $fz-5;
+	}
+}
+
+// Home page page header
+body {
+	overflow-x: hidden;
+}
+.page-template-homepage {
+	&.has-picture .site-nav::after {
+		content: none;
+	}
+	.theme-page-header {
+		background-color: transparent;
+		padding: 0;
+		.banner.text-cell {
+			border-radius: 0;
+			background-image: $gradient;
+			padding-top: 50px;
+			padding-bottom: 50px;
+			// fill viewport
+			width: 100vw;
+			margin-left: calc(-50vw + 50%);
+			padding-left: calc(50vw - 50%);
+			padding-right: calc(50vw - 50%);
+			color: white !important;
+			@media ($min-desktop-viewport) {
+				padding-top: 100px;
+				padding-bottom: 100px;
+				position: relative;
+				> div {
+					width: 50%;
+				}
+				// Page image
+				&::after {
+					content: "";
+					background: var(--page-picture) no-repeat;
+					background-size: contain;
+					background-position: bottom left;
+					display: block;
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 50%;
+					right: 0;
+				}
+			}
+			* {
+				color: inherit;
+				margin: 0;
+				font-weight: normal;
+			}
+
+			+ .tracking-code-input-cell {
+				margin-top: -3rem;
+				@media ($min-desktop-viewport) {
+					margin-top: -4rem;
+					max-width: 60%;
+					position: relative;
+				}
+			}
+		}
+	}
+}
+
+//
+//	Cells
+//
+
+.column div.a2-block,
+.gru-content div.cell,
+.block {
+	margin-bottom: 1.5rem;
+	& h2 + div,
+	.cell--body {
+		padding-top: 0;
+	}
+	&.has-asset-picture picture {
+		padding-left: $title-padding;
+		display: block;
+		img {
+			width: 48px;
+			height: 48px;
+			padding: 8px;
+		}
+	}
+	&.foldable {
+		h2:first-child {
+			&:hover {
+				color: $blue-dark;
+			}
 		}
 	}
 }
 
-div#main-content-wrapper {
-	padding-top: 2rem;
+%cell-links-list {
+	& > li {
+		> a {
+			@extend .a;
+		}
+	}
+	li div.description {
+		padding: 0;
+		@extend .theme-description;
+		padding-bottom: 0.5rem;
+
+	}
 }
 
-body.has-picture {
-	div#main-content-wrapper {
-		padding-top: 1rem;
+.bordered-cell {
+	.gru-content &.cell {
+		border: $cell-entry-border;
+		h2:first-child {
+			@extend .h4;
+			font-weight: bold;
+		}
+		.links-list ul li a {
+			.form-number, .form-status {
+				color: $font-color;
+				text-decoration: none;
+			}
+			&:hover {
+				background-color: $gray-light;
+			}
+
+		}
 	}
 }
 
+// For tracking code cells
+.violet-cell {
+		background-color: $violet-xlight;
+		background-image:
+			repeating-linear-gradient(
+				-45deg,
+				$violet-light,
+				$violet-light 4px,
+				$violet 4px,
+				$violet 8px
+			)
+		;
+		background-repeat: no-repeat;
+		background-size: 5px 100%;
+		h2:first-child, h3 {
+			color: $violet
+		}
+}
 
-#logo a {
-	color: $primary-color;
-	font-weight: normal;
+// Custom text-cell
+.green-cell {
+	.gru-content &.text-cell {
+		background-color: $green-light;
+		border-radius: $radius-l;
+		padding: 1rem;
+		padding-bottom: 2rem;
+	}
+}
+.gray-cell {
+	.gru-content &.text-cell {
+		@extend .green-cell;
+		background-color: $gray-xlight;
+	}
+}
+.true-title {
+	.gru-content &.text-cell {
+		h2:first-child {
+			font-size: $fz-2;
+			font-weight: bold;
+		}
+	}
+}
+
+
+.tracking-code-input-cell {
+	.gru-content &.cell {
+		@extend .violet-cell;
+	}
 }
 
-@media screen and ($max-mobile-viewport) {
-	.site-header #header h1 a {
-		margin-top: 1em;
+// Custom forms-of-category cells
+.category-link {
+	.gru-content &.wcs-forms-of-category-cell {
+		border-top: $cell-entry-border;
+		.cell--title {
+			@extend %title;
+			@extend .a;
+			font-size: 1rem;
+
+		}
+		picture + .cell--title {
+			padding-top: 0;
+		}
 	}
-	div#nav, header.site-header {
-		padding-right: 0;
-		border-bottom: 0;
-		#header h1 a {
-			padding-left: 0;
+}
+.forms-only-2-cols {
+	.gru-content &.wcs-forms-of-category-cell {
+		.links-list ul {
+			@extend .fx-grid;
+			> li {
+				border-top: $cell-entry-border;
+				border-bottom: none;
+				@media ($min-grid-tablet-viewport) {
+					flex-basis: calc( 50% - #{$fx-grid-gutter});
+				}
+			}
 		}
 	}
+}
+.category-header {
+	.gru-content &.wcs-forms-of-category-cell {
+		.cell--title {
+			display: flex;
+			picture {
+				flex: 0 0 1em;
+				height: 1em;
 
-	div.site-nav > ul {
-		margin-top: 2rem;
-		margin-bottom: 1rem;
+				padding-left: 0;
+				margin-right: .33em;
+				align-self: center;
+				img {
+					width: 100%;
+					height: 100%;
+					padding: 0;
+					filter: hue-rotate(340deg) brightness(120%);
+				}
+			}
+		}
 	}
+}
+
+// menu-cell
+.menu-cell {
+	.gru-content & {
+		.links-list ul {
+			> li {
+				border: none;
+				> a {
+					&:not(:hover) {
+						color: $font-color;
+						text-decoration: none;
+					}
+				}
+
+				&.selected > a {
+					color: white;
+					background-color: $blue;
+					display: flex;
+					border-radius: $radius-s;
+					span {
+						text-decoration: underline 2px;
+					}
+					&::after {
+						content: "\f061"; // arrow right
+						font-family: fontawesome;
+						flex-grow: 1;
+						text-align: right;
+					}
+				}
+			}
+		}
+	}
+}
+
+
+//
+//	WCS
+//
+
+.wcs-page {
+	.theme-page-header {
+		display: none;
 
-	#toplinks {
-		right: 0;
-		left: 0;
-		top: -3rem;
-		width: 100%;
-		max-width: none;
-		border-radius: 0;
+	}
+	.form-content--sidebox .tracking-code-part,
+	.form-content--body #tracking-code {
+		@extend .violet-cell;
+	}
+	.form-content--body #tracking-code {
+		padding: 1em;
 	}
 }
 
-div.textcell {
-	h1 {
-		padding-left: 0.7rem;
+.form-content--title {
+	@extend .h1;
+	padding-left: 0;
+}
+
+div#rub_service {
+	h3 {
+		font-weight: bold;
+	}
+	.section.foldable h2:first-child {
+		padding-left: 0;
+		@extend .h2;
+		&:hover {
+			color: $blue;
+			text-decoration: underline;
+		}
+	}
+}
+
+label {
+	font-weight: 600;
+}
+
+.widget .error {
+	font-weight: normal;
+	color: $red-dark;
+}
+
+
+// steps
+.wcs-step {
+	margin-bottom: $wcs-steps-spacing * 2;
+	&.current {
 		font-weight: normal;
 	}
+	&.step-before {
+		color: $blue;
+	}
+	&.step-before &--marker {
+		color: white;
+		background-color: $blue;
+	}
 }
+@media ($mq-max--wcs-steps-small-layout) {
+	.wcs-step.current .wcs-step--marker{
+		background-color: white;
+		color: $blue-dark;
+		width: auto;
+		&-nb {
+			display: inline-block;
+			background-color: $blue-dark;
+			color: white;
+			width: 2em;
+			@include hexagon(2em, 5px);
+		}
+	}
+}
+@media ($mq-min--wcs-steps-horizontal-layout) {
+	.wcs-steps {
+		font-size: 1em;
+	}
+	.wcs-step {
+		&--marker {
+			@include hexagon($wcs-step-marker-size, 5px);
+			.step-after & {
+				filter: drop-shadow(0 0 2px #333);
+			}
+			&-nb {
+				line-height: 0;
+			}
+		}
+	}
+	.wcs-step--label {
+		font-size: 1em;
+	}
+}
+@include desktop-vertical-steps() {
+	.wcs-steps {
+		margin-top: 2rem;
+	}
+}
+
+
+//
+//	FOOTER
+//
 
 #footer-wrapper {
-	background-image: linear-gradient(45deg, #087FA3 20%, #20A791 100%);
-}
+	background-image: $gradient-reverse;
+	padding-top: 2.5rem;
+	padding-botom: 2.5rem;
 
-.form-content--title {
-	font-size: 180%;
+	%cell-links-list {
+		> li {
+			border: none;
+		}
+		> li > a {
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	}
+}
+.back-top--link:not(:hover) {
+	text-decoration: none;
 }
diff --git a/static/nantes/_vars.scss b/static/nantes/_vars.scss
index 04880ac9..24ce0cfb 100644
--- a/static/nantes/_vars.scss
+++ b/static/nantes/_vars.scss
@@ -1,55 +1,139 @@
-$primary-color:#087FA3;
-$nav-active-color: $primary-color;
-$nav-item-selected-mode: bottom-border;
-$sidebar-width: 33%;
+// colors
+$blue: #087FA3;
+$blue-dark: #055A81;
+$blue-light: #E4F4FB;
+
+$green: #20A791;
+$green-light: #E0F6EE;
+$green-dark: #167E6A;
+$green-xdark: #0F5B4C;
+
+$orange: #E17120;
+
+$violet: #6D29B1;
+$violet-light: #ba9cd9;
+$violet-xlight: #efeaf4;
+
+$gray: #D4D1CE;
+$gray-light: #EFEDEB;
+$gray-xlight: #F6F5F4;
+$gray-dark: #949494;
+$gray-xdark: #707070;
+
+$red-dark: #A61010;
+
+$gradient: linear-gradient(
+	45deg,
+	$green,
+	$blue-dark
+);
+$gradient-reverse: linear-gradient(
+	225deg,
+	$green,
+	$blue-dark
+);
+
+// typo
+$title-ratio: 1.2;
+$fz-5: $title-ratio*1em;
+$fz-4: $fz-5*$title-ratio;
+$fz-3: $fz-4*$title-ratio;
+$fz-2: $fz-3*$title-ratio;
+$fz-1: $fz-2*$title-ratio;
+
+$font-small: 0.875em;
+
+// border radius
+$radius-s: 0.2rem;
+$radius-l: 1rem;
+
+// Layout
+$header-height: 80px;
+
+// Core vars
+$primary-color: $blue;
+
+$font-color: black;
 $font-family: "Source sans pro", Ubuntu, Cantarell, Noto Sans, sans-serif;
-$font-color: #000000;
-$font-size: 100%;
 $link-color: $primary-color;
-$footer-color: white;
-$footer-link-color: #FFFFFF;
+
 $width: 1280px;
-$border-radius: 1rem;
-$grid-gutter: 2rem;
 $columns-gutter: 2rem;
+$grid-gutter: 2rem;
+$sidebar-width: 33%;
 $sidebar-min-width: 300px;
-$footer-background: #087fa3;
+
+$header-logo-size: 137px 30px;
+$toplinks-style: none;
+
+$nav-border-color: none;
+$nav-background: black;
+$nav-full-width-background: true;
+$nav-color: white;
+$nav-border-radius: 0;
+$nav-item-selected-background: $gray-xdark;
+$nav-item-hover-background: $nav-background;
+$nav-submenu-color: $nav-color;
+
+$nav-button-background: transparent;
+$nav-button-color: black;
+$nav-menu-side: 35px;
+$nav-mobile-menu-background: $nav-background;
+$nav-mobile-menu-item-hover-background: $nav-item-selected-background;
+$nav-mobile-menu-item-color: $nav-color;
+
+$nav-after-image-height: 200px;
+
 $title-border-radius: 0;
-$title-font-size: $font-size * 1.2;
-$title-padding: 1em 0 .75em 1rem;
-$title-border-top: 2px solid;
+$title-font-size: $fz-3;
+$title-padding: 1rem;
 $title-background: transparent;
-$title-weight: bold;
+$title-weight: normal;
+
+$cell-border-radius: $radius-s;
+$cell-image-padding: 0;
+$cell-border: none;
+$cell-background: transparent;
+
+$cell-entry-color: $link-color;
+$cell-entry-hover-background: transparent;
+$cell-entry-border-color: $gray;
+
 $form-sidebar-width: 25%;
+$form-sidebar-gutter: $columns-gutter;
+
+$button-color: white;
 $button-hover-background: #055A81;
 $button-background: $link-color;
-$widget-background: #F6F5F4;
-$button-color: #FFFFFF;
-$widget-focus-background: #FFFFFF;
-$widget-border-radius: $border-radius;
-$form-sidebar-gutter: $columns-gutter;
-$widget-focus-border: 1px solid #087FA3;
-$widget-focus-box-shadow: inset 0 0 0 1px #087FA3;
-$nav-active-color: #087FA3;
-$nav-submenu-color: $font-color;
-$nav-after-image-height: 250px;
-$nav-border-radius: 0;
 $button-border: none;
+$button-border-radius: $radius-l;
+$cancel-button-style: '%inverted-button';
+$buttons-order: cancel (grow), previous, submit;
+
+$form-accent-color: $primary-color;
+$widget-unique-checkbox-position: left;
+$widget-background: white;
+$widget-border-radius: $radius-l;
+$widget-border: 1px solid $gray;
+$widget-focus-border: 1px solid $blue;
+$widget-focus-box-shadow: inset 0 0 0 1px $blue;
+$widget-focus-outline: 2px solid $blue-light;
+$widget-focus-outline-offset: 1px;
+
 $wcs-step-current-color: $link-color;
 $wcs-step-marker-type: disc;
-$widget-border:1px solid #d2d2d2;
-$widget-custom-radio-checkbox: 1;
-$widget-unique-checkbox-position: left;
+
+$wcs-steps-spacing: 1rem;
+$wcs-step-color: $gray-dark;
 $wcs-step-border-bottom: none;
-$wcs-step-current-border-bottom: none;
-$wcs-step-marker-background: transparent;
-$wcs-step-current-marker-background: transparent;
-$cell-border-radius: 0;
-$cell-image-padding: 0;
-$cell-entry-color: #055A81;
-$cell-border: none;
-$cell-background: transparent;
-$table-headers-color: #000000;
+$wcs-step-marker-size: 1.8em;
+$wcs-step-marker-background: white;
+$wcs-step-current-marker-color: white;
+$wcs-step-current-marker-background: $blue-dark;
+$wcs-step-marker-type: square tied;
+$wcs-step-marker-tie-width: 2px;
+
+$table-headers-color: black;
 $table-headers-background: #E4F3F9;
 $table-caption-color: $font-color;
 $table-headers-font-family: $font-family;
@@ -57,4 +141,11 @@ $table-headers-font-size: 1rem;
 $table-headers-font-weight: bold;
 $table-headers-text-transform: none;
 $table-headers-font-style: normal;
+
+$footer-color: white;
+$footer-link-color: white;
+$footer-background: #087fa3;
+
 $back-top-display: block;
+$back-top-icon-character: "\f062";
+$back-top-icon-size: 1em;
diff --git a/static/nantes/config.json b/static/nantes/config.json
index 53f1d3f1..0d7ca588 100644
--- a/static/nantes/config.json
+++ b/static/nantes/config.json
@@ -1,12 +1,39 @@
 {
   "label": "Nantes",
   "variables": {
-    "theme_color": "#087FA3"
+    "theme_color": "#087FA3",
+    "email_header_asset": "emails:logo"
   },
   "settings": {
     "combo": {
       "COMBO_ASSET_SLOTS.update": {
-        "header:logo": { "label": "Têtière : logo" }
+        "header:logo": {"label": "Têtière : logo"},
+        "emails:logo": {"label": "Emails : logo"}
+      },
+      "COMBO_PUBLIC_TEMPLATES.update": {
+        "category_detail": {
+          "name": "Catégorie",
+          "template": "combo/page_category.html"
+        }
+      },
+      "COMBO_CELL_TEMPLATES.update" : {
+        "wcs_wcsformsofcategorycell" : {
+          "category-link" : {
+            "extra-css-classes" : "category-link",
+            "label" : "Lien catégorie",
+            "template" : "combo/cells/category-link/forms_of_category.html"
+          },
+          "category-header" : {
+            "extra-css-classes" : "category-header",
+            "label" : "Entête catégorie",
+            "template" : "combo/cells/category-header/forms_of_category.html"
+          },
+          "forms-only" : {
+            "extra-css-classes" : "forms-only-2-cols",
+            "label" : "Démarches uniquement, 2 colonnes",
+            "template" : "combo/cells/forms-only/forms_of_category.html"
+          }
+        }
       }
     }
   }
diff --git a/templates/variants/nantes/combo/cells/category-header/forms_of_category.html b/templates/variants/nantes/combo/cells/category-header/forms_of_category.html
new file mode 100644
index 00000000..9e4776d2
--- /dev/null
+++ b/templates/variants/nantes/combo/cells/category-header/forms_of_category.html
@@ -0,0 +1,18 @@
+{% load assets %}
+{% get_asset cell=cell type='picture' as asset %}
+
+{% block cell-content %}
+{% if forms or combo_display_even_empty_categories %}
+{% block cell-header %}
+	<h1 class="cell--title">
+		{% include "combo/asset_picture_fragment.html" %}
+		{{ title }}
+	</h1>
+	{% if description %}
+	<div class="description page-header--description">
+		{{ description|safe }}
+	</div>
+	{% endif %}
+{% endblock %}
+{% endif %}
+{% endblock %}
diff --git a/templates/variants/nantes/combo/cells/category-link/forms_of_category.html b/templates/variants/nantes/combo/cells/category-link/forms_of_category.html
new file mode 100644
index 00000000..e66b97c1
--- /dev/null
+++ b/templates/variants/nantes/combo/cells/category-link/forms_of_category.html
@@ -0,0 +1,16 @@
+{% load assets i18n %}
+{% block cell-content %}
+{% if forms or combo_display_even_empty_categories %}
+{% block cell-header %}
+	{% include "combo/asset_picture_fragment.html" %}
+	<h3 class="cell--title">
+	<a href="{{ portal_url }}{{ category_path }}{{ slug }}">{{ title }}</a>
+	</h3>
+	{% if description %}
+	<div class="cell--body description">
+	{{ description|safe }}
+	</div>
+{% endif %}
+{% endblock %}
+{% endif %}
+{% endblock %}
diff --git a/templates/variants/nantes/combo/cells/forms-only/forms_of_category.html b/templates/variants/nantes/combo/cells/forms-only/forms_of_category.html
new file mode 100644
index 00000000..bf233ba7
--- /dev/null
+++ b/templates/variants/nantes/combo/cells/forms-only/forms_of_category.html
@@ -0,0 +1,3 @@
+{% extends "combo/wcs/forms_of_category.html" %}
+
+{% block cell-header %}{% endblock %}
diff --git a/templates/variants/nantes/combo/page_template.html b/templates/variants/nantes/combo/page_template.html
new file mode 100644
index 00000000..d6768873
--- /dev/null
+++ b/templates/variants/nantes/combo/page_template.html
@@ -0,0 +1,20 @@
+{% extends "combo/page_template.html" %}
+{% load combo %}
+
+{% block content-pre %}
+	<header class="theme-page-header gru-content">
+	    {% placeholder "page_header" name="Entête de la page" optional=False acquired=False %}
+		<div class="default-header">
+			{% block default_page_header_content %}
+				<h1>
+					{{ page.title }}
+				</h1>
+				{% if page.description %}
+				<div class="description page-header--description">
+					<p>{{ page.description }}</p>
+				</div>
+				{% endif %}
+			{% endblock %}
+		</div>
+	</header>
+{% endblock %}
diff --git a/templates/variants/nantes/combo/page_template_homepage.html b/templates/variants/nantes/combo/page_template_homepage.html
new file mode 100644
index 00000000..bf87c42c
--- /dev/null
+++ b/templates/variants/nantes/combo/page_template_homepage.html
@@ -0,0 +1 @@
+{% extends "combo/page_template.html" %}
-- 
2.30.2

