diff --git a/static/villeneuve-dascq/_custom.scss b/static/villeneuve-dascq/_custom.scss
new file mode 100644
index 00000000..b63aacd6
--- /dev/null
+++ b/static/villeneuve-dascq/_custom.scss
@@ -0,0 +1,1103 @@
+$header-height-desktop: 6.25rem;
+$header-height-mobile: 5rem;
+$nav-btn-width-desktop: calc( 3em + #{$nav-menu-side});
+$nav-btn-width-mobile: $nav-menu-side;
+
+// icon for url() function
+// $property: "content" or "background-image";
+// $color: hexa with no #
+// $strokWidth: int, no unit;
+@mixin arrowIcon($property: content, $color: 'fff', $strokeWidth: 3) {
+#{$property}: url("data:image/svg+xml,%3Csvg viewBox='0 0 32.5 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m20 2 10 9-10 9m-20-9h30' fill='none' stroke='%23#{$color}' stroke-linejoin='round' stroke-width='#{$strokeWidth}'/%3E%3C/svg%3E")
+}
+
+//
+// GENERIC
+//
+
+// Typo
+html {
+ @media ($max-mobile-viewport) {
+ font-size: $fz-small;
+ }
+}
+
+h1 {
+ font-size: $fz-h1;
+ font-weight: 900;
+ line-height: 1.2;
+}
+
+h2 {
+ font-size: $fz-h3;
+ font-weight: 900;
+}
+
+h3 {
+ font-size: $fz-h4;
+ font-weight: bold;
+}
+h4 {
+ font-size: $fz-h5;
+ font-weight: bold;
+}
+
+// Utils
+.gru-content div.cell.pk-transparent {
+ box-shadow: none !important;
+}
+
+// Form
+label {
+ font-weight: bold;
+}
+input, textarea, select {
+ font-weight: 800;
+ font-size: $fz-h6;
+}
+
+//
+// COMPONENTS
+//
+
+// button
+%button {
+ text-transform: uppercase;
+ padding: 0.5em 1em;
+}
+
+%cancel-button {
+ background-color: $gray-light;
+ color: $font-color;
+ &:hover {
+ background-color: $gray-light;
+ color: $font-color;
+ }
+}
+
+// Notifs
+#messages li.error, .errornotice,
+#messages li.warning, .warningnotice,
+#messages li.success, .successnotice,
+#messages li.info, .infonotice {
+ color: white;
+}
+
+div.meetings_table {
+ & > div {
+ }
+
+ div.head {
+ border-bottom: 2px solid $primary-color;
+ font-weight: 900;
+ }
+ button {
+ border: 2px solid white;
+ box-shadow: 0 0 0 3px $button-background;
+ &:hover, &:focus {
+ box-shadow: 0 0 0 3px $primary-color, 0px 0px 10px #777 !important;
+ }
+
+ &:disabled {
+ border: 2px solid white;
+ box-shadow: 0 0 0 3px grayscale($button-background);
+ }
+ }
+
+ div span {
+ border-radius: 1em;
+ margin: 0.7em;
+ border: 1px solid transparent;
+
+ &.disabled {
+ background-color: $gray-light;
+ opacity: 1;
+ }
+ }
+
+ span.selectable {
+ background-color: $green;
+ &:hover {
+ background-color: $green;
+ color: black;
+ border: 1px solid;
+ }
+ &.on {
+ background: $primary-color;
+ color: $button-color;
+ }
+ }
+
+ &.mobile {
+ > div {
+ width: 100%;
+ }
+ div span {
+ display: inline-block;
+ padding: 0.5em;
+ margin: 0.5em;
+ }
+ button {
+ &.prev, &.next {
+ margin: 0;
+ }
+ }
+ }
+}
+
+//
+// CELLS
+//
+%title {
+ line-height: 1.2;
+}
+// vertical space
+div#services > ul > li,
+div#left div.a2-block, div#right div.a2-block,
+.gru-content div.cell,
+.block {
+ margin-bottom: $columns-gutter / 2;
+}
+// Add box-shadow to cells
+#columns .cell {
+ box-shadow: 0 0 10px #ccc;
+}
+// foldable option
+div.cell {
+ &.foldable.folded {
+ // don't hide cell picture
+ > div > h2:first-child {
+ + picture {
+ display: block;
+ }
+ }
+ }
+}
+
+// Search cell
+// Use search icon for search submit
+.search-cell {
+ .submit-button {
+ &::before {
+ content: "\f002";
+ // content: "\f252";
+ font-family: FontAwesome;
+ }
+ }
+}
+// Carrousel
+.carrousel div.carrousel-content {
+ input + div div.carrousel-item {
+ padding: $theme-gutter*3 $theme-gutter-mobile*2 $theme-gutter*2;
+ @media ($min-desktop-viewport) {
+ padding: $theme-page-padding;
+ }
+ }
+ .carrousel-item-title {
+ @extend h1;
+ @media (max-width: $very-small-limit) {
+ font-size: $fz-h4;
+ }
+ }
+ div.carrousel-nav {
+ top: $theme-gutter-mobile*2;
+ left: $theme-gutter-mobile*2;
+ width: auto;
+ @media ($min-desktop-viewport) {
+ left: $theme-page-padding;
+
+ }
+ label:first-child {
+ margin-left: 0;
+ }
+ }
+
+ $btn-size: 50px;
+ a.carrousel-next,
+ a.carrousel-previous {
+ @media ($min-desktop-viewport) {
+ display: block;
+ }
+ width: $btn-size;
+ height: $btn-size;
+ border: 5px solid;
+ border-radius: 50%;
+ background: no-repeat center center;
+ background-size: 1.5rem;
+ @include arrowIcon($property: background-image);
+
+ top: $theme-gutter;
+ right: $theme-page-padding;
+ &::after {
+ content: none;
+ }
+ }
+ a.carrousel-previous {
+ left: auto;
+ right: calc( #{$theme-page-padding} + #{$btn-size} + #{$theme-gutter} );
+ transform: rotate(180deg);
+ // right: calc( #{$theme-page-padding} );
+ }
+}
+// tracking-code-input
+.tracking-code-input-cell {
+ input, button {
+ line-height: 3rem;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ input {
+ margin-bottom: 1rem;
+ }
+ button {
+ // reset
+ @include vendor-prefix('appearance', 'none');
+ border: none;
+ background: none;
+ padding: 0;
+ color: inherit;
+
+ text-transform: uppercase;
+ font-weight: 900;
+
+ .btn-label {
+ @media ($max-mobile-viewport) {
+ display: none;
+ }
+ }
+ &:after {
+ content: "";
+ display: inline-block;
+ width: 3rem;
+ height: 3rem;
+ vertical-align: middle;
+ border-radius: 50%;
+ border: 2px solid white;
+ margin-left: .66em;
+ background: center no-repeat;
+ @include arrowIcon($property: 'background-image');
+ background-size: 1.5rem;
+ }
+ }
+}
+
+//
+// Links List
+//
+div#rub_service div.category ul,
+div#services > ul > li > ul,
+div#account-management ul,
+div.links-list ul,
+div.menucell ul,
+div.wcsformcell,
+div.categoriescell ul,
+div.link-list-cell ul,
+div.wcscurrentdraftscell ul,
+div.wcscurrentformscell ul {
+ padding: 0 $theme-gutter-mobile;
+
+ & > li > a {
+ // padding-right: 0;
+ padding-left: 2.33em;
+ position: relative;
+ &::before {
+ @include arrowIcon($color: str-slice('#{$link-color}', 2));
+ display: inline-block;
+ position: absolute;
+ left: 1em;
+ width: 1em;
+ transform: translateX(-1em);
+ transition: transform .5s;
+ }
+ &:hover::before {
+ transform: translateX(-0.5em);
+ }
+
+ }
+ li.required-authentication a:after {
+ width: 1em;
+ height: 1em;
+ display: block;
+ margin: auto;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: auto;
+ }
+}
+
+//
+// LAYOUT
+//
+div#nav-wrapper,
+.top-bandeau,
+.pwa-navigation--wrapper {
+ width: 100%;
+ max-width: $width;
+ margin-right: auto;
+ margin-left: auto;
+}
+div#header,
+div#nav-wrapper,
+div#footer,
+div#main-content-wrapper,
+.top-bandeau,
+.pwa-navigation--wrapper {
+ padding-left: $theme-gutter-mobile;
+ padding-right: $theme-gutter-mobile;
+ @media ($min-desktop-viewport) and (max-width: $width) {
+ padding-left: $theme-gutter;
+ padding-right: $theme-gutter;
+ }
+ @media (min-width: $width + 1) {
+ padding-left: $theme-page-padding;
+ padding-right: $theme-page-padding;
+ }
+}
+.top-bandeau {
+ padding-left: 0;
+ @media ($max-mobile-viewport){
+ padding-right: 0;
+ }
+}
+.pwa-navigation--wrapper {
+ .search-cell {
+ &::before {
+ content: " ";
+ display: block;
+ height: 100%;
+ position: absolute;
+ left: 100%;
+ top: 0;
+ background-color: $gray-light;
+ @media ($min-desktop-viewport) and (max-width: $width) {
+ width: $theme-gutter;
+ }
+ @media (min-width: $width + 1) {
+ width: $theme-page-padding;
+ }
+ }
+ }
+}
+#columns {
+ @media ($max-mobile-viewport) {
+ padding: 0;
+ }
+}
+
+
+
+// 3cols layout
+.theme-3cols-layout {
+ @media ($min-desktop-viewport) {
+ display: flex;
+ > div {
+ flex: 1 1 0;
+ }
+ }
+ @media ($max-mobile-viewport) {
+ #center div.cell {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+}
+
+//
+// BLOCS
+//
+
+// Header
+#top {
+ display: flex;
+ align-items: center;
+}
+#logo {
+ padding: 0 !important;
+ flex: 1;
+ font-size: $fz-h5;
+ a {
+ font-weight: 800;
+ display: block;
+ box-sizing: content-box;
+ display: flex;
+ align-items: center;
+ height: $header-height-desktop;
+ background: url(img/vascq-logo-couleur.png) no-repeat;
+ background-position: left top 5px;
+ padding-left: 220px;
+ background-size: 220px auto;
+ margin-right: $theme-gutter-mobile;
+ @media ($max-mobile-viewport) {
+ height: $header-height-mobile;
+ padding-left: 110px;
+ background-size: 110px auto;
+ background-position: left center;
+ width: 0;
+ text-indent: -10000em;
+ }
+
+ // separator
+ &::after {
+ content: "";
+ display: inline-block;
+ height: 2em;
+ width: 1px;
+ order: -1;
+ margin: $theme-half-gutter;
+ background-color: $primary-color;
+
+ }
+
+ }
+}
+
+// Toplinks
+#toplinks {
+ // reset
+ position: static;
+ border: none;
+ border-radius: 0;
+ background: none;
+ box-shadow: none;
+ padding: 0;
+ line-height: 1.25;
+
+ // Keep Space for burger btn
+ margin-right: $nav-btn-width-mobile;
+ @media ($min-desktop-viewport) {
+ margin-right: $nav-btn-width-desktop;
+ }
+
+ // layout
+ display: flex;
+ align-items: center;
+ > span {
+ margin-right: $theme-gutter;
+ }
+ // login / registration & account in 2 lines
+ .registration {
+ display: block;
+ }
+ span.sep, .account-link {
+ display: none;
+ }
+
+ // add icon
+ > span {
+ padding-left: calc( 20px + .66em);
+ background: no-repeat left center;
+ background-size: 20px auto;
+ line-height: $fz-h4;
+ &.login {
+ background-image: url(img/user.svg);
+ }
+ &.logged-in {
+ background-image: url(img/deconnexion.svg);
+ }
+ &.theme-back-home {
+ background-image: url(img/home.svg);
+ // hide back home link on mobile
+ @media (max-width: $very-small-limit) {
+ display: none;
+ }
+ }
+ }
+
+}
+
+// Nav (hamburger in right)
+div.gru-nav {
+ position: relative;
+ z-index: 1000;
+
+ &-wrapper {
+ margin-top: 0;
+ }
+ .gru-nav-button {
+ margin-left: 0;
+ text-align: right;
+
+ // align button to toplinks
+ position: absolute;
+ top: calc(
+ ( (#{$header-height-mobile} - #{$nav-menu-side})
+ / 2 + #{$nav-menu-side}
+ ) * -1
+ ) ;
+ right: 0;
+
+ @media ($min-desktop-viewport) {
+ // align button to toplinks
+ top: calc(
+ ( (#{$header-height-desktop} - #{$nav-menu-side})
+ / 2 + #{$nav-menu-side}
+ ) * -1
+ ) ;
+ width: $nav-btn-width-desktop;
+
+ // Add menu label
+ &::after {
+ color: $link-color;
+ content: attr(aria-label);
+ }
+ }
+
+ + ul {
+ display: none;
+ }
+ &.toggled + ul {
+ display: block;
+ }
+
+ + ul {
+ position: absolute;
+ right: 0;
+ min-width: 18em;
+ max-width: 100%;
+ border-top: 0;
+ margin: 0;
+ width: auto;
+ border: .33em solid $nav-mobile-menu-background;
+
+ li {
+ a {
+ padding-left: 2.33em;
+ position: relative;
+ }
+ a::before {
+ @include arrowIcon($color: str-slice('#{$nav-item-selected-color}', 2));
+ display: inline-block;
+ position: absolute;
+ left: 1em;
+ width: 1em;
+ transform: translateX(-.5em);
+ opacity: 0;
+ transition: opacity .5s, transform .5s;
+
+ }
+ a:hover::before,
+ &.selected a::before {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
+
+ }
+ }
+}
+
+
+// Page title
+.theme-page-header {
+ text-align: center;
+ color: $primary-color;
+
+ // Hide Default title if a cell or custom title is defined
+ > * + .theme-page-title--default {
+ display: none;
+ }
+
+ // WCS title
+ .wcs-page-title {
+ position: relative;
+ color: white;
+ background-color: $primary-color;
+ margin: 0;
+ text-align: left;
+
+ padding: $theme-gutter-mobile;
+ margin-left: -$theme-gutter-mobile;
+ margin-right: -$theme-gutter-mobile;
+ @media ($min-desktop-viewport) {
+ padding: $theme-gutter*2 $theme-gutter;
+ margin-left: -$theme-gutter;
+ margin-right: -$theme-gutter;
+
+ // Category image
+ padding-right: calc( 33.333% + #{$theme-gutter*2});
+ // Form Category img
+ &--image {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 66.666%;
+ background-size: cover;
+ }
+ }
+ @media (min-width: $width + 1) {
+ padding-left: $theme-page-padding;
+ padding-right: calc( 33.333% + #{$theme-page-padding} );
+ margin-right: -$theme-page-padding;
+ margin-left: -$theme-page-padding;
+ }
+
+ }
+}
+
+// Top bandeau
+.top-bandeau {
+ @media ($min-desktop-viewport) {
+ background-color: $primary-color;
+ }
+ // top bandeau cell styles
+ .cell:not(#carrousel) {
+ color: white;
+ background-color: $primary-color;
+ padding: $theme-gutter;
+
+ h2:first-child {
+ font-weight: 800;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ p {
+ margin-top: 0;
+ }
+ }
+ .carrousel + .cell {
+ @media ($max-mobile-viewport) {
+ position: relative;
+ z-index: 101;
+ margin-top: -#{$theme-gutter};
+ margin-right: $theme-gutter-mobile;
+ margin-left: $theme-gutter-mobile;
+ }
+ }
+ .carrousel {
+ // stretch all flex space
+ @media ($min-desktop-viewport) {
+ position: relative;
+ > div {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ .carrousel-content {
+ height: 100%;
+ }
+ }
+ }
+ // Desktop layout
+ @media ($min-desktop-viewport) {
+ display: flex;
+ & > .cell:first-child {
+ flex: 1 0 auto;
+ }
+ & > .cell:last-child {
+ flex: 0 0 calc( (100% - #{$theme-gutter}) / 3 );
+ @media (min-width: $width + 1) {
+ flex: 0 0 calc( (100% - #{$theme-page-padding}) / 3 );
+
+ }
+ }
+ }
+}
+
+// PWA nav & Search Form
+.pwa-navigation--wrapper {
+ @media ($min-desktop-viewport) {
+ display: flex;
+ justify-content: center;
+ border-top: 2px solid $gray-light;
+ border-bottom: 2px solid $gray-light;
+ .pwa-navigation {
+ flex: 0 1 66.666%;
+ align-self: center;
+ }
+ }
+ .search-cell,
+ .search-cell > div {
+ background-color: $gray-light;
+ }
+ .search-cell {
+ @media ($max-mobile-viewport) {
+ display: none;
+ }
+ padding: 0;
+ background-color: $gray-light;
+ position: relative;
+ flex: 0 0 33.333%;
+
+ > div {
+ padding: 0 $theme-gutter;
+ }
+ }
+ .combo-search-form {
+ padding: $theme-gutter/2 0;
+ display: flex;
+ align-items: center;
+
+ .combo-search-input {
+ border: 1px solid transparent;
+ margin: 0;
+ padding-right: 2em;
+ }
+ .submit-button {
+ // reset
+ @include vendor-prefix('appearance', 'none');
+ border: none;
+ background: none;
+ padding: 0;
+
+ display: block;
+ width: 2em;
+ font-size: $fz-h6;
+ text-align: center;
+ position: absolute;
+ right: 0;
+ }
+ }
+}
+
+// JS UI ANIMATION
+// Fix cell on right of window when she's activated (input get focus)
+// Use JS, see extra.js
+
+body.no-overflow {
+ overflow: hidden !important;
+}
+.pwa-navigation--wrapper .search-cell {
+ $open-width: 30em;
+ $btn-width: 1.8em;
+ $time: 900ms;
+
+ // button
+ .top-search-close-btn {
+ @extend %button;
+ width: $btn-width;
+ height: $btn-width;
+ line-height: 0;
+ padding: 0;
+ margin: 0;
+
+ position: fixed;
+ top: $theme-gutter-mobile;
+ right: $open-width - $btn-width / 2;
+ &::before {
+ content: "\f00d";
+ font-family: fontawesome;
+ }
+
+ display: none;
+ }
+ // Mask
+ .top-search-mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1999;
+ background-color: black;
+ opacity: 0;
+ transition: opacity $time;
+ display: none;
+ }
+ > div {
+ transition:
+ top $time,
+ left $time,
+ height $time,
+ width $time;
+ will-change: top, left, height, width;
+ }
+ .combo-search-input {
+ transition: none;
+ -webkit-appearance: textfield;
+ appearance: textfield;
+ }
+
+ .combo-search-results {
+ display: none;
+ }
+
+ &.search-cell-fixed {
+ > div {
+ position: fixed;
+ z-index: 2000;
+ }
+ .top-search-mask {
+ display: block;
+ }
+
+ // fixed on position
+ &.search-cell-move-on-top {
+ > div {
+ top: 0 !important;
+ right: 0 !important;
+ left: calc(100vw - #{$open-width}) !important;
+ height: 100% !important;
+ width: $open-width !important;
+ overflow-y: auto;
+ }
+ .combo-search-results,
+ .top-search-close-btn {
+ display: block;
+ }
+ .top-search-mask {
+ opacity: .6;
+ }
+ }
+ }
+}
+
+.pwa-navigation {
+ @media ($max-mobile-viewport) {
+ border-top: 2px solid $gray-light;
+ left: 0;
+ }
+ @media ($min-desktop-viewport) {
+ justify-content: center;
+ }
+ div > ul li a {
+ text-transform: uppercase;
+ color: $gray;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ background-position: 50% 5px;
+ background-size: auto calc( #{$nav-mobile-bottom-bar-height / 2} - 5px );
+ span {
+ height: auto;
+ width: 100%;
+ }
+
+ }
+ @media ($min-desktop-viewport) {
+ position: static;
+ z-index: 0;
+ div > ul {
+ justify-content: space-around;
+ li {
+ text-align: left;
+ flex: 0 0 auto;
+ a {
+ $icon-width: 30px;
+ padding: 0;
+ padding-left: calc( #{$theme-gutter / 2 } + #{$icon-width} + 10px );
+ padding-right: $theme-gutter / 2;
+ background-position: #{$theme-gutter / 2} center;
+ background-size: $icon-width auto;
+ span {
+ font-size: $fz-small;
+ }
+ }
+ }
+ }
+ }
+}
+
+
+//
+// WCS
+//
+
+// layout
+@media ($min-desktop-viewport) {
+ div#gauche {
+ width: $sidebar-width;
+ & + div#rub_service {
+ width: calc( 100% - #{$sidebar-width});
+ padding-left: $theme-gutter;
+ }
+ }
+}
+#rub_service {
+ // Hide default title
+ > h2:first-child {
+ display: none;
+ }
+ form.quixote {
+ padding: 0;
+ }
+
+ h3 {
+ font-size: $fz-h4;
+ font-weight: 900;
+ color: $primary-color;
+ }
+ // buttons icons & colors
+ .buttons button::before,
+ .buttons button::after {
+ display: inline-block;
+ width: 1.5em;
+ height: 1.5em;
+ border-radius: 50%;
+ border: 2px solid;
+ margin: 0 .66em;
+ background: no-repeat center;
+ background-size: .75em auto;
+ vertical-align: -.33em;
+ }
+ .submit-button button {
+ background-color: $green;
+ color: $font-color;
+ &::after {
+ content: "";
+ @include arrowIcon($property: background-image, $color: str-slice('#{$font-color}', 2), $strokeWidth: 4);
+ margin-right: 0;
+ }
+ }
+ .previous-button button {
+ background-color: $font-color;
+ color: white;
+ &::before {
+ content: "";
+ @include arrowIcon($property: background-image, $color: 'fff', $strokeWidth: 4);
+ transform: rotate(0.5turn);
+ margin-left: 0;
+ }
+ }
+ .cancel-button button {
+ &::before {
+ content: "";
+ background-image: url(img/cross.svg);
+ margin-left: 0;
+ }
+ }
+
+}
+div#gauche {
+ margin-top: 0;
+ @media ($min-desktop-viewport) {
+ background-image: linear-gradient(to top, transparent, $gray-light 200px);
+ }
+
+ @media ($min-desktop-viewport) {
+ box-sizing: content-box;
+ height: 100%;
+ padding-left: $theme-gutter;
+ margin-left: -$theme-gutter;
+ }
+ @media (min-width: $width + 1) {
+ padding-left: $theme-page-padding;
+ margin-left: -$theme-page-padding;
+ }
+
+ // Tracking code
+ #tracking-code {
+ font-size: 100%;
+ margin-bottom: 0;
+ .tracking-code-part {
+ background-color: $font-color;
+ color: white;
+ padding: .66em;
+ @media ($min-desktop-viewport) {
+ padding-left: $theme-gutter;
+ margin-left: -$theme-gutter;
+ }
+ @media (min-width: $width + 1) {
+ padding-left: $theme-page-padding;
+ margin-left: -$theme-page-padding;
+ }
+ // reset default styles
+ * {
+ color: inherit !important;
+ font-size: inherit !important;
+ display: inline;
+ padding: 0;
+ }
+ h3 {
+ font-weight: normal;
+ margin-right: .66em;
+ }
+ a {
+ font-weight: 900;
+ }
+ }
+ form {
+ margin: 1em 0;
+ }
+ }
+
+}
+
+// Steps
+.wcs-steps {
+ text-transform: uppercase;
+ font-weight: 600;
+ margin-bottom: 0;
+}
+.wcs-step {
+ @include desktop-vertical-steps() {
+ margin-bottom: 0;
+ }
+ &.step-before {
+ color: $primary-color;
+ .wcs-step--marker {
+ color: inherit;
+ }
+ }
+}
+
+
+
+//
+// FOOTER
+//
+
+footer {
+ // keep space for PWA nav
+ @media ($max-mobile-viewport) {
+ margin-bottom: $nav-mobile-bottom-bar-height;
+ }
+
+}
+#footer {
+ padding-top: $theme-gutter;
+ padding-bottom: $theme-gutter;
+ .footer-imgs {
+ text-align: center;
+ line-height: 0;
+ .logo-blanc {
+ width: 200px;
+ }
+ .skyline {
+ width: 600px;
+ }
+
+ @media ($min-desktop-viewport) {
+ text-align: justify;
+ &::after {
+ content: " ";
+ display: inline-block;
+ width: 90%;
+ }
+ .logo-blanc {
+ width: 25%;
+ max-width: 250px;
+ }
+ .skyline {
+ width: 70%;
+ }
+ }
+ }
+
+ .menucell {
+ @media ($min-desktop-viewport) {
+ text-align: right;
+ }
+ li {
+ @media ($max-mobile-viewport) {
+ display: block;
+ }
+ a {
+ @media ($max-mobile-viewport) {
+ display: block;
+ }
+ color: white;
+ @media ($min-desktop-viewport) {
+ padding-right: 0;
+ padding-left: 3em;
+ }
+ &::before {
+ content: none;
+ }
+ }
+ }
+ }
+}
diff --git a/static/villeneuve-dascq/_vars.scss b/static/villeneuve-dascq/_vars.scss
new file mode 100644
index 00000000..e772721c
--- /dev/null
+++ b/static/villeneuve-dascq/_vars.scss
@@ -0,0 +1,93 @@
+// Colors
+
+$blue: #5787f5;
+$green: #8fe489;
+$red: #e85f5b;
+$black-blue: #172029;
+$gray: rgb(78, 86, 96);
+$gray-light: #f0f0f0;
+$gray-dark: rgb(23, 32, 41);
+
+// Fonts size:
+$fz-h1: 2.8em; // 45px
+$fz-h2: 2.5em; // 39px
+$fz-h3: 1.875em;// 30px
+$fz-h4: 1.55em; // 25px
+$fz-h5: 1.25em; // 20px
+$fz-h6: 1.125em;// 18px
+$fz-small: 0.875em; // 14px
+$fz-xsmall: 0.75em; // 12px
+
+$theme-gutter: 2rem;
+$theme-gutter-mobile: 1.25rem;
+$theme-half-gutter: $theme-gutter / 2;
+$theme-half-gutter-mobile: $theme-gutter / 2;
+
+$theme-page-padding: 7.5rem;
+
+
+// Core vars
+$primary-color: $blue;
+$font-family: muli, sans-serif;
+$font-color: $gray-dark;
+$link-color: $primary-color;
+
+$very-small-limit: 560px;
+$mobile-limit: 1023px;
+$width: 1380px;
+$columns-gutter: $theme-gutter * 2;
+
+$nav-mobile-limit: 9999px;
+$nav-active-color: transparent;
+$nav-item-selected-color: $link-color;
+$nav-item-selected-background: white;
+$nav-button-background: none;
+$nav-button-color: $link-color;
+$nav-menu-side: 30px;
+$nav-mobile-menu-background: $gray-light;
+$nav-mobile-menu-item-color: $font-color;
+
+$title-background: transparent !default;
+$title-color: $primary-color;
+$title-weight: 900;
+$title-font-size: $fz-h4;
+$title-padding: 1rem $theme-gutter-mobile ;
+
+$cell-border: none;
+$cell-border-radius: 10px;
+$cell-title-cover-border: false;
+$cell-image-padding: 0;
+
+$cell-entry-color: $font-color;
+$cell-entry-hover-color: $link-color;
+$cell-entry-hover-background: none;
+
+$carrousel-text-position: top left;
+$carrousel-navigation-bullet-size: 1rem;
+$carrousel-navigation-bullet-border: 2px solid white;
+$carrousel-height: 25rem;
+
+$error-color: #e95f5c;
+$button-background: $primary-color;
+$button-color: white;
+$button-border-radius: 3em;
+$buttons-order: cancel, previous (grow), submit;
+$buttons-alignment: space-between;
+
+$widget-border-radius: 5px;
+$widget-border: 1px solid $primary-color;
+$widget-focus-color: $primary-color;
+$wcs-step-color: $font-color;
+$wcs-step-current-color: white;
+$wcs-step-current-background: $primary-color;
+$wcs-step-border-bottom: 1px solid $primary-color;
+$wcs-step-current-border-bottom: $wcs-step-border-bottom;
+$wcs-steps-small-layout-limit: $mobile-limit;
+
+$notification_error_color: $error-color;
+$notification_warning_color: #EC892F;
+$notification_success_color: #15b350;
+$notification_info_color: #3562da;
+
+$footer-full-width-background: false;
+$footer-background: $primary-color;
\ No newline at end of file
diff --git a/static/villeneuve-dascq/config.json b/static/villeneuve-dascq/config.json
new file mode 100644
index 00000000..5fa2ab5b
--- /dev/null
+++ b/static/villeneuve-dascq/config.json
@@ -0,0 +1,17 @@
+{
+ "label": "Villeneuve d'Ascq",
+ "variables": {
+ "pwa_display": "standalone",
+ "theme_color": "#5787f5"
+ },
+ "settings": {
+ "combo": {
+ "COMBO_PUBLIC_TEMPLATES.update": {
+ "three_columns": {
+ "name": "trois colonnes",
+ "template": "combo/page_template_3cols.html"
+ }
+ }
+ }
+ }
+}
diff --git a/static/villeneuve-dascq/extra.js b/static/villeneuve-dascq/extra.js
new file mode 100644
index 00000000..989d7e27
--- /dev/null
+++ b/static/villeneuve-dascq/extra.js
@@ -0,0 +1,153 @@
+// TOP Search CELL
+// Fix cell On right of window when she's activated (input get focus)
+(function(d){
+ 'use strict';
+ let top_search;
+ let el_to_move;
+ let closeBtn;
+ let mask;
+
+ // CSS class name
+ const fixed = "search-cell-fixed";
+ const on_top = "search-cell-move-on-top";
+
+ // Status
+ let is_fixed = false;
+ let is_fixed_on_top = false;
+
+ const debug = function(func) {
+ console.log(func);
+ console.log("is_fixed", is_fixed);
+ console.log("is_fixed_on_top", is_fixed_on_top);
+ };
+
+ const createCloseBtn = function(){
+ closeBtn = d.createElement('button');
+ closeBtn.className = "top-search-close-btn";
+ closeBtn.setAttribute("aria-label", "Fermer la fenêtre de recherche");
+ closeBtn.setAttribute("role", "button");
+ };
+
+ const addCloseBtn = function(){
+ createCloseBtn();
+ $(el_to_move).prepend(closeBtn);
+ };
+
+ const createMask = function() {
+ mask = d.createElement('span');
+ mask.className = "top-search-mask";
+ mask.setAttribute("role", "button");
+
+ top_search.append(mask);
+ };
+
+ const fixLayout = function() {
+ if (is_fixed) return;
+
+ const elLayout = el_to_move.getBoundingClientRect()
+
+ el_to_move.style.top = elLayout.top + "px";
+ el_to_move.style.left = elLayout.left + "px";
+ el_to_move.style.height = elLayout.height + "px";
+ el_to_move.style.width = elLayout.width + "px";
+
+ top_search.style.height = elLayout.height + "px";
+
+ top_search.classList.add(fixed);
+ is_fixed = true;
+ };
+
+ const removeLayout = function() {
+ if (!is_fixed) return;
+ top_search.classList.remove(fixed);
+ top_search.removeAttribute('style');
+ el_to_move.removeAttribute('style');
+ is_fixed = false;
+ };
+
+ const fixOnTop = function(callback) {
+ if ( !is_fixed || top_search.classList.contains(on_top) ) return;
+ top_search.classList.add(on_top);
+ is_fixed_on_top = true;
+ };
+
+ const detachTop = function(callback) {
+ if ( !is_fixed_on_top || !top_search.classList.contains(on_top) ) return;
+ $(el_to_move).one('transitionend', function(e){
+ e.stopPropagation();
+ if (callback) {
+ callback();
+ }
+ });
+ top_search.classList.remove(on_top);
+ is_fixed_on_top = false;
+ };
+
+ const open = function() {
+ if (is_fixed_on_top) return;
+ d.body.classList.add('no-overflow');
+ fixLayout();
+ setTimeout(function () {
+ fixOnTop();
+ }, 20);
+ };
+
+ const close = function() {
+ if (!is_fixed_on_top) return;
+ detachTop(function(){
+ removeLayout();
+ d.body.classList.remove('no-overflow');
+ })
+ };
+
+ const init = function() {
+ top_search = d.querySelector('.pwa-navigation--wrapper .search-cell');
+ if (!top_search) return;
+
+ el_to_move = top_search.querySelector('div');
+ const form = top_search.querySelector('form');
+ const input = top_search.querySelector('input');
+
+ addCloseBtn();
+ createMask();
+
+ // when focus change
+ document.addEventListener('focusin', function(e) {
+ if (e.target === input && !is_fixed_on_top) {
+ open();
+ } else {
+ // close if activeElement is not a child of el_to_move
+ if ( !el_to_move.contains(d.activeElement) ) {
+ close();
+ }
+ }
+ });
+
+ // Open Input click
+ $(input).on('click keydown', function(){
+ if (input === d.activeElement) {
+ open();
+ }
+ });
+
+ // open when submit form
+ $(form).on('submit', open);
+
+ // close esc
+ document.addEventListener('keydown', function(e){
+ if (e.keyCode === 27) {
+ close();
+ }
+ });
+
+ // close click btn
+ $(closeBtn).on('click', close);
+
+ // close on mask
+ $(mask).on('click', close);
+ };
+
+ $(function() {
+ init();
+ });
+})(document)
\ No newline at end of file
diff --git a/static/villeneuve-dascq/img/cross.svg b/static/villeneuve-dascq/img/cross.svg
new file mode 100644
index 00000000..e61e6528
--- /dev/null
+++ b/static/villeneuve-dascq/img/cross.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/static/villeneuve-dascq/img/deconnexion.svg b/static/villeneuve-dascq/img/deconnexion.svg
new file mode 100644
index 00000000..bd193f9e
--- /dev/null
+++ b/static/villeneuve-dascq/img/deconnexion.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/static/villeneuve-dascq/img/home.svg b/static/villeneuve-dascq/img/home.svg
new file mode 100644
index 00000000..d87be331
--- /dev/null
+++ b/static/villeneuve-dascq/img/home.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/static/villeneuve-dascq/img/skyline.svg b/static/villeneuve-dascq/img/skyline.svg
new file mode 100644
index 00000000..27eef5cf
--- /dev/null
+++ b/static/villeneuve-dascq/img/skyline.svg
@@ -0,0 +1,777 @@
+
+
+
\ No newline at end of file
diff --git a/static/villeneuve-dascq/img/user.svg b/static/villeneuve-dascq/img/user.svg
new file mode 100644
index 00000000..999b9e3c
--- /dev/null
+++ b/static/villeneuve-dascq/img/user.svg
@@ -0,0 +1,12 @@
+
+
diff --git a/static/villeneuve-dascq/img/vascq-logo-couleur.png b/static/villeneuve-dascq/img/vascq-logo-couleur.png
new file mode 100644
index 00000000..a316f3f6
Binary files /dev/null and b/static/villeneuve-dascq/img/vascq-logo-couleur.png differ
diff --git a/static/villeneuve-dascq/img/vasqc-logo-blanc.png b/static/villeneuve-dascq/img/vasqc-logo-blanc.png
new file mode 100644
index 00000000..bbdc7b1e
Binary files /dev/null and b/static/villeneuve-dascq/img/vasqc-logo-blanc.png differ
diff --git a/static/villeneuve-dascq/style.scss b/static/villeneuve-dascq/style.scss
new file mode 100644
index 00000000..e59553e1
--- /dev/null
+++ b/static/villeneuve-dascq/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/muli';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/villeneuve-dascq/combo/page_template.html b/templates/variants/villeneuve-dascq/combo/page_template.html
new file mode 100644
index 00000000..9c95a56f
--- /dev/null
+++ b/templates/variants/villeneuve-dascq/combo/page_template.html
@@ -0,0 +1,38 @@
+{% extends "combo/page_template.html" %}
+{% load combo static %}
+
+{% block user-info %}
+
+ Accueil
+
+ {{ block.super }}
+{% endblock %}
+
+{% block before-main-content %}
+
+ {{ block.super }}
+ {% placeholder "top-search" name="zone de recherche" %}
+
+{% endblock %}
+
+
+{% block content-pre %}
+ {% block main-header %}
+
+ {% endblock %}
+{% endblock %}
+
+{% block footer %}
+
+ {{ block.super }}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/variants/villeneuve-dascq/combo/page_template_3cols.html b/templates/variants/villeneuve-dascq/combo/page_template_3cols.html
new file mode 100644
index 00000000..9999f9ac
--- /dev/null
+++ b/templates/variants/villeneuve-dascq/combo/page_template_3cols.html
@@ -0,0 +1,15 @@
+{% extends "combo/page_template.html" %}
+
+{% block combo-content %}
+
+
+ {% placeholder "left" name="Colonne gauche" %}
+
+
+ {% placeholder "content" name="Colonne centrale" %}
+
+
+ {% placeholder "right" name="Colonne droite" %}
+
+
+ {% placeholder "bandeau" name="Bandeau" %}
+
+ {{ block.super }}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/variants/villeneuve-dascq/combo/search-cell.html b/templates/variants/villeneuve-dascq/combo/search-cell.html
new file mode 100644
index 00000000..0e279b8b
--- /dev/null
+++ b/templates/variants/villeneuve-dascq/combo/search-cell.html
@@ -0,0 +1,3 @@
+{% extends "combo/search-cell.html" %}
+
+{% block submit-content %}{% endblock %}
\ No newline at end of file
diff --git a/templates/variants/villeneuve-dascq/combo/wcs/tracking_code_input.html b/templates/variants/villeneuve-dascq/combo/wcs/tracking_code_input.html
new file mode 100644
index 00000000..ea8fd18e
--- /dev/null
+++ b/templates/variants/villeneuve-dascq/combo/wcs/tracking_code_input.html
@@ -0,0 +1,5 @@
+{% extends "combo/wcs/tracking_code_input.html" %}
+
+{% block submit-content %}
+ Valider
+{% endblock %}
\ No newline at end of file
diff --git a/templates/variants/villeneuve-dascq/wcs/base.html b/templates/variants/villeneuve-dascq/wcs/base.html
new file mode 100644
index 00000000..9cda03cb
--- /dev/null
+++ b/templates/variants/villeneuve-dascq/wcs/base.html
@@ -0,0 +1,12 @@
+{% extends "wcs/base.html" %}
+
+{% block main-title %}
+{% if title %}
+
+ {{ title }}
+
+
+{% endif %}
+{% endblock %}
\ No newline at end of file