Produits Entr'ouvert » Intégrations graphiques Publik

$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;

				}

			}

		}

	}

}

// 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;

{

  "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"

        }

      }

    }

  }

}

// 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)

<?xml version="1.0" encoding="UTF-8"?>

<svg version="1.1" viewBox="0 0 12 12" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

<g transform="translate(0 -28.34)">

	<g transform="translate(-14.1 14.34)">

		<path d="m24.6 15.5-9 9m0-9 9 9" fill="none" stroke="#172029" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

	</g>

</g>

</svg>

<?xml version="1.0" encoding="UTF-8"?>

<svg width="20" height="22" version="1.1" viewBox="0 0 20 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

<path d="m10 2.463c2.293 0 4.439 0.878 6.049 2.488 1.61 1.61 2.488 3.756 2.488 6.049 0 2.293-0.878 4.439-2.488 6.049-1.61 1.61-3.756 2.488-6.049 2.488-2.293 0-4.439-0.878-6.049-2.488-3.317-3.317-3.317-8.732 0-12.05 1.61-1.659 3.756-2.537 6.049-2.537m0-1.463c-2.537 0-5.122 0.9756-7.073 2.927-3.902 3.902-3.902 10.24 0 14.15 1.951 1.951 4.488 2.927 7.073 2.927 2.585 0 5.122-0.9756 7.073-2.927 3.902-3.902 3.902-10.24 0-14.15-1.951-1.951-4.537-2.927-7.073-2.927zm-4.494 4.871a0.7318 0.7318 0 0 0-0.5117 1.254l3.998 4.021-3.998 4.02a0.732 0.732 0 0 0 1.037 1.033l3.992-4.016 3.994 4.016a0.732 0.732 0 0 0 1.037-1.033l-3.998-4.02 3.998-4.021a0.7318 0.7318 0 0 0-0.5352-1.254 0.7318 0.7318 0 0 0-0.502 0.2227l-3.994 4.016-3.992-4.016a0.7318 0.7318 0 0 0-0.5254-0.2227z" fill="#5787f5" stroke-width=".4878"/></svg>

<?xml version="1.0" encoding="UTF-8"?>

<svg width="20" height="22" version="1.1" viewBox="0 0 20 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

<style type="text/css">

	.st0{fill:none;stroke:#5787F5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

</style>

<path d="m9.928 0.003906a0.984 1.009 0 0 0-0.6562 0.2871l-8.953 8.98a0.984 1.009 0 1 0 1.377 1.443l0.2949-0.2949v10.57a0.984 1.009 0 1 0 1.969 0v-10.9h12v10.9a0.984 1.009 0 1 0 1.967 0v-10.67l0.4004 0.3965a0.984 1.009 0 1 0 1.367-1.451l-9.053-8.98a0.984 1.009 0 0 0-0.7148-0.2832zm0.03516 2.416 5.701 5.656h-11.34l5.637-5.656zm-1.676 14.63a0.984 1.009 0 0 0-0.9844 1.01v2.926a0.984 1.009 0 1 0 1.969 0v-1.918h1.475v1.918a0.984 1.009 0 1 0 1.969 0v-2.926a0.984 1.009 0 0 0-0.9844-1.01h-3.443z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#5787f5" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>

</svg>

<?xml version="1.0" encoding="UTF-8"?>

<svg width="20" height="22" version="1.1" viewBox="0 0 20 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

<style type="text/css">

	.st0{fill:#5787F5;}

		.st1{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#5787F5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

</style>

<g transform="translate(0 .5)">

	<path d="m10 10.49c-5.541 0-10 4.448-10 9.975a1.021 1.018 0 1 0 2.041 0c0-4.447 3.501-7.94 7.96-7.94 4.459 0 7.958 3.493 7.958 7.94a1.021 1.018 0 1 0 2.041 0c0-5.527-4.457-9.975-9.999-9.975zm0-8.957c1.939 0 3.469 1.527 3.469 3.461s-1.531 3.461-3.469 3.461c-1.939 0-3.571-1.527-3.571-3.461s1.633-3.461 3.571-3.461m0-2.036c-3.061 0-5.51 2.443-5.51 5.496 0 3.053 2.449 5.496 5.51 5.496 3.061 0 5.51-2.443 5.51-5.496 0-3.053-2.449-5.496-5.51-5.496z" clip-rule="evenodd" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#5787f5" fill-rule="evenodd" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>

</g>

</svg>

@charset "UTF-8";

@import '../includes/fonts/muli';

@import 'vars';

@import '../includes/publik';

@import 'custom';

{% extends "combo/page_template.html" %}

{% load combo static %}

{% block user-info %}

	<span class="theme-back-home">

		<a href="{{site_base}}" title="retour à l'accueil">Accueil</a>

	</span>

	{{ block.super }}

{% endblock %}

{% block before-main-content %}

	<div class="pwa-navigation--wrapper">

		{{ block.super }}

		{% placeholder "top-search" name="zone de recherche" %}

	</div>

{% endblock %}

{% block content-pre %}

	{% block main-header %}

	<header class="theme-page-header">

		{% placeholder "main-title" name="Titre de la page" %}

		{% if page.title %}

		<h1 class="theme-page-title--default">

			{{ page.title }}

		</h1>

		{% endif %}

	</header>

	{% endblock %}

{% endblock %}

{% block footer %}

	<div class="footer-imgs">

		<img class="logo-blanc" src="{{site_base}}{% static "" %}{{css_variant}}/img/vasqc-logo-blanc.png">

		<img class="skyline" src="{{site_base}}{% static "" %}{{css_variant}}/img/skyline.svg" >

	</div>

	{{ block.super }}

{% endblock %}

{% extends "combo/page_template.html" %}

{% block combo-content %}

<div id="columns" class="theme-3cols-layout">

  <div id="left" class="column">

    {% placeholder "left" name="Colonne gauche" %}

  </div>

  <div id="center" class="column">

    {% placeholder "content" name="Colonne centrale" %}

  </div>

  <div id="right" class="column">

    {% placeholder "right" name="Colonne droite" %}

  </div>

</div>

{% endblock %}

{% extends "combo/page_template_3cols.html" %}

{% load combo assets i18n %}

{% block before-main-content %}

  <div class="top-bandeau">

    {% placeholder "bandeau" name="Bandeau" %}

  </div>

  {{ block.super }}

{% endblock %}

{% extends "combo/search-cell.html" %}

{% block submit-content %}{% endblock %}

{% extends "combo/wcs/tracking_code_input.html" %}

{% block submit-content %}

	<span class="btn-label">Valider</span>

{% endblock %}

{% extends "wcs/base.html" %}

{% block main-title %}

{% if title %}

<h1 class="wcs-page-title">

    {{ title }}

    <span

      class="wcs-page-title--image"

      style="background-image: url({{portal_url}}assets/wcs:category:picture:eservices:{{global_context.category_slug}})"></span>

</h1>

{% endif %}

{% endblock %}