/*** HELPERS & GENERAL ***/

* {font-family: 'sofia-pro', sans-serif; color: var(--blacky);}

body.switching *,
body.switching *::before,
body.switching *::after {
	 transition: var(--transition) !important;
}

body {
	overflow-x: hidden;
	background: var(--pinky);
}

body.admin-bar {min-height: calc(100vh - 32px);}

#wpadminbar {z-index: 100000 !important;}
#wp-admin-bar-root-default {margin-top: -20px !important;}
#wp-admin-bar-top-secondary {margin-top: 0 !important;}

:root {
	--red: #D81F27;
	--red-b: #dc363d;
	--pinky: #fdf3f4;
	--pinky-b: #f9dddf;
	--pinkyalt: #fce7e8;
	--pinkyalt-b: #f8d3d4;
	--blacky: #231717;
	--blacky-b: #392f2f;
	--blackyalt: #341717;
	--blackyalt-b: #492f2f;

	--white: #ffffff;

	--error: #DC3545;
	--error-w: #ED9AA2;
	--error-a-w: #F8D6DA;
	--success: #198754;
	--success-w: #8CC3A9;
	--success-a-w: #D1E7DD;

	--white-a: rgba(255,255,255,.1);
	--white-a-l: rgba(255,255,255,.05);
	--black-a: rgba(0,0,0,.1);
	--black-a-l: rgba(0,0,0,.05);

	--un-xs: 5px;
	--un-xs-n: -5px;
	--un-sm: 10px;
	--un-sm-n: -10px;
	--un: 20px;
	--un-n: -20px;
	--un-me: 30px;
	--un-me-n: -30px;
	--un-lg: 40px;
	--un-lg-n: -40px;
	--un-xl: 80px;
	--un-xl-n: -80px;
	--un-xxl: 100px;
	--un-xxl-n: -100px;

	--bw: 2px;
	--bw-n: -2px;
	--border: 1px solid var(--black-a-l);
	--border-lg: 2px solid var(--black-a-l);

	--shadow: 0 5px 20px rgba(0,0,0,.05);
	--shadow-lg: 0 5px 20px rgba(0,0,0,.1);

	--transition: .3s;
	--transition-bezier: .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


::selection {color: var(--red); background: rgba(254,226,65,.66);}
::-moz-selection {color: var(--red); background: rgba(254,226,65,.66);}

i {vertical-align: middle;}
img, svg {vertical-align: middle; width: 100%; user-select: none; pointer-events: none;}
iframe, video {vertical-align: middle; width: 100%; user-select: none;}

img.auto-h {height: auto;}

.container {
	padding: 0;
	position: relative;
}

hr {
	height: var(--bw) !important;
	border: 0 !important;
	opacity: 1 !important;
}

.pinky hr {background: var(--pinky-b);}

.pinkyalt hr {background: var(--pinkyalt-b);}

.blacky hr {background: var(--blacky-b);}

.blackyalt hr {background: var(--blackyalt-b);}

.red hr {background: var(--red-b);}


/*** COLOR & TYPOGRAPHY ***/

.red, .has-red-background-color {background: var(--red) !important;}
.pinky, .has-pinky-background-color {background: var(--pinky) !important;}
.pinkyalt, .has-pinkyalt-background-color {background: var(--pinkyalt) !important;}
.blacky, .has-blacky-background-color {background: var(--blacky) !important;}
.blackyalt, .has-blackyalt-background-color {background: var(--blackyalt) !important;}
.white, .has-white-background-color {background: var(--white) !important;}
.error, .has-error-background-color {background: var(--error) !important;}
.success, .has-success-background-color {background: var(--success) !important;}

.has-red-a-w-background-color {background: var(--red-a-w) !important;}
.has-pinky-a-w-background-color {background: var(--pinky-a-w) !important;}
.has-pinkyalt-a-w-background-color {background: var(--pinkyalt-a-w) !important;}
.has-blacky-a-w-background-color {background: var(--blacky-a-w) !important;}
.has-blackyalt-a-w-background-color {background: var(--blackyalt-a-w) !important;}
.has-white-a-w-background-color {background: var(--white-a-w) !important;}
.has-error-a-w-background-color {background: var(--error-a-w) !important;}
.has-success-a-w-background-color {background: var(--success-a-w) !important;}

.red-text, .has-red-color, .has-red-color * {color: var(--red) !important;}
.pinky-text, .has-pinky-color, .has-pinky-color * {color: var(--pinky) !important;}
.pinkyalt-text, .has-pinkyalt-color, .has-pinkyalt-color * {color: var(--pinkyalt) !important;}
.blacky-text, .has-blacky-color, .has-blacky-color * {color: var(--blacky) !important;}
.blackyalt-text, .has-blackyalt-color, .has-blackyalt-color * {color: var(--blackyalt) !important;}
.white-text, .has-white-color, .has-white-color *, .has-white-dk-color, .has-white-dk-color * {color: var(--white) !important;}
.error-text, .has-error-color, .has-error-color * {color: var(--error) !important;}
.success-text, .has-success-color, .has-success-color * {color: var(--success) !important;}

/*.facebook {background: #1877f2 !important;}*/
/*.facebook:hover {background: #1162c4 !important;}*/
/*.linkedin {background: #0077b5 !important;}*/
/*.linkedin:hover {background: #005a87 !important;}*/

.center-align {text-align: center !important;}
.left-align {text-align: left !important;}
.right-align {text-align: right !important;}
.justify {text-align: justify !important;}
.bold {font-weight: 600 !important;}
.light {font-weight: 300 !important;}

h1, h2, h3, h4, h5, p, blockquote, ul, ol {margin: var(--un) 0 !important; color: inherit;}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, p:first-child, blockquote:first-child, ul:first-child, ol:first-child {margin-top: 0 !important;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, p:last-child, p.last-child, blockquote:last-child, ul:last-child, ul.last-child, ol:last-child, ol.last-child {margin-bottom: 0 !important;}

h2 {font-size: 2.5rem; line-height: 2.5rem; font-weight: bold; color: var(--red);}

h3 {color: var(--grey);}

h4 {font-size: 1.4rem; font-weight: bold; color: var(--red);}

h5 {font-size: 1rem; color: var(--grey);}

.material-icons-outlined {color: inherit;}

a {color: var(--red); text-decoration: none; transition: color var(--transition);}
a:hover {color: var(--red); text-decoration: underline;}

blockquote {font-size: 1.4rem; border-left: 0; padding-left: var(--un); position: relative; transition: color var(--transition);}

span, strong, b, em, i, sub, sup, del {color: inherit;}

ul, ol {padding-left: 0;}
ul li, ol li {list-style-type: none;}
ul.list-margin li, ul.list-margin ol {margin: var(--un-sm) 0;}
ul.list-margin li:first-child, ol.list-margin li:first-child {margin-top: 0;}
ul.list-margin li:last-child, ol.list-margin li:last-child {margin-bottom: 0;}

/*** COMPONENTS ***/

a.link {
	position: relative;
	text-decoration: none !important;
}

a.link::before {
	content: '';
	position: absolute;
	width: 100%;
	height: var(--bw);
	background: var(--red);
	bottom: 0;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
 }

a.link.link-w::before {background: var(--white);}

a.link:hover::before {
	transform-origin: left;
	transform: scaleX(1);
}

.lines {
	top: calc(var(--un-xl-n) + var(--un-n));
	position: absolute;
	height: calc(100% + calc(var(--un-xl) * 2) + var(--un-lg));
	width: calc(100% + 2px);
	margin-left: -1px;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.lines span {
	display: block;
	height: 100%;
	width: 2px;
	background: var(--pinky-b);
	transition: var(--transition);
}

.pinkyalt .lines span {background: var(--pinkyalt-b);}

.blacky .lines span {background: var(--blacky-b);}

.red .lines span {background: var(--red-b);}

section {
	min-height: calc(100vh - calc(var(--un-xxl) * 2));
	position: relative;
	padding: var(--un-xxl) 0;
	transition: var(--transition);
}

section > .container {
	min-height: calc(100vh - calc(var(--un-xxl) * 2));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.section-title {
	position: relative;
	padding-left: calc(calc(100% / 6) + var(--un));
}

.section-title.st-right {
	text-align: right;
	padding-left: initial;
	padding-right: calc(calc(100% / 6) + var(--un));
}

.section-title h2,
.section-title h1 {padding-right: var(--un);}

.section-title.st-right h2,
.section-title.st-right h1 {padding-right: 0; padding-left: var(--un);}

.section-title h2::before,
.section-title h1::before {
	content: '';
	display: block;
	position: absolute;
	left: var(--cw-n);
	top: 50%;
	background: var(--pinky-b);
	height: var(--bw);
	width: calc(calc(100% / 6) + var(--cw));
	transform: translateY(-50%);
	transition: background var(--transition);
}

.pinkyalt .section-title h2::before,
.pinkyalt .section-title h1::before {background: var(--pinkyalt-b);}

.red .section-title h2::before,
.red .section-title h1::before {background: var(--red-b);}

.section-title.st-right h2::before,
.section-title.st-right h1::before {
	left: initial;
	right: var(--cw-n);
}

.section-content {padding-top: var(--un-xl);}

.section-text {
	background: var(--pinky);
	position: relative;
	padding: var(--un-sm) 0;
	text-align: justify;
	transition: var(--transition);
}

.pinkyalt .section-text {background: var(--pinkyalt);}

.red .section-text {background: var(--red);}

.btn,
.ff-btn.btn {
	position: relative;
	background: transparent !important;
	border-radius: var(--un-lg) !important;
	display: inline-flex !important;
	align-items: center !important;
	border-width: var(--bw) !important;
	padding: var(--un-sm) var(--un) !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	min-height: 48px !important;
	text-decoration: none !important;
	border-color: var(--red) !important;
	color: var(--red) !important;
	transition: var(--transition) !important;
	text-align: left;
}

.btn.btn-white,
.ff-btn.btn.btn-white {
	color: var(--white) !important;
	border-color: var(--white) !important;
}

.btn.btn-green,
.ff-btn.btn.btn-green {
	color: var(--success) !important;
	border-color: var(--success) !important;
}

.btn:hover,
.ff-btn.btn:hover {
	opacity: 1 !important;
	background: var(--red) !important;
	border-color: var(--red) !important;
	color: var(--white) !important;
}

.btn.btn-white:hover,
.ff-btn.btn.btn-white:hover {
	background: var(--white) !important;
	border-color: var(--white) !important;
	color: var(--blacky) !important;
}

.btn.btn-green:hover,
.ff-btn.btn.btn-green:hover {
	color: var(--white) !important;
	border-color: var(--success) !important;
	background: var(--success) !important;
}

.btn svg,
.ff-btn.btn svg {
	margin-right: var(--un-sm);
	stroke: var(--red);
	width: 24px;
	min-width: 24px;
	transition: var(--transition);
}

.btn.btn-i svg {margin-right: 0;}

.btn.btn-white svg {stroke: var(--white);}

.btn.btn-green svg {stroke: var(--success);}

.btn:hover svg {stroke: var(--white);}

.btn.btn-white:hover svg {stroke: var(--blacky);}

.btn.btn-green:hover svg {stroke: var(--white);}

.btn-arrow {
	border: var(--bw) solid var(--red);
	height: calc(var(--un-lg) + var(--un)) !important;
	width: calc(var(--un-lg) + var(--un)) !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center !important;
}

.btn-arrow svg {
	width: var(--un-lg) !important;
	height: var(--un-lg) !important;
	stroke-width: 1.5px !important;
	margin-right: 0 !important;
}

.card {
	background: var(--pinky);
	border-width: var(--bw);
	border-color: var(--pinky-b);
	border-radius: 0;
	margin: -1px;
}

.pinkyalt .card {
	background: var(--pinkyalt);
	border-color: var(--pinkyalt-b);
}

.card .card-content {padding: var(--un-lg);}

.media-text {
	display: flex;
	align-items: center;
	position: relative;
}

.media-text img {
	z-index: 100;
	width: calc(calc(100% / 3) + var(--cw));
	margin-right: var(--cw-n);
}

/*** WP BLOCKS ***/

.has-background {transition: var(--transition);}

.wp-block-group.has-background {}

.wp-block-group.has-background .wp-block-group__inner-container {padding: var(--un);}

.wp-block-lazyblock-onglets {margin: var(--un) 0;}

.wp-block-lazyblock-onglets:first-child {margin-top: 0;}

.wp-block-lazyblock-onglets:last-child {margin-bottom: 0;}

.wp-block-media-text .wp-block-media-text__content {padding-right: 0;}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding-left: 0;}

.wp-block-pullquote {padding: 0 !important;}

/*** INPUTS & FORMS ***/

form fieldset > :last-child {margin-bottom: 0 !important;}

label,
.fluentform .ff-el-input--label {margin-bottom: var(--un-xs) !important;}

label.required,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	font-weight: 600 !important;
	margin-left: var(--un-xs) !important;
}

input:not(#adminbar-search),
textarea,
select {
	min-height: 50px !important;
	border-radius: var(--un-lg) !important;
	background: transparent !important;
	border: var(--bw) solid var(--pinky-b) !important;
	transition: var(--transition) !important;
	font-size: 1rem !important;
	color: var(--blacky) !important;
	font-family: 'sofia-pro', sans-serif !important;
	padding: var(--un-sm) var(--un) !important;
	line-height: 1.2rem !important;
}

.pinkyalt input:not(#adminbar-search),
.pinkyalt textarea,
.pinkyalt select {
	border: var(--bw) solid var(--pinkyalt-b) !important;
}

select.ff-el-form-control:not([size]):not([multiple]) {height: 47px !important;}

input:not(#adminbar-search):hover,
textarea:hover,
select:hover {
	border-color: var(--black) !important;
}

.ff-el-is-error input:not(#adminbar-search),
.ff-el-is-error textarea,
.ff-el-is-error select {
	border-color: var(--red) !important;
}

input:not(#adminbar-search):focus,
textarea:focus,
select:focus {
	border-color: var(--black) !important;
	background: var(--white) !important;
}

textarea {
	border-radius: var(--un) !important;
	border-bottom-right-radius: 0 !important;
}

.ff-el-group .error.text-danger {display: none;}

/*** OFFSETS ***/

.offset-l1 {margin-left: calc(calc(100% / 6) + var(--un) + 1px);}

.offset-l2 {margin-left: calc(calc(100% / 3) + var(--un) + 1px);}

.offset-l3 {margin-left: calc(calc(100% / 2) + var(--un) + 1px);}

.offset-r1 {margin-right: calc(calc(100% / 6) + var(--un) + 1px);}

.offset-r2 {margin-right: calc(calc(100% / 3) + var(--un) + 1px);}

.offset-r3 {margin-right: calc(calc(100% / 2) + var(--un) + 1px);}

/*** GRID SYSTEM ***/

.grid,
.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	/*margin: var(--un-n);*/
	margin: 0;
	justify-content: center;
	transition: var(--transition);
	gap: 0 !important;
}

/*.grid.g-small-margin {margin: var(--un-sm-n);}*/

.grid.narrowed {
	margin-left: 8.33%;
	margin-right: 8.33%;
}

.grid.centered {align-items: center;}

.grid.g-left {justify-content: flex-start;}

.grid.g-right {justify-content: flex-end;}

.grid-item, .is-layout-flex > * {
	/*margin: var(--un) !important;*/
	transition: var(--transition);
}

.g-small-margin .grid-item,
.is-layout-flex > * {
	/*margin: var(--un-sm) !important;*/
}

.grid.g-small-margin .grid-item {margin: var(--un-sm);}

.grid-item.empty {
	width: calc(100% - var(--un)) !important;
	background: var(--white-lt);
	padding: var(--un-xxl);
	text-align: center;
	font-style: italic;
	color: var(--grey-dk);
	border-radius: var(--un-sm);
}

.grid.g-1 > .grid-item,
.is-layout-flex:not(.wp-block-buttons).columns-1 > * {
	width: 100%;
}

.grid.g-2 > .grid-item,
.is-layout-flex:not(.wp-block-buttons).columns-2 > * {
	width: 50%;
}

.grid.g-2.g-img > .grid-item.gi-img {width: calc(33.33% - var(--un-lg));}

.grid.g-2.g-img > .grid-item.gi-img:first-child {padding-right: var(--un-lg);}

.grid.g-2.g-img > .grid-item.gi-img:last-child {padding-left: var(--un-lg);}

.grid.g-2.g-img > .grid-item:not(.gi-img) {width: calc(66.66% - var(--un-lg));}

.grid.g-3 > .grid-item,
.is-layout-flex:not(.wp-block-buttons) > * {
	width: calc(100% / 3);
}

.grid.g-4 > .grid-item,
.is-layout-flex:not(.wp-block-buttons).columns-4 > * {
	width: 25%;
}

.grid.g-5 > .grid-item,
.is-layout-flex:not(.wp-block-buttons).columns-5 > * {
	width: 20%;
}

.grid.g-6 > .grid-item,
.is-layout-flex:not(.wp-block-buttons).columns-6 > * {
	width: calc(100% / 6);
}

.grid.g-small-margin.g-2 > .grid-item {width: 50%;}

/*.grid.g-small-margin.g-2.g-img > .grid-item.gi-img {width: calc(33.33% - var(--un));}*/

/*.grid.g-small-margin.g-2.g-img > .grid-item.gi-img:first-child {padding-right: var(--un);}*/

/*.grid.g-small-margin.g-2.g-img > .grid-item.gi-img:last-child {padding-left: var(--un);}*/

/*.grid.g-small-margin.g-2.g-img > .grid-item:not(.gi-img) {width: calc(66.66% - var(--un));}*/

/*.grid.g-small-margin.g-3 > .grid-item {width: calc(100% / 3);}*/

/*.grid.g-small-margin.g-4 > .grid-item {width: 25%;}*/

/*.grid.g-small-margin.g-5 > .grid-item {width: 20%;}*/

/*.grid.g-small-margin.g-6 > .grid-item {width: calc(100% / 6);}*/

.grid.grid-list {
	flex-direction: column;
	margin: 0;
}

.grid.grid-list > .grid-item {
	width: 100% !important;
	margin: 0;
}

/*** HEADER ***/

#header-sticky-wrapper {
	height: initial !important;
	z-index: 9999;
}

#header {
	z-index: 9999;
	width: 100%;
	position: fixed;
}

#header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--un-me) 0;
}

#header-content a#header-icon {
	width: var(--un-xl);
	margin-left: calc(var(--un-lg-n) + 1px);
}

#header-content a#header-icon path, #header-content a#header-logo path {
	transition: var(--transition);
	fill: var(--red);
}

#header-content a#header-icon:hover path, #header-content a#header-logo:hover path {fill: var(--red-b);}

#header-content a#header-logo {
	position: absolute;
	left: 50%;
	width: calc(var(--un-xl) + var(--un-lg));
	transform: translateX(-50%);
	transition: var(--transition-bezier);
}

body:not(.menu-shown) .is-sticky #header-content a#header-logo {
	opacity: 0;
	transform: translateX(-50%) translateY(var(--un-xl-n));
}

#header-content ul {
	margin-right: -64px !important;
	display: flex;
	margin: 0 !important;
	align-items: center;
}

#header-content ul li {display: flex;}

#header-content ul li:not(:last-child) {
	margin-right: var(--un);
	color: var(--red);
}

#header-content ul li:last-child {margin-right: -64px !important;}

#header-content ul li > * {backdrop-filter: blur(20px);}

#theme-switch {
	position: relative;
	width: var(--un-xl);
	display: inline-block;
	height: 48px;
	border: var(--bw) solid var(--red);
	border-radius: 26px;
	transition: var(--transition) !important;
}

#theme-switch span {
	display: block;
	background: var(--red);
	height: var(--un-lg);
	width: var(--un-lg);
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 22px;
	transition: var(--transition-bezier) !important;
}

#theme-switch:hover span {left: var(--un-xs);}

#theme-switch.active:hover span {left: 29px;}

#theme-switch.active span {left: 34px;}

#theme-switch span svg {
	position: absolute;
	top: 50%;
	left: 50%;
	stroke: var(--white);
	transform: translate(-50%,-50%);
	transition: var(--transition) !important;
}

#theme-switch span svg * {transition: var(--transition) !important;}


#theme-switch.active span svg:first-child {
	transform: translate(-50%,-50%) rotate(360deg);
	opacity: 0;
}

#theme-switch span svg:last-child {
	opacity: 0;
	transform: translate(-50%,-50%) rotate(-360deg);
}

#theme-switch.active span svg:last-child {
	opacity: 1;
	transform: translate(-50%,-50%) rotate(0);
}

#header-menu svg line {transition: transform var(--transition);}

.menu-shown #header-menu svg line:first-child {opacity: 0;}
.menu-shown #header-menu svg line:nth-child(2) {transform: translate(35%,-1%) rotate(45deg);}
.menu-shown #header-menu svg line:nth-child(3) {transform: translate(-35%, 34%) rotate(-45deg);}

@media (min-width: 992px) {
	.menu-shown #header-content a#header-icon path, .menu-shown #header-content a#header-logo path {fill: var(--white);}
	.menu-shown #header-content a#header-icon:hover path, .menu-shown #header-content a#header-logo:hover path {fill: var(--pinkyalt);}
	.menu-shown #theme-switch {border-color: var(--white);}
	.menu-shown #theme-switch span {background: var(--white);}
	.menu-shown #theme-switch span svg {stroke: var(--red);}
	.menu-shown .btn {color: var(--white) !important; border-color: var(--white) !important;}
	.menu-shown .btn svg {stroke: var(--white);}
}

.aside-container {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: inset(0 0 0 0);
	pointer-events: none;
}

aside {
	pointer-events: all;
	position: fixed;
	left: calc(var(--cw) - var(--un-sm));
	top: 50%;
	transform: translateY(-50%);
	z-index: 99;
}

#home-qui aside {
	right: calc(var(--cw) - var(--un-sm));
	left: initial;
}

aside ul {
	display: flex;
	flex-direction: column;
}

aside ul li:not(:last-child) {margin-bottom: var(--un-sm);}

aside ul li a {
	display: block;
	width: var(--un);
	height: var(--un);
	border: var(--bw) solid var(--pinky-b);
	border-radius: var(--un);
	background: var(--pinky);
	transition: var(--transition);
	position: relative;
}

.pinkyalt aside ul li a {
	background: var(--pinkyalt);
	border-color: var(--pinkyalt-b);
}

#home-pourquoi aside ul li a {
	background: var(--pinky);
	border-color: var(--red);
}

#home-description aside ul li a {
	background: var(--blacky);
	border-color: var(--blacky-b);
}

aside ul li a.active {
	background: var(--red) !important;
	border-color: var(--red) !important;
}

aside ul li a:hover {border-color: var(--red);}

aside ul li a span {
	display: block;
	position: absolute;
	right: calc(var(--un) + var(--un-xs));
	top: var(--un-xs-n);
	text-align: right;
	opacity: 0;
	transition: var(--transition);
}

aside ul li a.active span {
	opacity: 1;
	color: var(--red) !important;
}

/*** HOME ***/

#intro-container {
	height: calc(100vh - calc(var(--un-xxl) * 2));
	display: flex;
	align-items: center;
}

#intro-content {
	display: flex;
	position: relative;
}

#intro-text {
	width: calc(calc(100% / 2) - var(--un));
	min-width: calc(calc(100% / 2) - var(--un));
	margin-left: calc(calc(100% / 6) + var(--un));
}

#intro-text h1 {
	font-size: 3.5rem;
	line-height: 3.2rem;
	font-weight: 900;
	color: var(--red);
	padding-right: var(--un);
	transition: color var(--transition);
}

#intro-text h1::before {
	content: '';
	display: block;
	position: absolute;
	left: var(--cw-n);
	top: 50%;
	background: var(--pinky-b);
	height: var(--bw);
	width: calc(calc(100% / 6) + var(--cw));
	transform: translateY(-50%);
	transition: background var(--transition);
}

#intro-text h2 {
	color: var(--blacky);
	padding-right: var(--un);
	transition: color var(--transition);
}

#intro-image {
	height: 100%;
	width: calc(calc(100% / 3) + var(--cw));
	position: absolute;
	display: flex;
	align-items: center;
	right: var(--cw-n);
	transition: height var(--transition);
}

#intro-image #intro-images {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

#intro-image img {
	position: absolute;
	height: auto;
	transition: var(--transition-bezier);
}

#intro-image img:not(.active) {
	transform: translateY(-100px);
	opacity: 0;
}

#intro-image img.pre-active {
	opacity: 1;
	transform: translateY(0);
}

#intro-image svg {
	position: absolute;
	width: var(--col);
	margin-left: var(--col);
	z-index: 9;
	bottom: -100%;
}

#home-intro .btn-arrow {
	position: absolute;
	left: calc(var(--col) - calc(var(--un-sm) + var(--un)));
	bottom: 0;
}

#home-intro .btn-arrow:not(:hover) {background: var(--pinky) !important;}

#home-description {
	padding: 0;
	min-height: auto;
}

#home-description .lines {
	top: 0;
	height: 100%;
}

#home-description .container {min-height: auto;}

#description-content {
	border-top-right-radius: var(--col);
	margin-left: var(--cw-n);
	padding-left: var(--cw);
	padding-top: var(--un-xxl);
	padding-bottom: var(--un-xxl);
	position: relative;
	overflow: hidden;
}

#description-content .lines {
	top: 0;
	height: 100%;
	padding-right: var(--cw);
}

#description-content .section-content {padding-top: 0;}

#description-content .btn {margin-right: var(--un);}

#home-description .section-title h2::before {background: var(--blacky-b);}

#home-description .section-content > div {
	color: var(--white) !important;
	font-size: 1.5rem;
	line-height: 1.5rem;
	margin-top: var(--un-lg);
	margin-bottom: var(--un-lg);
	text-align: justify;
	position: relative;
}

#home-description .section-content > div:first-child {margin-top: 0;}

#home-description .section-content > div:last-child {margin-bottom: 0;}

#home-avantages .grid .grid-item:nth-child(2) {margin-top: var(--un-xl);}

#home-avantages .grid .grid-item:last-child {margin-top: calc(var(--un-xl) * 2);}

#home-avantages .btn {
	margin-left: var(--un);
	position: relative;
}

.card.card-avantage {transition: var(--transition);}

.card.card-avantage .card-header {
	background: transparent;
	text-align: center;
	padding: var(--un-lg);
	border-bottom: var(--bw) solid var(--pinkyalt-b);
	transition: var(--transition);
}

.card.card-avantage .card-header h3 {color: var(--red);}

.card.card-avantage .card-content ul li {
	font-size: 1.75rem;
	line-height: 1.75rem;
	transition: var(--transition);
}

.card.card-avantage .card-content ul li span {color: var(--red);}

.card.card-avantage .card-content ul li:not(:last-child) {margin-bottom: var(--un-sm);}

.card.card-avantage .card-header svg path {transition: var(--transition);}

.grid-item:nth-child(1) .card.card-avantage:hover .card-header svg path:nth-child(1) {
	transform: translate(-165%,-97%);
	stroke-width: 0;
}

.grid-item:nth-child(1) .card.card-avantage:hover .card-header svg path:nth-child(3) {
	transform: translate(27%,-26%);
	stroke-width: 0;
}

.grid-item:nth-child(2) .card.card-avantage:hover .card-header svg path {stroke-dasharray: 5, 12;}

.grid-item:nth-child(3) .card.card-avantage:hover .card-header svg path:nth-child(1),
.grid-item:nth-child(3) .card.card-avantage:hover .card-header svg path:nth-child(2),
.grid-item:nth-child(3) .card.card-avantage:hover .card-header svg path:nth-child(3),
.grid-item:nth-child(3) .card.card-avantage:hover .card-header svg path:nth-child(4) {
	fill: var(--red);
}

#home-projets .grid {position: relative;}

#home-projets .grid::after {
	content: '';
	display: block;
	position: absolute;
	width: var(--cw);
	height: calc(100% + var(--bw));
	top: -1px;
	right: calc(var(--cw-n));
	background-image: url('../img/patterns/pinky-b.png');
	border: var(--bw) solid var(--pinky-b);
	border-right: 0;
	border-left: 0;
	transition: var(--transition);
}

.card.card-projet {
	display: flex;
	flex-direction: column;
	background: var(--pinky);
	transition: var(--transition), transform var(--transition-bezier);
}

.card.card-projet:hover {
	background: var(--red);
	color: var(--white);
}

.card.card-projet .cp-content {
	display: flex;
	justify-content: space-between;
	width: 100%;
	flex-direction: column;
	padding: var(--un-lg);
}

.card.card-projet h4 {
	margin-bottom: 0 !important;
	color: var(--blacky);
	font-size: 1.75rem;
	line-height: 1.75rem;
	transition: var(--transition);
}

.card.card-projet:hover h4,
.card.card-projet:hover span,
.card.card-projet:hover a {color: var(--white);}

.card.card-projet .cp-content a {
	font-size: 1.2rem;
	margin-top: var(--un);
	font-weight: 600;
}

.card.card-projet span {transition: var(--transition);}

.card.card-projet .cp-image {
	border-top: var(--bw) solid var(--pinky-b);
	position: relative;
	overflow: hidden;
}

.card.card-projet .cp-image::after {
	content: '';
	display: block;
	padding-bottom: 66%;
}

.card.card-projet .cp-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: var(--transition-bezier);
}

.card.card-projet:hover .cp-image img {
	transform: translate(-50%,-50%) scale(1.1);
}

#home-domaines svg {
	position: absolute;
	right: 0;
	width: var(--col);
	z-index: 9;
}

#domaines-content {
	display: flex;
	align-items: center;
	position: relative;
}

#domaines-content ul {
	margin-left: calc(calc(100% / 6) + var(--un)) !important;
	width: calc(calc(100% / 2) - var(--un));
	min-width: calc(calc(100% / 2) - var(--un));
	position: relative;
	margin-bottom: 0 !important;
}

#domaines-content ul li {
	position: relative;
	cursor: pointer;
}

#domaines-content ul li:not(:last-child) {margin-bottom: var(--un-lg);}

#domaines-content ul li span {
	display: block;
	position: absolute;
	width: calc(var(--un-lg) + var(--un));
	height: calc(var(--un-lg) + var(--un));
	border-radius: calc(var(--un-lg) + var(--un));
	background: var(--pinkyalt);
	border: var(--bw) solid var(--pinkyalt-b);
	left: calc(var(--un-lg-n) + var(--un-sm-n));
	top: 50%;
	transform: translateY(-50%);
}

#domaines-content ul li span::before,
#domaines-content ul li span::after {
	content: '';
	display: block;
	position: absolute;
	background: var(--pinkyalt-b);
	width: calc(var(--un-lg) + var(--un));
	height: var(--bw);
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: var(--transition-bezier);
}

#domaines-content ul li span::after {transform: translate(-50%,-50%);}

#domaines-content ul li.active span::before,
#domaines-content ul li.active span::after {
	transform: translate(-50%,-50%) rotate(45deg);
	opacity: 1;
}

#domaines-content ul li.active span::after {transform: translate(-50%,-50%) rotate(-45deg);}

#domaines-content ul li h3 {
	margin: 0 !important;
	padding-left: calc(var(--un-sm) + var(--un));
	padding-right: var(--un);
	transition: var(--transition);
}

#domaines-content ul li:hover h3 {color: var(--red);}

#domaines-content ul li.active h3 {font-weight: 600;}

#domaines-content #domaines-images {
	min-width: calc(calc(100% / 3) + var(--cw));
	position: relative;
	display: flex;
	align-items: center;
}

#domaines-content #domaines-images img {transition: var(--transition);}

#domaines-content #domaines-images img:not(:first-child) {position: absolute;}

#domaines-content #domaines-images .domaines-temp-image {animation: 1s animTempImage;}

#domaines-content #domaines-images .fade-out {opacity: 0;}

@keyframes animTempImage {
	0% {transform: translateY(-100px); opacity: 0;}
	50% {transform: translateY(-100px); opacity: 0;}
	100% {transform: translateY(0); opacity: 1;}
}

#engagements-content {display: flex;}

#engagements-content .nav-tabs {width: calc(100% / 3);}

#engagements-content .nav-tabs {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	border-bottom: 0;
	margin: var(--un) 0 !important;
	z-index: 9;
}

#engagements-content .nav-item {margin: var(--un) 0;}

#engagements-content .nav-link {
	color: var(--blacky);
	font-weight: 600;
	border: 0 !important;
	position: relative;
	font-size: 1.75rem;
	line-height: 1.75rem;
	padding: 0;
	text-align: right;
	padding-left: var(--un);
	padding-right: calc(var(--un-lg) - var(--un-xs));
	outline: none;
}

#engagements-content .nav-link:hover {color: var(--red);}

#engagements-content .nav-link.active {
	color: var(--red);
	background: transparent;
}

#engagements-content .nav-link::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	width: var(--un-me);
	height: var(--un-me);
	right: calc(var(--un-sm-n) + var(--un-xs-n));
	background: var(--pinky);
	border: var(--bw) solid var(--pinky-b);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: var(--transition);
}

#engagements-content .nav-link.active::after {
	background: var(--red);
	border-color: var(--red);
}

#engagements-content .nav-link:hover::after {border-color: var(--red);}

#engagements-content .tab-content {
	position: relative;
	width: calc(calc(100% / 3) * 2);
	background: var(--pinky);
	border: var(--bw) solid var(--pinky-b);
}

#engagements-content .tab-content::before {
	content: '';
	display: block;
	position: absolute;
	width: calc(var(--col) + var(--bw));
	height: calc(var(--col) + var(--bw));
	border: var(--bw) solid var(--pinky-b);
	left: calc(var(--col-n) - 1px);
	bottom: -2px;
	border-top-left-radius: 100%;
}

.tab-pane.tab-engagement.active {display: flex;}

.tab-pane.tab-engagement {
	margin: 0 -1px;
	position: relative;
	background: var(--pinky);
	border: 0 !important;
}

.tab-pane.tab-engagement .tab-engagement-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--un-lg);
	font-size: 1.2rem;
	text-align: justify;
}

.tab-pane.tab-engagement .tab-engagement-inner > div {
	transition: var(--transition-bezier);
	transform: translateY(var(--un-lg-n));
}

.tab-pane.tab-engagement.show .tab-engagement-inner > div {transform: translateY(0);}

.tab-pane.tab-engagement svg {
	margin-top: var(--un);
	width: var(--un-xxl);
	height: var(--un-xxl);
}

.tab-pane.tab-engagement .tab-engagement-image {
	width: calc(50% + 1px);
	min-width: calc(50% + 1px);
	overflow: hidden;
	border-left: var(--bw) solid var(--pinky-b);
	position: relative;
	transition: var(--transition-bezier);
	opacity: 0;
}

.tab-pane.tab-engagement.show .tab-engagement-image {opacity: 1;}

.tab-pane.tab-engagement .tab-engagement-image::after {
	content: '';
	display: block;
	padding-bottom: 150%;
}

.tab-pane.tab-engagement .tab-engagement-image img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: 3s;
	transition-delay: 4s;
}

.tab-pane.tab-engagement.active .tab-engagement-image img {opacity: 1;}

#qui-content {
	display: flex;
	align-items: center;
}

#qui-content img {
	width: calc(calc(100% / 3) + var(--cw));
	margin-left: var(--cw-n);
	position: relative;
}

#qui-line {
	position: absolute;
	width: calc(var(--col) - var(--un-lg));
	left: calc(calc(100% / 3) + var(--un));
	height: auto;
	bottom: var(--un-lg);
}

#qui-line path,
#qui-line line {
	stroke: var(--pinkyalt-b);
	stroke-width: var(--bw);
}

#qui-content #trap-patric {
	position: absolute;
	width: calc(100% / 6);
	top: 50%;
	transform: translateY(-50%);
	margin-left: calc(var(--col) + calc(var(--col) / 2));
}

#qui-content #signature-patric {
	width: calc(var(--col) - var(--un-lg));
	margin-left: 0;
	margin-top: var(--un);
}

#clients-content .grid-item img {
	height: auto;
	padding: var(--un-lg);
}

#clients-ruler {
	position: absolute;
	right: 0;
	width: auto !important;
	top: 0;
	height: auto;
}

#clients-ruler line {
	stroke-width: var(--bw);
	stroke: var(--pinky-b);
	transition: stroke var(--transition);
}

#clients-images {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: calc(var(--col-n) / 2);
	margin-right: calc(var(--col-n) / 2);
	margin-top: var(--un-lg);
}

#clients-images .ci-item {
	margin: 0 calc(var(--col) / 2);
	overflow: hidden;
	width: calc(100% / 3);
	position: relative;
	display: block;
}

#clients-images .ci-item:not(:nth-child(2)) {width: calc(100% / 6);}

#clients-images .ci-item::after {
	content: '';
	display: block;
	padding-bottom: 100%;
}

#clients-images .ci-item img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: var(--transition-bezier);
}

#clients-images .ci-item:hover img {transform: translate(-50%,-50%) scale(1.1);}

#home-pourquoi {padding: 0;}

#home-pourquoi * {color: var(--white);}

#home-pourquoi .lines {
	top: 0;
	height: 100%;
}

#pourquoi-content {
	border-top-left-radius: var(--col);
	margin-right: var(--cw-n);
	padding-right: var(--cw);
	padding-top: var(--un-xxl);
	padding-bottom: var(--un-xxl);
	position: relative;
	overflow: hidden;
}

#pourquoi-content .lines {
	top: 0;
	height: 100%;
	padding-right: var(--cw);
}

#pourquoi-content .section-content {display: flex;}

#pourquoi-icon {
	width: var(--col);
	position: absolute;
	left: calc(calc(100% / 2) + var(--un-lg));
	z-index: 100;
}

#pourquoi-icon svg {height: auto;}

#pourquoi-icon svg path {fill: var(--white);}

#trap-contact {
	position: absolute;
	width: calc(100% / 6);
	margin-left: var(--col);
	margin-top: var(--un-lg);
}

#form-contact::after {
	content: '';
	display: block;
	position: absolute;
	width: var(--cw);
	height: calc(100% + calc(var(--bw) * 2));
	top: var(--bw-n);
	right: calc(var(--cw-n));
	background-image: url('../img/patterns/pinky-b.png');
	border: var(--bw) solid var(--pinky-b);
	border-right: 0;
}

#rejoindre-pattern {
	height: var(--un-xxl);
	background-image: url('../img/patterns/pinkyalt-b.png');
	width: calc(calc(100% - calc(100% / 6)) + var(--cw) + 1px);
	position: absolute;
	left: var(--cw-n);
	bottom: var(--un-xxl-n);
	border: var(--bw) solid var(--pinkyalt-b);
	border-bottom: 0;
	border-left: 0;
	z-index: 99;
}

#rejoindre-pattern::before, #rejoindre-pattern::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--pinkyalt);
}

#rejoindre-pattern::after {
	background: transparent;
	background-image: url('../img/patterns/pinkyalt-b.png');
}

#home-rejoindre .btn-arrow {
	position: absolute;
	right: calc(calc(100% /6) - var(--un-me));
	bottom: var(--un);
	z-index: 100;
}

#home-rejoindre .btn-arrow:not(:hover) {background: var(--pinkyalt) !important;}

/*** PAGES & ARCHIVES ***/

.page section:first-child .section-title {margin-top: var(--un-xxl);}

.page .section-title h1 {font-weight: 600;}

#page-intro #intro-text h2 {
	font-size: 1.5rem;
	line-height: 1.65rem;
	text-align: justify;
}

#page-intro .btn-arrow {
	position: absolute;
	left: calc(var(--col) - calc(var(--un-sm) + var(--un)));
	bottom: 0;
}

#page-intro .btn-arrow:not(:hover) {background: var(--pinky) !important;}

#page-content {
	width: calc(calc(calc(100% / 3) * 2 - 2px));
	border: var(--bw) solid var(--pinky-b);
	border-left: 0;
	border-right: 0;
	padding: var(--un-lg);
	background: var(--pinky);
	position: relative;
	margin-top: var(--un-xxl);
	margin-left: 1px;
}

#page-contact #form-contact::after {
	content: '';
	display: block;
	position: absolute;
	width: var(--cw);
	height: calc(100% + calc(var(--bw) * 2));
	top: var(--bw-n);
	right: calc(var(--cw-n));
	background-image: url('../img/patterns/pinkyalt-b.png');
	border: var(--bw) solid var(--pinkyalt-b);
	border-right: 0;
}

.realisation .section-content {
	position: relative;
	padding-left: calc(100% / 6);
	padding-right: calc(100% / 3);
	display: flex;
	align-items: center;
}

.realisation .realisation-inner {width: 100%;}

.card.card-info .card-content {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.card.card-info .card-content svg {
	width: var(--un-lg);
	height: var(--un-lg);
}

.card.card-info .card-content svg path {stroke: var(--blacky);}

.card.card-info .card-content span {margin: var(--un-sm) !important;}

.card.card-info .card-content h4 {margin-top: 0 !important;}

.realisation-content {
	background: var(--pinky);
	margin: 1px;
	margin-bottom: -2px;
	padding-top: var(--un);
	padding-bottom: 0;
	border-bottom: var(--bw) solid var(--pinky-b);
}

.pinkyalt .realisation-content {
	background: var(--pinkyalt);
	border-bottom-color: var(--pinkyalt-b);
}

.realisation h3 {
	padding: 0 var(--un);
	margin-bottom: calc(var(--un-me) / 2) !important;
}

.realisation .realisation-missions {
	display: flex;
	flex-wrap: wrap;
	margin: 0px var(--un-sm) !important;
	margin-bottom: var(--un) !important;
}

.realisation .realisation-missions li {
	background: var(--pinky);
	border: var(--bw) solid var(--pinky-b);
	padding: var(--un-sm) var(--un);
	margin: var(--un-sm);
	border-radius: var(--un-lg);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
}

.realisation.pinkyalt .realisation-missions li {
	background: var(--pinkyalt);
	border: var(--bw) solid var(--pinkyalt-b);
}

.realisation .realisation-missions li svg {
	stroke: var(--blacky);
	margin-right: var(--un-sm);
	width: var(--un);
	height: var(--un);
}

.realisation .realisation-gallery {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.realisation .realisation-gallery .rg-item {
	width: calc(16.667% + 2px);
	border: var(--bw) solid var(--pinky-b);
	overflow: hidden;
	margin: -1px;
	position: relative;
}

.realisation.pinkyalt .realisation-gallery .rg-item {border-color: var(--pinkyalt-b);}

.realisation .realisation-gallery .rg-item::after {
	content: '';
	display: block;
	padding-bottom: 100%;
}

.realisation .realisation-gallery .rg-item.a-parallax {
	position: absolute;
	width: calc(calc(100% / 6) + var(--cw));
	right: var(--cw-n);
	z-index: 99;
	margin: 0;
	top: 0;
	border: 0;
}

.realisation .realisation-gallery .rg-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: var(--transition-bezier);
}

.realisation .realisation-gallery .rg-item:hover img {transform: translate(-50%,-50%) scale(1.1);}

.realisation .realisation-image {
	position: absolute;
	width: calc(calc(100% / 6) + var(--cw));
	right: var(--cw-n);
}

.realisation .realisation-image img {height: auto;}

#numbers-404 {
	display: flex;
	align-items: center;
}

#numbers-404 .a-parallax {
	width: calc(100% / 6);
	padding: var(--un);
}

#numbers-404 .a-parallax:first-child {margin-top: calc(var(--un-xxl) + var(--un-lg));}

#numbers-404 .a-parallax:last-child {margin-top: calc(var(--un-xxl) + var(--un));}

#numbers-404 .a-parallax svg path {fill: var(--red);}

#numbers-404 #text-404 {
	width: calc(calc(100% / 2) - 2px);
	padding: 0 var(--un);
	position: relative;
	margin: 0 1px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#numbers-404 #text-404 h1 {
	font-weight: 600;
	margin-bottom: 0 !important;
}

#numbers-404 #text-404 a {margin-top: var(--un);}

/*** POSTS & SINGLES ***/

/*** FOOTER ***/

footer {background: var(--pinkyalt);}

footer * {color: var(--white);}

footer .lines {
	height: 100%;
	top: 0;
}

#footer-content {
	background: var(--blacky);
	border-top-right-radius: var(--col);
	margin-left: var(--cw-n);
	padding-left: var(--cw);
	position: relative;
	overflow: hidden;
	padding-top: var(--un-xxl);
	display: flex;
	flex-wrap: wrap;
	z-index: 100;
}

#footer-content .lines {
	top: 0;
	height: 100%;
	padding-left: var(--cw);
	left: 0;
}

#footer-content .lines span {background: var(--blacky-b);}

#footer-content #footer-left {
	position: relative;
	width: calc(calc(100% / 3) * 2);
}

#footer-logo {
	padding: 0 var(--un);
	display: block;
	width: 50%;
}

#footer-logo path {
	fill: var(--white);
	transition: var(--transition);
}

#footer-logo:hover path {fill: var(--pinkyalt);}

#footer-description {
	margin: 0 calc(calc(100% / 4) + 1px);
	margin-top: var(--un-me);
	margin-bottom: var(--un-sm-n);
	text-align: justify;
	background: var(--blacky);
	padding: var(--un-sm) var(--un);
	position: relative;
}

#footer-description #footer-ruler {
	position: absolute;
	left: var(--col-n);
	width: auto;
	bottom: 0;
	height: 100%;
}

#footer-description #footer-ruler line {
	stroke-width: var(--bw);
	stroke: var(--blacky-b);
	transition: stroke var(--transition);
}

#footer-right ul li {
	padding-left: var(--un-lg);
	position: relative;
}

#footer-right ul li:not(:last-child) {margin-bottom: var(--un-lg);}

#footer-right ul li::before {
	content: '';
	display: block;
	position: absolute;
	background: var(--blacky-b);
	height: var(--bw);
	width: var(--un);
	left: 0;
	top: calc(var(--un-sm) + var(--bw));
}

#footer-right ul li.linkedin::before {top: calc(var(--un) + var(--bw));}

#footer-copyright {
	width: 100%;
	color: var(--white);
	background: var(--blacky);
	border-top: var(--bw) solid var(--blacky-b);
	padding: var(--un);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin: 0 1px;
	margin-top: var(--un-xxl);
}

#footer-copyright * {color: var(--white);}

#scroll-indicator {
	position: fixed;
	width: var(--un-xs);
	height: 100%;
	left: 0;
	top: 0;
	z-index: 999;
	/*border-right: var(--bw) solid var(--red);*/
	pointer-events: none;
}

#scroll-indicator #indicator {
	position: absolute;
	width: 100%;
	background: var(--red);
	top: 0;
	left: 0;
	box-shadow: 0 0 var(--un-lg) 0 var(--red);
}

#scroll-indicator #graduation {
	position: absolute;
	top: 0;
	height: 100%;
	left: var(--un-sm);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#scroll-indicator #graduation div {
	border-top: var(--bw) solid var(--red);
	width: var(--un-sm);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

#scroll-indicator #graduation div span {
	display: block;
	height: 100%;
	width: var(--un-xs);
	border-bottom: var(--bw) solid var(--red);
}

#scroll-indicator #graduation div span:last-child {
	border-bottom: 0;
}

/*** JS ***/

#loader {
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: var(--pinky);
	position: fixed;
	z-index: 99999;
}

#loader .container {height: 100%;}

#loader img {
	width: calc(100% / 3);
	padding: 0 var(--un);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	animation: animLogo 2s;
}

@keyframes animLogo {
	0% {opacity: 0; width: 0%; transform: translate(-50%,150%);}
	50% {opacity: 0; width: 0%; transform: translate(-50%,-50%);}
	100% {opacity: 1; width: calc(100% / 3); transform: translate(-50%,-50%);}
}

#loader .lines span:nth-child(1) {animation: animLine1 2s;}

#loader .lines span:nth-child(2) {animation: animLine2 2s;}

#loader .lines span:nth-child(3) {animation: animLine3 2s;}

#loader .lines span:nth-child(4) {animation: animLine4 2s;}

#loader .lines span:nth-child(5) {animation: animLine5 2s;}

#loader .lines span:nth-child(6) {animation: animLine6 2s;}

#loader .lines span:nth-child(7) {animation: animLine7 2s;}

@keyframes animLine1 {
	0% {height: 0%;}
	30% {height: 0%;}
	100% {height: 100%;}
}

@keyframes animLine2 {
	0% {height: 0%;}
	40% {height: 0%;}
	100% {height: 100%;}
}

@keyframes animLine3 {
	0% {height: 0%;}
	50% {height: 0%;}
	100% {height: 100%;}
}

@keyframes animLine4 {
	0% {height: 0%;}
	60% {height: 0%;}
	100% {height: 100%;}
}

@keyframes animLine5 {
	0% {height: 0%;}
	70% {height: 0%;}
	100% {height: 100%;}
}

@keyframes animLine6 {
	0% {height: 0%;}
	80% {height: 0%;}
	100% {height: 100%;}
}

@keyframes animLine7 {
	0% {height: 0%;}
	90% {height: 0%;}
	100% {height: 100%;}
}

#menu {
	height: 100vh;
	background: var(--red);
	color: var(--white);
	overflow: hidden;
	mix-blend-mode: hard-light;
	backdrop-filter: blur(20px);
}

#menu .lines {
	height: 100%;
	top: 0;
	padding: 0 var(--cw);
}

#menu .lines span {background: var(--red-b);}

#menu .offcanvas-body {
	display: flex;
	align-items: center;
}

#menu .offcanvas-body ul {padding-right: var(--col);}

#menu .offcanvas-body ul li:not(:last-child) {margin-bottom: var(--un);}

#menu .offcanvas-body ul li a {
	color: var(--white);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.75rem;
	padding-left: var(--un-lg);
	position: relative;
	text-decoration: none !important;
	transition: var(--transition-bezier);
}

#menu .offcanvas-body ul li a:hover {padding-left: var(--un-xl);}

#menu .offcanvas-body ul li a::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	height: var(--bw);
	width: var(--un);
	top: 50%;
	transform: translateY(-50%);
	background: var(--red-b);
}

#menu .offcanvas-body ul li a::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: var(--un-lg);
	width: 0%;
	height: var(--bw);
	background: var(--white);
	transition: var(--transition-bezier);
}

#menu .offcanvas-body ul li a:hover::after {
	width: calc(100% - var(--un-lg) - var(--un-lg));
	left: var(--un-xl);
}

#menu .offcanvas-body ul li a span {
	font-weight: 300;
	margin-right: var(--un-sm);
}

#menu #menu-realisations {
	position: absolute;
	width: var(--col);
	height: 100%;
	top: 0;
	right: 0;
	border: var(--bw) solid var(--red-b);
	transition: var(--transition);
	overflow: hidden;
}

#menu #menu-realisations:hover {background: var(--white);}

#menu #menu-realisations span {
	font-size: 2rem;
	color: var(--white);
	transform: translate(-50%,-50%) rotate(90deg);
	position: absolute;
	top: 50%;
	left: 50%;
	text-transform: uppercase;
	letter-spacing: 1rem;
	transition: var(--transition-bezier);
}

#menu #menu-realisations:hover span {
	transform: translate(-50%,-50%) rotate(90deg)scale(1.1);
	color: var(--red);
}

#menu-realisations #menu-ruler {
	position: absolute;
	left: 0;
	width: auto;
	top: var(--un);
	transition: stroke var(--transition);
}

#menu-realisations #menu-ruler line {
	stroke-width: var(--bw);
	stroke: var(--red-b);
}

.tooltip {max-width: 600px;}

.tooltip-arrow::before {display: none;}

.tooltip-inner {
	background: var(--red);
	max-width: 600px;
	text-align: left;
	border-radius: var(--un);
	padding: var(--un-xs) var(--un-sm);
}

#blueimp-gallery {
	background: rgba(35,23,23,.6) !important;
	backdrop-filter: blur(10px) !important;
}

.blueimp-gallery-controls > .title {
	top: var(--un-lg) !important;
	left: var(--un-lg) !important;
	margin: 0 !important;
	text-shadow: none;
	opacity: 1 !important;
}

.blueimp-gallery-controls > .close {
	top: var(--un-lg);
	right: var(--un-lg);
	transition: var(--transition);
}

.blueimp-gallery-controls > .close svg {stroke: var(--white);}

.blueimp-gallery-controls > .prev,
.blueimp-gallery-controls > .next {
	height: calc(var(--un-lg) + var(--un)) !important;
	width: calc(var(--un-lg) + var(--un)) !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center !important;
	transition: var(--transition);
	opacity: 1;
}

.blueimp-gallery-controls > .prev {left: var(--un-lg);}

.blueimp-gallery-controls > .next {right: var(--un-lg);}

.blueimp-gallery-controls > .prev svg,
.blueimp-gallery-controls > .next svg,
.blueimp-gallery-controls > .close svg {
	width: var(--un-lg) !important;
	height: var(--un-lg) !important;
	stroke-width: 1.5px !important;
	margin-right: 0 !important;
}

.blueimp-gallery-controls > .prev svg {margin-left: -3px !important;}

.blueimp-gallery-controls > .next svg {margin-right: -3px !important;}

.blueimp-gallery > .indicator {bottom: var(--un-lg);}

.blueimp-gallery > .indicator > li {
	width: var(--un-lg);
	height: var(--un-lg);
	border-radius: var(--un-lg);
	box-shadow: none;
	transition: var(--transition);
	border: var(--bw) solid transparent;
	background-size: cover;
}

.blueimp-gallery > .indicator > li.active {border-color: var(--white);}

.gdpr_lightbox {
	background: rgba(35,23,23,.6) !important;
	backdrop-filter: blur(10px) !important;
}

#moove_gdpr_cookie_info_bar {
	border: 0 !important;
	padding: var(--un) !important;
	background: transparent !important;
	backdrop-filter: blur(10px);
	border: var(--bw) solid var(--blacky) !important;
	margin: var(--un-lg) !important;
	width: calc(100% - var(--un-xl)) !important;
	border-radius: var(--un-xl) 0 0 var(--un-xl) !important;
	font-family: 'sofia-pro', sans-serif !important;
	position: fixed !important;
	bottom: 0 !important;
	display: flex;
	top: initial !important;
	left: initial !important;
	border-radius: 100px !important;
	justify-content: center !important;
	transform: none !important;
	z-index: 500;
}

#moove_gdpr_cookie_info_bar * {font-family: 'sofia-pro', sans-serif !important;}

#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p {
	margin: var(--un-sm) 0 !important;
	font-weight: 500 !important;
	color: var(--blacky) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p:first-child {margin-top: 0 !important;}

#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p:last-child {margin-bottom: 0 !important;}

#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p span {font-weight: 600 !important;}

#moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p span:hover {color: var(--success) !important;}

.gdpr_lightbox,
.gdpr_lightbox * {font-family: 'sofia-pro', sans-serif !important;}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content {border-radius: 0 !important;}

.gdpr_lightbox .moove-gdpr-tab-nav {
	border-radius: 100px !important;
	transition: var(--transition);
}

.gdpr_lightbox .moove-gdpr-tab-nav:hover {
	background: var(--blacky) !important;
	color: var(--white) !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main h3.tab-title, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main span.tab-title {color: var(--blacky) !important;}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider:after,
#moove_gdpr_cookie_modal .cookie-switch .slider:after,
#moove_gdpr_cookie_modal .switch .cookie-slider:after,
#moove_gdpr_cookie_modal .switch .slider:after {color: var(--error) !important;}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider,
#moove_gdpr_cookie_modal .cookie-switch .slider,
#moove_gdpr_cookie_modal .switch .cookie-slider,
#moove_gdpr_cookie_modal .switch .slider {background: var(--error) !important;}

#moove_gdpr_cookie_modal .cookie-switch input:checked+.cookie-slider,
#moove_gdpr_cookie_modal .cookie-switch input:checked+.slider,
#moove_gdpr_cookie_modal .switch input:checked+.cookie-slider,
#moove_gdpr_cookie_modal .switch input:checked+.slider {background: var(--success) !important;}

#moove_gdpr_cookie_modal .cookie-switch input:checked+.cookie-slider:after,
#moove_gdpr_cookie_modal .cookie-switch input:checked+.slider:after,
#moove_gdpr_cookie_modal .switch input:checked+.cookie-slider:after,
#moove_gdpr_cookie_modal .switch input:checked+.slider:after {color: var(--success) !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-infobar-close-btn.moovegdpr-arrow-close:after,
#moove_gdpr_cookie_info_bar .moove-gdpr-infobar-close-btn.moovegdpr-arrow-close:before,
.gdpr-icon.moovegdpr-arrow-close:after, .gdpr-icon.moovegdpr-arrow-close:before,
i.moovegdpr-arrow-close.moovegdpr-arrow-close:after,
i.moovegdpr-arrow-close.moovegdpr-arrow-close:before {width: 3px !important;}

#moove_gdpr_cookie_modal .mgbutton,
#moove_gdpr_cookie_info_bar .mgbutton {
	padding: calc(var(--un-xs) + var(--un-sm)) var(--un-me) !important;
	box-shadow: none !important;
	border-width: var(--bw) !important;
	font-size: 1rem !important;
}

#moove_gdpr_cookie_info_bar .mgbutton {background: var(--success) !important;}

#moove_gdpr_cookie_info_bar .mgbutton:hover {
	background: #dde7c7 !important;
	color: var(--success) !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-close .gdpr-icon {border-width: 1px !important;}

#moove_gdpr_cookie_modal .mgbutton:hover,
#moove_gdpr_cookie_modal .moove-gdpr-modal-close .gdpr-icon:hover {background: var(--pinky) !important;}

#moove_gdpr_save_popup_settings_button {
	height: calc(var(--un-lg) + var(--un)) !important;
	max-width: calc(var(--un-lg) + var(--un)) !important;
	left: var(--un) !important;
	bottom: var(--un) !important;
	background: var(--blackyalt) !important;
	padding: var(--un-sm) !important;
	transition: var(--transition);
}

#moove_gdpr_save_popup_settings_button:hover {
	background: var(--success) !important;
	max-width: 500px !important;
}

#moove_gdpr_save_popup_settings_button .moove_gdpr_text {
	text-transform: none !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	font-family: 'sofia-pro', sans-serif !important;
}

.moove_gdpr_icon svg {display: none;}

.moove_gdpr_icon::after {
	content: '🍪';
	height: 45px;
	display: block;
	transition: var(--transition);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon {border-width: var(--bw) !important;}

#moove_gdpr_save_popup_settings_button:hover .moove_gdpr_icon::after {transform: rotate(360deg);}

/*** CHEATS ***/

.margin-un {margin: var(--un) 0 !important;}
.margin-t-un {margin-top: var(--un) !important;}
.margin-b-un {margin-bottom: var(--un) !important;}
.margin-t-un-xs {margin-top: var(--un-xs) !important;}
.margin-t-un-sm {margin-top: var(--un-sm) !important;}
.margin-t-un-me {margin-top: var(--un-me) !important;}
.margin-t-un-lg {margin-top: var(--un-lg) !important;}
.margin-t-un-xl {margin-top: var(--un-xl) !important;}
.margin-t-un-xxl {margin-top: var(--un-xxl) !important;}
.margin-b-un-xs {margin-bottom: var(--un-xs) !important;}
.margin-b-un-sm {margin-bottom: var(--un-sm) !important;}
.margin-b-un-me {margin-bottom: var(--un-me) !important;}
.margin-b-un-lg {margin-bottom: var(--un-lg) !important;}
.margin-b-un-xl {margin-bottom: var(--un-xl) !important;}
.margin-b-un-xxl {margin-bottom: var(--un-xxl) !important;}

.no-margin {margin: 0 !important;}
.no-margin-t {margin-top: 0 !important;}
.no-margin-b {margin-bottom: 0 !important;}

.no-padding {padding: 0 !important;}
.no-padding-t {padding-top: 0 !important;}
.no-padding-b {padding-bottom: 0 !important;}