From d7675a3810ee89b6ad12bde62c143f59ebe27b51 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 18 Nov 2020 14:21:33 +0100
Subject: [PATCH] new theme: isere-cd38 (#48886)

---
 static/isere-cd38/_custom.scss                | 554 ++++++++++++++++++
 static/isere-cd38/_vars.scss                  |  76 +++
 static/isere-cd38/config.json                 |  22 +
 static/isere-cd38/crossmenu.json              |   1 +
 static/isere-cd38/extra.js                    | 475 +++++++++++++++
 static/isere-cd38/style.scss                  |   7 +
 .../isere-cd38/combo/cells/a-la-une/form.html |   6 +
 .../isere-cd38/combo/page_template.html       |  12 +
 .../combo/page_template_homepage.html         |  32 +
 9 files changed, 1185 insertions(+)
 create mode 100644 static/isere-cd38/_custom.scss
 create mode 100644 static/isere-cd38/_vars.scss
 create mode 100644 static/isere-cd38/config.json
 create mode 100644 static/isere-cd38/crossmenu.json
 create mode 100644 static/isere-cd38/extra.js
 create mode 100644 static/isere-cd38/style.scss
 create mode 100644 templates/variants/isere-cd38/combo/cells/a-la-une/form.html
 create mode 100644 templates/variants/isere-cd38/combo/page_template.html
 create mode 100644 templates/variants/isere-cd38/combo/page_template_homepage.html

diff --git a/static/isere-cd38/_custom.scss b/static/isere-cd38/_custom.scss
new file mode 100644
index 00000000..a76c68e2
--- /dev/null
+++ b/static/isere-cd38/_custom.scss
@@ -0,0 +1,554 @@
+//
+// Typo
+//
+
+html {
+	@media ($min-desktop-viewport) {
+		font-size: 1.125em;
+	}
+}
+h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
+	font-family: $raleway;
+	font-weight: bold;
+}
+h1, .h1 { font-size: $fz-h1; }
+h2, .h2 { font-size: $fz-h2; }
+h3, .h3 { font-size: $fz-h3; }
+h4, .h4 { font-size: $fz-h4; }
+
+
+.section-title {
+	font-size: $fz-h2;
+	font-family: $raleway;
+	text-transform: uppercase;
+	color: $cyan-dark;
+	background: transparent;
+	padding: 0;
+	margin-top: 0;
+	@media ($max-mobile-viewport) {
+		font-weight: normal;
+		font-size: $fz-h4;
+	}
+}
+
+.underlined-title {
+	text-transform: none;
+	font-family: $raleway;
+	font-size: $fz-h2;
+	color: $cyan-dark;
+	padding: 0;
+	background: transparent;
+	border-bottom: 2px solid $cyan-dark;
+	padding-bottom: .33em;
+}
+
+.h2-txt {
+	@extend .underlined-title;
+	margin-bottom: 0.75em !important;
+	@media (max-width: $very-small-limit) {
+		font-size: $fz-h3;
+		font-weight: normal;
+	}
+}
+.h3-txt {
+	color: $cyan-dark;
+	border-bottom: none !important;
+	@media (max-width: $very-small-limit) {
+		font-weight: normal;
+	}
+}
+
+//
+//	Forms
+//
+%button {
+	transition: all 0.2s ease;
+	&:hover {
+		transform: scale(1.01);
+	}
+}
+%cancel-button {
+	background-color: $gray-dark;
+	&:hover {
+		background-color: $gray-dark;
+	}
+}
+
+// notifications
+@mixin custom-notif($color, $symbol, $bgcolor) {
+	background: linear-gradient(to right,
+		$color 3rem,
+		$bgcolor 3.01em
+	);
+	color: black;
+	&::before {
+		display: block;
+		width: 3rem;
+		left: 0;
+		text-align: center;
+		content: $symbol;
+		color: white;
+		font-size: $fz-h2;
+		font-family: $raleway;
+		font-weight: 700;
+	}
+}
+
+#messages li.error,
+.errornotice,
+.pk-error {
+	@include custom-notif(
+		$notification_error_color,
+		"X",
+		adjust-color($notification_error_color, $lightness: 52%, $saturation: -60%)
+	);
+}
+
+#messages li.warning,
+.warningnotice,
+.pk-attention {
+	@include custom-notif(
+		$notification_warning_color,
+		"!",
+		adjust-color($notification_warning_color, $lightness: 35%, $saturation: -20%)
+	);
+}
+
+#messages li.success,
+.successnotice
+#messages li.info,
+.infonotice,
+.pk-information {
+	@include custom-notif(
+		$notification_info_color,
+		"i",
+		adjust-color($notification_info_color, $lightness: 60%, $saturation: -20%)
+	);
+}
+
+//
+// LAYOUT
+//
+// sidebar <-> columns gutter
+@media ($min-desktop-viewport) {
+	.gru-content {
+		#sidebar {
+			div.cell {
+				@if $sidebar-position == left {
+					margin-right: $sidebar-columns-gutter;
+				} @else {
+					margin-left: $sidebar-columns-gutter;
+				}
+			}
+		}
+	}
+}
+// 3cols layout
+.theme-3cols-layout {
+	@media ($min-desktop-viewport) {
+		display: flex;
+		margin-left: -#{$columns-gutter / 2};
+		margin-right: -#{$columns-gutter / 2};
+		> div {
+			flex: 1 1 0;
+			> .cell {
+				margin-left: #{$columns-gutter / 2} !important;
+				margin-right: #{$columns-gutter / 2} !important;
+			}
+		}
+	}
+	@media ($max-mobile-viewport) {
+		#center div.cell {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+}
+// homepage
+.page-template-homepage {
+	#content {
+		flex-wrap: wrap;
+		#columns-wrapper {
+			flex: 1 0 calc(100% - #{$sidebar-max-width});
+		}
+		.toutes-demarches {
+			flex: 0 0 100%;
+			order: 2;
+			@media ($max-mobile-viewport) {
+				padding-left: 1rem;
+				padding-right: 1rem;
+			}
+		}
+	}
+}
+
+
+//
+// HEADER
+//
+div#header {
+	padding: 0;
+	padding-left: 100px; // isère widget width;
+	padding-right: $nav-menu-side + 0.5rem;
+	@media (min-width: $nav-mobile-limit + 0.001) {
+		padding-right: $yellow-border-mobile;
+	}
+	@media ($min-desktop-viewport) {
+		padding-left: #{$yellow-border-desktop + $main-padding-desktop};
+		padding-right: $yellow-border-desktop;
+	}
+}
+#top {
+	display: flex;
+	height: $header-height-mobile;
+	@media (min-width: $nav-mobile-limit + 0.001) {
+		height: $header-height-desktop;
+	}
+}
+h1#logo.has-logo {
+	flex-grow: 1;
+	padding: 0;
+	background: none;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+
+	a {
+		display: block;
+		height: 100%;
+		min-width: 80px;
+		margin-right: 1rem;
+	}
+}
+// user links
+#toplinks {
+	position: static;
+	border-radius: 0;
+	box-shadow: none;
+	border: none;
+	padding: 0;
+	font-family: $raleway;
+	font-size: $fz-small;
+	font-weight: bold;
+	align-self: center;
+	a {
+		display: block;
+	}
+	@media (min-width: $nav-mobile-limit + 0.001) {
+		align-self: flex-start;
+		background-color: $gold;
+		padding: 0 1em;
+		font-size: 1rem;
+		line-height: 2em;
+		a {
+			display: inline;
+			color: black;
+		}
+	}
+}
+
+
+//
+// NAV
+//
+#nav {
+	margin-top: 0;
+	@media (min-width: $nav-mobile-limit + 0.001) {
+		padding: 3px #{$yellow-border-mobile + $main-padding-mobile};
+	}
+	@media ($min-desktop-viewport) {
+		padding: 3px #{$yellow-border-desktop + $main-padding-desktop};
+	}
+}
+#nav-button .icon-bar {
+	border-width: 2px;
+}
+.gru-nav > ul {
+	margin: 0;
+	font-size: $fz-h4;
+}
+// Nav mobile (hamburger in right)
+@media (max-width: $nav-mobile-limit) {
+	div.gru-nav-wrapper {
+		margin-top: 0;
+	}
+	div.gru-nav {
+		position: relative;
+		.gru-nav-button {
+			margin-left: 0;
+			// align button to toplinks
+			position: absolute;
+			top: calc(
+				( (#{$header-height-mobile} - #{$nav-menu-side})
+					/ 2 + #{$nav-menu-side}
+				) * -1
+			) ;
+			right: 0;
+		}
+		ul li a {
+			padding: 1rem !important;
+			text-align: center;
+		}
+	}
+}
+
+//
+// Page picture
+//
+body.has-picture nav::after {
+	@extend .h1;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	top: 0;
+	padding: $yellow-border-desktop + $main-padding-desktop;
+	white-space: pre-wrap;
+
+    @media (max-width: $nav-mobile-limit) {
+      content: none !important;
+    }
+}
+
+
+//
+// MAIN
+//
+main {
+	background-color: $gold;
+}
+div#main-content-wrapper {
+	background-color: white;
+	border: solid $gold;
+	border-width: 0 $yellow-border-mobile;
+	@media ($min-desktop-viewport) {
+		border-width: 0 $yellow-border-desktop;
+		padding: 3rem;
+	}
+}
+// Sidebar
+.gru-content #sidebar {
+	@media ($max-mobile-viewport) {
+		order: 0;
+		background-color: $gray-light;
+		margin-left: -#{$yellow-border-mobile};
+		margin-right: -#{$yellow-border-mobile};
+		max-width: none;
+		padding: #{$yellow-border-mobile + $main-padding-mobile};
+	}
+}
+// columns
+#columns-wrapper {
+	@media ($max-mobile-viewport) {
+		padding: $main-padding-mobile;
+	}
+}
+
+//
+// CELLS
+//
+// sidebar cells
+#sidebar {
+	div.cell {
+		border: none;
+		h2:first-child {
+			@extend .section-title;
+			& ~ * {
+				padding: 0;
+			}
+		}
+	}
+}
+// columns cells
+.gru-content .cell {
+	&.wcs-forms-of-category-cell, &.link-list-cell {
+		// cell picture to left of title
+		&.has-asset-picture {
+			$image-width: 3rem;
+			> div {
+				display: flex;
+				flex-wrap: wrap;
+				position: relative;
+				> h2:first-child {
+					flex: 1 0 calc(100% - #{$image-width});
+					margin-left: -#{$image-width};
+					padding-left: calc(#{$image-width} + .5rem);
+					+ picture {
+						display: block;
+						order: -1;
+						flex: 0 0 auto;
+						align-self: center;
+						z-index: 1;
+						img {
+							width: $image-width;
+						}
+						~ * {
+							flex: 0 0 100%;
+						}
+					}
+				}
+			}
+		}
+	}
+	&.foldable {
+		> div > h2:first-child {
+			&::after {
+				content: "\f068";	// minus
+				font-weight: normal;
+				font-size: .6em;
+				background-color: white;
+				color: $cyan-dark;
+				border-radius: 50%;
+				width: 1em;
+				height: 1em;
+				line-height: 1em;
+				text-align: center;
+				box-sizing: content-box;
+				padding: 0.3em;
+				bottom: 0;
+				top: 0;
+				margin-top: auto;
+				margin-bottom: auto;
+			}
+		}
+		&.folded > div > h2:first-child {
+			&::after {
+				content: "\f067";  // plus
+			}
+		}
+	}
+	// Text cell
+	&.text-cell {
+		border: none;
+		> div > h2:first-child {
+			@extend .h2-txt;
+			margin: 0.7rem 1rem;
+		}
+		h2 {
+			@extend .h2-txt;
+			margin: 0.7rem 1rem;
+		}
+		h3 {
+			@extend .h3-txt;
+		}
+	}
+
+}
+// "A la une" form cell
+.cell.a-la-une.wcs-form-cell {
+	border: none;
+	> div {
+		@media ($max-mobile-viewport) {
+			display: flex;
+		}
+		picture {
+			@media ($max-mobile-viewport) {
+				flex: 0 0 50%;
+				max-width: 250px;
+				display: flex;
+			}
+			@media ($min-desktop-viewport) {
+				display: block;
+			}
+			img {
+				width: 100%;
+				max-height: 200px;
+				object-fit: cover;
+			}
+		}
+		[class^="wcs-form-"] {
+			flex: 1 1 auto;
+			display: flex;
+			a {
+				width: 100%;
+				padding: 1rem;
+				&:hover {
+					background-color: $cyan-xlight;
+					color: black
+				}
+				@media ($max-mobile-viewport) {
+					display: flex;
+					align-items: center;
+				}
+				@media ($min-desktop-viewport) {
+					text-align: center;
+				}
+			}
+		}
+	}
+}
+
+//
+// WCS
+//
+.wcs-steps {
+	@media ($max-mobile-viewport) {
+		border: 1px solid $cyan-dark;
+		padding: $wcs-steps-spacing;
+	}
+}
+div#rub_service {
+	h2 {
+		@extend .h2-txt;
+		@media ($min-desktop-viewport) {
+			margin-left: 0.5rem;
+			margin-right: 0.5rem;
+		}
+	}
+	h3 {
+		@extend .h3-txt;
+	}
+	form.quixote {
+		@media ($max-mobile-viewport) {
+			padding: 0;
+		}
+	}
+	.buttons {
+		.SubmitWidget {
+			flex-grow: 1;
+			max-width: 12.5em;
+			&:not(:first-child) {
+				padding-left: 1.5rem;
+			}
+			@media (max-width: $very-small-limit) {
+				flex: 1 1 50%;
+				max-width: none;
+				&.previous-button {
+					padding-left: 0;
+				}
+			}
+			> .content, button {
+				display: block;
+				width: 100%;
+				margin: 0;
+			}
+		}
+		.submit-button {
+			flex-grow: 2;
+			max-width: 25em;
+			@media (max-width: $very-small-limit) {
+				flex: 1 1 100%;
+				max-width: none;
+			}
+		}
+	}
+}
+
+
+
+//
+// FOOTER
+//
+#footer-wrapper {
+	margin-top: 0;
+}
+
+
+//
+// Isere Widget
+//
+.isereMegaMenu {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
\ No newline at end of file
diff --git a/static/isere-cd38/_vars.scss b/static/isere-cd38/_vars.scss
new file mode 100644
index 00000000..e05e9da1
--- /dev/null
+++ b/static/isere-cd38/_vars.scss
@@ -0,0 +1,76 @@
+// Colors
+$gold: #FECE15;
+$cyan-dark: hsl(184,43%,26%);
+$cyan-xlight: hsl(184,15%,90%);
+$gray-light: #F5F5F5;
+$gray-dark: #4D4D4D;
+
+// fonts
+$raleway: raleway, sans-serif;
+$source-sans: 'Source Sans Pro', sans-serif;
+$fz-h1: 2.75em;
+$fz-h2: 1.8em;
+$fz-h3: 1.3em;
+$fz-h4: 1.2em;
+$fz-small: 0.875em;
+
+// layout
+$header-height-desktop: 7.5rem;
+$header-height-mobile: 4.3rem;
+$yellow-border-desktop: 4.5rem;
+$yellow-border-mobile: 1rem;
+$main-padding-desktop: 3rem;
+$main-padding-mobile: 1rem;
+$sidebar-columns-gutter: $main-padding-desktop;
+
+// Core vars
+$primary-color: $cyan-dark;
+$link-color: $cyan-dark;
+
+$width: 1920px;
+$mobile-limit: 70em;
+$nav-mobile-limit: 50em;
+$very-small-limit: 560px;
+$font-family: $source-sans;
+$sidebar-position: right;
+$sidebar-max-width: 400px;
+$sidebar-width: 26%;
+$sidebar-min-width: 290px;
+
+$nav-background: $cyan-dark;
+$nav-full-width-background: true;
+$nav-color: white;
+$nav-active-color: white;
+$nav-item-selected-color: $cyan-dark;
+$nav-menu-side: 3rem;
+$nav-button-background: transparent;
+$nav-button-color: $gray-dark;
+$nav-mobile-menu-background: white;
+$nav-mobile-menu-item-color: $cyan-dark;
+$nav-mobile-menu-item-hover-background: $cyan-dark;
+$nav-mobile-menu-item-hover-color: white;
+
+$title-font-size: $fz-h3;
+$title-background: $cyan-dark;
+$title-color: white;
+$title-font-style: $raleway;
+$title-weight: bold;
+$title-transform: uppercase;
+
+$cell-border: 1px solid $cyan-dark;
+$cell-title-cover-border: false;
+$cell-background: transparent;
+$cell-entry-color: $gray-dark;
+$cell-entry-hover-color: black;
+$cell-entry-border-color: $cyan-dark;
+$cell-entry-hover-background: $cyan-xlight;
+
+$button-background: $cyan-dark;
+$buttons-order: submit, previous, cancel;
+
+$notification_error_color: #D40000;
+$notification_warning_color: #F9C92F;
+$notification_success_color: $cyan-dark;
+$notification_info_color: $cyan-dark;
+
+$footer-background: $cyan-dark;
\ No newline at end of file
diff --git a/static/isere-cd38/config.json b/static/isere-cd38/config.json
new file mode 100644
index 00000000..574edf49
--- /dev/null
+++ b/static/isere-cd38/config.json
@@ -0,0 +1,22 @@
+{
+  "label": "Isère (CD38)",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#FECE15",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": {"label": "Têtière : logo" },
+        "footer:logo": {"label": "Pied de page : logo"},
+        "emails:logo": {"label": "Emails : logo"}
+      },
+      "COMBO_CELL_ASSET_SLOTS.update": {
+        "wcs_wcsformcell": {
+          "picture": {"prefix": "Image"}
+        }
+      }
+    }
+  }
+}
diff --git a/static/isere-cd38/crossmenu.json b/static/isere-cd38/crossmenu.json
new file mode 100644
index 00000000..ef1bdac1
--- /dev/null
+++ b/static/isere-cd38/crossmenu.json
@@ -0,0 +1 @@
+{"data":{"title":"Les sites du d\u00e9partement","account":{"title":"Mon compte","link":"https:\/\/www.isere.fr\/espace-perso"},"menu":[{"title":"Le D\u00e9partement","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoDepartement_0.png","sub":[{"title":"isere.fr","path":"https:\/\/www.isere.fr","description":null},{"title":"Is\u00e8re Mag","path":"https:\/\/iseremag.fr\/","description":null},{"title":"Erecrute","path":"https:\/\/erecrute.cg38.fr\/,DanaInfo=erecrute-juniper.cg38.local,SSO=U+","description":null},{"title":"March\u00e9s publics","path":"https:\/\/www.isere.fr\/marches-publics","description":null},{"title":"Cartographies","path":"https:\/\/www.isere.fr\/cartographie","description":null}]},{"title":"Solidarit\u00e9 - Sant\u00e9","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoSolidarite.png","sub":[{"title":"Is\u00e8re B\u00e9n\u00e9volat","path":"https:\/\/iserebenevolat.fr\/","description":null},{"title":"Is\u00e8reAdom","path":"https:\/\/www.isereadom.fr\/","description":null},{"title":"MDA 38","path":"https:\/\/www.isere.fr\/mda38\/Pages\/default.aspx","description":null},{"title":"Stop HPV","path":"https:\/\/www.stophpv.fr\/","description":null}]},{"title":"Education - Sport - Jeunesse","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoEducation.png","sub":[{"title":"ENT","path":"https:\/\/www.colleges-isere.fr\/","description":null},{"title":"Cyclo Alpes","path":"https:\/\/www.cyclo-alpes.com\/","description":null},{"title":"Sport Is\u00e8re","path":"https:\/\/sport.isere.fr","description":"Site Sport Is\u00e8re"},{"title":"Is\u00e8re Outdoor","path":"https:\/\/www.isereoutdoor.fr\/accueil\/","description":null},{"title":"Course de la r\u00e9sistance","path":"https:\/\/coursedelaresistance.fr\/","description":null},{"title":"ODPE","path":"https:\/\/www.isere.fr\/odpe","description":"Observatoire d\u00e9partemental de la protection de l\u2019enfance de l\u2019Is\u00e8re"}]},{"title":"Mobilit\u00e9","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoMobilite.png","sub":[{"title":"Itinis\u00e8re","path":"https:\/\/www.itinisere.fr\/","description":null},{"title":"Transis\u00e8re","path":"https:\/\/www.transisere.fr\/","description":null},{"title":"Transaltitude","path":"https:\/\/www.transaltitude.fr\/fr\/","description":null},{"title":"Covoit.net","path":"https:\/\/covoit.net\/","description":null},{"title":"Mov\u0027Ici","path":"https:\/\/movici.auvergnerhonealpes.fr\/","description":null},{"title":"A\u00e9roport Grenoble Alpes Is\u00e8re","path":"https:\/\/www.grenoble-airport.com\/","description":null}]},{"title":"D\u00e9veloppement du territoire - Environnement","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoDeveloppement.png","sub":[{"title":"Is\u00e8re THD","path":"https:\/\/www.iserethd.fr\/","description":null},{"title":"SYMBHI","path":"https:\/\/symbhi.fr\/","description":null},{"title":"Observatoire de l\u0027eau","path":"https:\/\/www.isere.fr\/observatoire-eau\/Pages\/default.aspx","description":null},{"title":"Is\u00e8re Lombri","path":"https:\/\/www.isere-lombri.fr\/","description":null},{"title":"Biodiversit\u00e9","path":"https:\/\/biodiversite.isere.fr\/","description":null}]},{"title":"Culture - Ev\u00e9nements","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoCulture.png","sub":[{"title":"Culture Is\u00e8re","path":"https:\/\/culture.isere.fr\/","description":null},{"title":"Mus\u00e9es Is\u00e8re","path":"https:\/\/musees.isere.fr\/","description":"Acc\u00e8s aux mus\u00e9es Is\u00e9rois"},{"title":"Archives d\u00e9partementales","path":"https:\/\/archives.isere.fr\/","description":null},{"title":"M\u00e9diath\u00e8que d\u00e9partementale","path":"https:\/\/mediatheque-departementale.isere.fr\/","description":null},{"title":"Domaine de Vizille - Mus\u00e9e de la R\u00e9volution fran\u00e7aise","path":"https:\/\/musees.isere.fr\/musee\/domaine-de-vizille-musee-de-la-revolution-francaise","description":null},{"title":"Maison Berg\u00e8s","path":"https:\/\/musees.isere.fr\/musee\/maison-berges","description":null},{"title":"Mus\u00e9e de l\u2019Ancien \u00c9v\u00each\u00e9","path":"https:\/\/musees.isere.fr\/musee\/musee-de-lancien-eveche","description":null},{"title":"Mus\u00e9e Arcabas en Chartreuse","path":"https:\/\/musees.isere.fr\/musee\/musee-arcabas-en-chartreuse","description":null},{"title":"Mus\u00e9e arch\u00e9ologique Saint-Laurent","path":"https:\/\/musees.isere.fr\/musee\/musee-archeologique-saint-laurent","description":null},{"title":"Mus\u00e9e Champollion","path":"https:\/\/musees.isere.fr\/musee\/musee-champollion","description":null},{"title":"Mus\u00e9e dauphinois","path":"https:\/\/musees.isere.fr\/musee\/musee-dauphinois","description":null},{"title":"Mus\u00e9e H\u00e9bert","path":"https:\/\/musees.isere.fr\/musee\/musee-hebert","description":null},{"title":"Mus\u00e9e Hector-Berlioz","path":"https:\/\/musees.isere.fr\/musee\/musee-hector-berlioz","description":null},{"title":"Mus\u00e9e de la R\u00e9sistance et de la D\u00e9portation de l\u0027Is\u00e8re","path":"https:\/\/musees.isere.fr\/musee\/musee-de-la-resistance-et-de-la-deportation-de-lisere","description":null},{"title":"Mus\u00e9e de Saint-Antoine-l\u2019Abbaye","path":"https:\/\/musees.isere.fr\/musee\/musee-de-saint-antoine-labbaye","description":null},{"title":"PAYSAGE \u003E PAYSAGES","path":"https:\/\/www.paysage-paysages.fr\/","description":null},{"title":"Festival Berlioz","path":"https:\/\/www.festivalberlioz.com\/","description":null},{"title":"Les all\u00e9es chantent","path":"https:\/\/www.les-allees-chantent.fr\/","description":null},{"title":"AIDA 38","path":"https:\/\/www.aida38.fr\/","description":null}]},{"title":"Tourisme - Attractivit\u00e9","path":"","icon":"https:\/\/menutrans.isere.fr\/sites\/default\/files\/menu_icons\/icoSport_0.png","sub":[{"title":"Is\u00e8re Tourisme","path":"https:\/\/www.isere-tourisme.com\/","description":null},{"title":"Is\u00e8re Tourisme Pro","path":"https:\/\/pro.isere-tourisme.com\/","description":null},{"title":"Tous sur le web","path":"https:\/\/www.toussurleweb.com\/","description":null},{"title":"Is\u00e8re Outdoor","path":"https:\/\/carto.isere.fr\/isere-outdoor\/","description":null},{"title":"Cyclo Alpes","path":"https:\/\/www.cyclo-alpes.com\/","description":null},{"title":"Rencontres du Tourisme","path":"https:\/\/www.rencontres-tourisme-isere.com\/","description":null}]}],"social_network":[{"title":"Facebook","link":"https:\/\/www.facebook.com\/isere.le.departement\/"},{"title":"Instagram","link":"https:\/\/www.instagram.com\/isere.le.departement\/"},{"title":"Linkedin","link":"https:\/\/fr.linkedin.com\/company\/d%C3%A9partement-de-l-is%C3%A8re"},{"title":"Twitter","link":"https:\/\/twitter.com\/CDIsere"},{"title":"YouTube","link":"https:\/\/www.youtube.com\/channel\/UCtDk8_0fQyBMPyzUsy3Px-Q"}]},"method":"GET"}
\ No newline at end of file
diff --git a/static/isere-cd38/extra.js b/static/isere-cd38/extra.js
new file mode 100644
index 00000000..bee7a55a
--- /dev/null
+++ b/static/isere-cd38/extra.js
@@ -0,0 +1,475 @@
+//
+//  Script provisoire du widget Isère
+//  Pour test d'intégration
+//  À remplacer par <script src="https://menutrans.isere.fr/widgets/crossmenu.js"></script> quand les authorisations d'accès seront accordées
+//
+
+(function (funcName, baseObj) {
+  // jQuery's $(document).ready() equivalent function
+
+  funcName = funcName || "docReady";
+  baseObj = baseObj || window;
+  var readyList = [];
+  var readyFired = false;
+  var readyEventHandlersInstalled = false;
+
+  function ready() {
+    if (!readyFired) {
+      readyFired = true;
+      for (var i = 0; i < readyList.length; i++) {
+
+        readyList[i].fn.call(window, readyList[i].ctx);
+      }
+
+      readyList = [];
+    }
+  }
+
+  function readyStateChange() {
+    if (document.readyState === "complete") {
+      ready();
+    }
+  }
+
+  baseObj[funcName] = function (callback, context) {
+    if (typeof callback !== "function") {
+      throw new TypeError("callback for docReady(fn) must be a function");
+    }
+    if (readyFired) {
+      setTimeout(function () {
+        callback(context);
+      }, 1);
+      return;
+    } else {
+      readyList.push({fn: callback, ctx: context});
+    }
+    if (document.readyState === "complete") {
+      setTimeout(ready, 1);
+    } else if (!readyEventHandlersInstalled) {
+      if (document.addEventListener) {
+        document.addEventListener("DOMContentLoaded", ready, false);
+        window.addEventListener("load", ready, false);
+      } else {
+        document.attachEvent("onreadystatechange", readyStateChange);
+        window.attachEvent("onload", ready);
+      }
+      readyEventHandlersInstalled = true;
+    }
+  }
+})("docReady", window);
+
+(function () {
+
+  /*
+  * ===== Documentation ======
+  * to activate this script put this tag in your HTML
+  *  <section id="js_isereMegaMenu"></section>
+  *
+  * == CSS confs
+  * Add "isereMegaMenu--fixed" class to parent element to applay fixed styles
+  * Add "isereMegaMenu--hideLogin" to hide login button
+  *
+  * === Switchers
+  * if show_isereMegaMenu_state_in_html = true, a class 'js_isereMegaMenu--open' will be added to <html> element
+  * if variable 'domainWidgetIsere' is not defined, a default value will be assined => 'https://menutrans.isere.fr'
+  *
+  * */
+
+  if (typeof jQuery == 'undefined') {
+    docReady(main);
+  } else {
+    jQuery(document).ready(main());
+  }
+
+  function main() {
+    //Temporaire : pour surpasser le cache locale du navigateur
+    let versionNum = Math.random().toString(36).substring(7);
+    function _addClass(el, NewClass) {
+      var lesClass = el.className.toString();
+      lesClass = lesClass + " " + NewClass;
+      el.className = lesClass;
+      return true;
+    }
+
+    function _removeClass(el, NewClass) {
+      var regEx = new RegExp("\\b" + NewClass + "\\b");
+
+      el.className = el.className.toString().replace(regEx, "");
+      if (el.className == '') {
+        el.removeAttribute('class');
+      }
+      return true;
+    }
+
+    function _checkClass(el, NewClass) {
+      let lesClass = el.className;
+      return true;
+    }
+
+    function _toggleClass(el, classToToggle) {
+      let lesClass = el.className.toString();
+      if (lesClass.indexOf(classToToggle) == -1) {
+        _addClass(el, classToToggle);
+      } else {
+        _removeClass(el, classToToggle);
+      }
+      return true;
+    }
+
+    if (typeof domainWidgetIsere == 'undefined') {
+      console.warn('Warning: The variable domainWidgetIsere was undifined: Default value is loaded.')
+      var domainWidgetIsere = 'https://menutrans.isere.fr';
+
+      //pour les tests/debug en preprod
+      // var domainWidgetIsere = "https://preprod-menutrans.isere.fr";
+    }
+
+
+    //css stylesheet
+    let css_link = document.createElement('link');
+    css_link.type = "text/css";
+    css_link.rel = "preload stylesheet";
+    css_link.as = "style";
+    css_link.href = domainWidgetIsere + "/widgets/css/crossmenu.style.css?=" + versionNum;
+    document.head.appendChild(css_link);
+
+    let jsonp_url = "/static/isere-cd38/crossmenu.json",
+      request = new XMLHttpRequest();
+
+    request.open('GET', jsonp_url, true);
+    request.withCredentials = true;
+
+    request.onload = function () {
+      console.log(this.responseText);
+      if (this.status >= 200 && this.status < 400) {
+
+        // solution temporaire des que tout les sites integrons les nouvelles modifications
+        if (document.getElementById('js_isereMegaMenu')) {
+          var isereMegaMenu = document.getElementById('js_isereMegaMenu')
+        } else if (document.getElementById('containerWidget')){
+          var isereMegaMenu = document.getElementById('containerWidget');
+        } else {
+           console.error('Error: cannot find the <section id="js_isereMegaMenu"></section> element, please add it to DOM');
+        }
+        isereMegaMenu.classList.add('isereMegaMenu');
+
+        //Creates shade elemenet and inserts into wrapper element
+        let shadeBlack = document.createElement('span');
+        shadeBlack.className = 'isereMegaMenu__shadow isereMegaMenu__shadow--fadeIn_start'
+        shadeBlack.id = 'js_isereMegaMenu__shadow'
+        isereMegaMenu.insertBefore(shadeBlack, isereMegaMenu.firstChild)
+
+        // creates container
+        let widgetLinks = document.createElement('div');
+        widgetLinks.className = 'isereMegaMenu__widgetLinks';
+        isereMegaMenu.appendChild(widgetLinks);
+
+
+        //le div principal
+        let menuWidget = document.createElement('div');
+        menuWidget.className = 'isereMegaMenu__menuWidget';
+        menuWidget.style.height = 0;
+        menuWidget.style.visibility = 'hidden';
+        widgetLinks.appendChild(menuWidget);
+
+        //le bouton du menu
+        var buttonSVG = "<svg class ='isereMegaMenu__btnTgl__img' xmlns='http://www.w3.org/2000/svg' baseProfile='tiny' viewBox='0 0 140 93' height='42' width='65' overflow='scroll' xmlns:v='https://vecta.io/nano'><path fill='#f4f3f3' d='M0 0h139.75v93.188H0z'/><circle fill='#1b619d' cx='96.458' cy='17.292' r='9.208'/><path fill='#fcd312' d='M47.375 63.833v29.355h92.375V.738s-26 63.595-92.375 63.095z'/><path fill='#1b619d' d='M105.75 36.164S93 35.667 87.937 47.584c-.698 10.415 0 40.25 0 40.25h17.507l.306-51.67z'/><path fill='#505150' d='M22.76 59.664l-16.2-16.2a2 2 0 0 1 0-2.829l1.89-1.89a2 2 0 0 1 2.826-.003l12.9 12.838 12.9-12.838a2 2 0 0 1 2.826.003l1.89 1.89a2 2 0 0 1 0 2.829l-16.2 16.2a2 2 0 0 1-2.829 0h0z'/></svg>";
+        let menuButton = document.createElement('span');
+        menuButton.id = 'js_isereMegaMenu__btnTgl'
+        menuButton.className = 'isereMegaMenu__btnTgl'
+        menuButton.title = 'Menu Isere'
+        menuButton.innerHTML = buttonSVG;
+        menuButton.style.opacity = '0';
+        widgetLinks.appendChild(menuButton);
+
+
+        //le Close Button
+        let menuCloseButton = document.createElement('span');
+        menuCloseButton.id = 'js_isereMegaMenu__close';
+        menuCloseButton.className = 'isereMegaMenu__close';
+        menuCloseButton.innerText = 'Fermer';
+        menuWidget.appendChild(menuCloseButton);
+
+        //le div header
+        let divTop = document.createElement('div');
+        divTop.className = 'isereMegaMenu__header';
+        menuWidget.appendChild(divTop);
+
+        let logoLink = document.createElement('a');
+        logoLink.href = 'https://www.isere.fr/';
+        logoLink.className = 'isereMegaMenu__header__logo';
+        logoLink.title = 'isere logo';
+        divTop.appendChild(logoLink);
+
+        // Prepare JSON from menutrans
+        let data = JSON.parse(this.response).data;
+
+
+        if (data.title != '') {
+          var spanTitle = document.createElement('span');
+          spanTitle.className = 'isereMegaMenu__header__title';
+          spanTitle.innerText = data.title;
+          divTop.appendChild(spanTitle);
+        }
+
+
+        //Lien de connexion
+        if (typeof data.account !== 'undefined' && data.account.link != '') {
+          // login link
+          var linkLogin = document.createElement('a');
+          linkLogin.target = "_blank";
+          linkLogin.className = 'isereMegaMenu__header__login';
+          linkLogin.href = data.account.link;
+          linkLogin.title = data.account.title;
+          divTop.appendChild(linkLogin);
+        }
+
+        // Big menu wrapper
+        let divContent = document.createElement('nav');
+        menuWidget.appendChild(divContent);
+
+        // Big menu
+        let menu = document.createElement('ul');
+        menu.className = 'isereMegaMenu__menu';
+        divContent.appendChild(menu);
+
+
+        data.menu.forEach(function (value) {
+          //Menu item
+          var menuItem = document.createElement('li');
+          menuItem.className = 'js_isereMegaMenu__menu__item isereMegaMenu__menu__item  isereMegaMenu__menu__item--withChild ';
+
+          //Menu item link
+          var linkA = document.createElement('a');
+          linkA.className = 'isereMegaMenu__menu__item__link';
+          linkA.href = 'javascript:void(0)';
+          linkA.innerText = value.title;
+          menuItem.appendChild(linkA);
+
+          if (value.icon) {
+            menuItem.classList.add('isereMegaMenu__menu__item--avecImage');
+
+            // Debug : on force le HTTPS sur les Ã®cones pour Ã©viter les bugs mixed content
+            if (value.icon.substr(0, 5) !== 'https') {
+              value.icon = value.icon.replace('http', 'https');
+            }
+
+            switch (value.title) {
+              case 'Le DÃ©partement':
+                menuItem.classList.add('isereMegaMenu__menu__item--departement');
+                break;
+              case 'SolidaritÃ© - SantÃ©':
+                menuItem.classList.add('isereMegaMenu__menu__item--solidarite');
+                break;
+              case 'Education - Sport - Jeunesse':
+                menuItem.classList.add('isereMegaMenu__menu__item--education');
+                break;
+              case 'MobilitÃ©':
+                menuItem.classList.add('isereMegaMenu__menu__item--developpement');
+                break;
+              case 'DÃ©veloppement du territoire - Environnement':
+                menuItem.classList.add('isereMegaMenu__menu__item--mobilite');
+                break;
+              case 'Culture - EvÃ©nements':
+                menuItem.classList.add('isereMegaMenu__menu__item--culture');
+                break;
+              case 'Tourisme - AttractivitÃ©':
+                menuItem.classList.add('isereMegaMenu__menu__item--sport');
+                break;
+              default:
+                menuItem.classList.add('isereMegaMenu__menu__item--departement');
+            }
+          }
+
+          if (value.color) {
+            linkA.dataset.color = value.color;
+          }
+
+          //Sub menu
+          if ("sub" in value) {
+
+            // sub menu
+            var subMenu = document.createElement('ul');
+            subMenu.className = "isereMegaMenu__menu__item__sub";
+            menuItem.appendChild(subMenu);
+
+            // iteration sur les listed des sumenus
+            value.sub.forEach(function (subValue) {
+              // sub menu item
+              let subMenuItem = document.createElement('li');
+              subMenuItem.className = 'isereMegaMenu__menu__item__sub__item';
+              subMenu.appendChild(subMenuItem);
+
+              // sub menu item link
+              let subLinkA = document.createElement('a');
+              subLinkA.className = 'isereMegaMenu__menu__item__sub__item__link';
+              subLinkA.href = subValue.path;
+              if (subValue.description != null) {
+                subLinkA.title = subValue.description;
+              }
+              subLinkA.innerText = subValue.title;
+              subMenuItem.appendChild(subLinkA);
+
+              if (value.color) {
+                subLinkA.dataset.color = value.color;
+              }
+            });
+
+
+          } else {
+            // Si pas de sub items
+            menuItem = document.createElement('li')
+
+            var linkA = document.createElement('a');
+            linkA.href = 'javascript:void(0)';
+            linkA.className = "lien";
+            linkA.innerText = value.title;
+
+            if (value.color) {
+              linkA.dataset.color = value.color;
+            }
+
+            menuItem.appendChild(linkA);
+          }
+          menu.appendChild(menuItem);
+        });
+
+
+        // Footer social icons
+        var socialNetwork = document.createElement('ul');
+        socialNetwork.className = 'isereMegaMenu__social';
+
+        data.social_network.forEach(function (value) {
+          if (value.link != '') {
+            //social icon item
+            var menuItem = document.createElement('li');
+            menuItem.className = "isereMegaMenu__social__item isereMegaMenu__social__item--" + value.title.toLowerCase();
+
+            //social icon item link
+            var menuItem__link = document.createElement('a');
+            menuItem__link.href = value.link;
+            menuItem__link.className = 'isereMegaMenu__social__item__link';
+            menuItem__link.title = value.title;
+            menuItem__link.setAttribute('aria-label', value.title);
+
+            menuItem.appendChild(menuItem__link);
+          }
+          socialNetwork.appendChild(menuItem);
+
+        });
+
+        menuWidget.appendChild(socialNetwork);
+
+        function calcBigMenuHeight() {
+          //get and store full height of the menu
+          menuWidget.style.height = 'auto';
+          menuWidget.dataset.height = menuWidget.offsetHeight + 'px';
+          menuWidget.style.height = 0;
+        }
+
+        calcBigMenuHeight();
+
+
+        isereMegaMenu.addEventListener('click', function (event) {
+          // loop parent nodes from the target to the delegation node
+          for (var target = event.target; target && target != this; target = target.parentNode) {
+
+            //TODO convert this to swith statement
+            if (target.matches('.isereMegaMenu__menu__item__link')) {
+
+              //open submenus
+              var childSub = target.nextElementSibling;
+
+              //checks if submenu is open
+              if (target.parentNode.className.indexOf('--open') !== -1) {
+                target.parentNode.classList.remove('isereMegaMenu__menu__item--open');
+                childSub.removeAttribute('style');
+              } else {
+                target.parentNode.classList.add('isereMegaMenu__menu__item--open');
+                childSub.style.height = childSub.dataset.height;
+              }
+
+
+              break;
+            } else if (target.matches('#js_isereMegaMenu__btnTgl')) {
+
+              //big button menu OPEN
+              event.preventDefault();
+              setTimeout(calcBigMenuHeight(), 300);
+
+              isereMegaMenu.classList.add('isereMegaMenu--open')
+              if (typeof show_isereMegaMenu_state_in_html != 'undefined') {
+                document.getElementsByTagName('html')[0].classList.add('js_isereMegaMenu--open');
+              }
+
+              menuWidget.style.visibility = 'visible';
+
+              //To wait for animation to be finished
+              setTimeout(function () {
+                menuWidget.style.height = menuWidget.dataset.height;
+                setTimeout(function () {
+                  menuWidget.style.height = 'auto';
+
+                }, 500);
+                setTimeout(function () {
+                  isereMegaMenu
+                    .querySelectorAll('.isereMegaMenu__menu__item__sub')
+                    .forEach(function (value) {
+                      var el = value, old = el.style.height;
+
+                      el.style.height = 'auto';
+                      el.dataset.height = (el.offsetHeight + 10) + 'px';
+                      el.style.height = old;
+                    })
+                }, 600);
+              }, 100);
+
+              //shade appear animation
+              shadeBlack.classList.toggle('isereMegaMenu__shadow--show');
+              shadeBlack.classList.add('isereMegaMenu__shadow--fadeIn');
+              shadeBlack.classList.remove('isereMegaMenu__shadow--fadeIn_start');
+              shadeBlack.classList.remove('isereMegaMenu__shadow--fadeOut');
+
+              break;
+            } else if (target.matches('#js_isereMegaMenu__close') || target.matches('#js_isereMegaMenu__shadow')) {
+
+              //Close button/shade for  menu CLOSE
+              event.preventDefault();
+              isereMegaMenu.classList.remove('isereMegaMenu--open');
+              if (typeof show_isereMegaMenu_state_in_html != 'undefined') {
+                document.getElementsByTagName('html')[0].classList.remove('js_isereMegaMenu--open');
+              }
+
+              var nowHeight = menuWidget.offsetHeight + 'px'
+
+              menuWidget.style.height = nowHeight;
+              menuWidget.dataset.height = nowHeight;
+
+              setTimeout(function () {
+                menuWidget.style.height = 0;
+              }, 100);
+
+              //shade disappear animation
+              shadeBlack.classList.remove('isereMegaMenu__shadow--show');
+              shadeBlack.classList.remove('isereMegaMenu__shadow--fadeIn');
+              shadeBlack.classList.add('isereMegaMenu__shadow--fadeOut');
+            } else if (target.matches('.isereMegaMenu__menu__item__sub__item__link')) {
+              // control animation of selected link
+              break;
+            } else {
+            }
+
+          }
+        }, false);
+
+      } else {
+
+      }
+    };
+    request.onerror = function () {
+      console.log(this);
+    };
+    request.send();
+  }
+})();
+
diff --git a/static/isere-cd38/style.scss b/static/isere-cd38/style.scss
new file mode 100644
index 00000000..75b3661a
--- /dev/null
+++ b/static/isere-cd38/style.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import '../includes/fonts/source-sans-pro';
+@import '../includes/fonts/raleway';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/isere-cd38/combo/cells/a-la-une/form.html b/templates/variants/isere-cd38/combo/cells/a-la-une/form.html
new file mode 100644
index 00000000..dc70a3d5
--- /dev/null
+++ b/templates/variants/isere-cd38/combo/cells/a-la-une/form.html
@@ -0,0 +1,6 @@
+{% extends "combo/wcs/form.html" %}
+
+{% block cell-content %}
+{% include "combo/asset_picture_fragment.html" %}
+{{ block.super }}
+{% endblock %}
diff --git a/templates/variants/isere-cd38/combo/page_template.html b/templates/variants/isere-cd38/combo/page_template.html
new file mode 100644
index 00000000..d393b767
--- /dev/null
+++ b/templates/variants/isere-cd38/combo/page_template.html
@@ -0,0 +1,12 @@
+{% extends "combo/page_template.html" %}
+
+{% block body-bottom %}
+	<section id="js_isereMegaMenu" class="isereMegaMenu--hideLogin"></section>
+
+	<!--
+		À activer une fois les authorisations d'accès et supprimer
+			static/isere-cd38/extra.js
+			static/isere-cd38/crossmenu.json
+		<script src="https://menutrans.isere.fr/widgets/crossmenu.js"></script>
+	-->
+{% endblock %}
\ No newline at end of file
diff --git a/templates/variants/isere-cd38/combo/page_template_homepage.html b/templates/variants/isere-cd38/combo/page_template_homepage.html
new file mode 100644
index 00000000..32230e34
--- /dev/null
+++ b/templates/variants/isere-cd38/combo/page_template_homepage.html
@@ -0,0 +1,32 @@
+{% extends "combo/page_template_sidebar.html" %}
+{% load combo assets %}
+
+{% block extra_css %}
+<style>
+  body.has-picture nav::after {
+    content: "{% firstof titre_bandeau|safe "Vos démarches en ligne \A auprès du Département de l’isère"  %}";
+  }
+</style>
+{% endblock %}
+
+{% block columns %}
+  <h2 class="section-title">À la une</h2>
+	{% placeholder "une" name="À la une" %}
+{% endblock %}
+
+{% block content-bottom %}
+  <div class="toutes-demarches">
+    <h2 class="section-title">Toutes les démarches</h2>
+    <div class="theme-3cols-layout">
+      <div class="column">
+        {% placeholder "left" name="Démarches colonne gauche" %}
+      </div>
+      <div class="column">
+        {% placeholder "content" name="Démarches colonne centrale" %}
+      </div>
+      <div class="column">
+        {% placeholder "right" name="Démarche colonne droite" %}
+      </div>
+    </div>
+  </div>
+{% endblock %}
\ No newline at end of file
-- 
2.20.1

