/* BASE – DESIGN SYSTEM */
 @font-face {
    font-family: 'Bebas';
    src: 
         url('../fonts/Bebas-Regular.woff') format('woff'),
         url('../fonts/Bebas-Regular.ttf') format('truetype');
         font-weight: 400;
         font-style: normal;
  }

 :root {
     width: 100vw;
    --blue: #0808f8;
    --gray: #F2F9FD;
    --white: #fff;
    --black: #0a0a0a;
    --font-Bebas: 'Bebas', Helvetica, sans-serif;
    --font-General: 'GeneralSans-Variable', 'GeneralSans-Regular', Helvetica, sans-serif;
    --top-left: polygon(0% 0%, 100% 0%, 0% 100%);
    --top-right: polygon(100% 0%, 100% 100%, 0% 0%);
    --bottom-right: polygon(100% 100%, 0% 100%, 100% 0%);
    --bottom-left: polygon(0% 100%, 0% 0%, 100% 100%);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: 16px;
    font-family: var(--font-General);
    font-feature-settings: 'ss01' on;
    color: var(--black);
    background-color: var(--gray);
    overflow-x: hidden;
}

@media screen and (min-width: 844px) {
    body { 
        font-size: 18px;
    }
}

body * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    /* transition: all .2s; */
    /* outline: 1px solid var(--blue); */
}

hr {
    border: 1px solid var(--blue);
    margin: 1em  0;
}

img {
    max-width: 100%;
    height: auto;
}


/* LOGOS */

.logo {
    display: inline-block;
    position: relative;
    height: 4em;
}

.logo-VD {
    padding-right: 1em;
    margin-right: 1em;
    border-right: 1px solid var(--blue);
}


/* TEXTES DE BASE*/

h1, h2 {
    font-family: var(--font-Bebas);
    margin: 1rem 0 1rem;
    color: var(--blue);
    text-transform: uppercase;
    -webkit-text-stroke-width: .02em;
    -webkit-text-stroke-color: inherit;
}

h3, h4 {
    font-family: var(--font-General);
    margin: 1rem 0 .2em;
    color: var(--blue);
}

p {
    font-family: inherit;
    margin: .2em 0 1em;
    color: inherit;
}

ul, ol {
    padding-left: 1.5em;
    margin: .2rem 0 .5em;
    font-weight: 500;
}

.no-style-list {
    list-style: none;
    padding-left: 0;;
}

label {
    font-weight: 500;
    color: var(--blue);
}

h1 { font-size:    4em;  font-weight: 400;  line-height:   100%;  letter-spacing: -.02em; }
h2 { font-size:    3em;  font-weight: 400;  line-height:   100%;  letter-spacing: -.025em; }
h3 { font-size: 1.75em;  font-weight: 600;  line-height:   125%;  letter-spacing: -.01em; }
h4 { font-size: 1.25em;  font-weight: 600;  line-height:   150%;  letter-spacing: -.01em; }
p  { font-size:    1em;  font-weight: 500;  line-height:   150%;  letter-spacing: normal; }
b, strong {font-weight: 600; letter-spacing: -.01em;}

@media screen and (min-width: 844px) {
    h1 { font-size:  6.5em; }
    h2 { font-size:  5em; }
    h3 { font-size: 1.75em; }
    h4 { font-size: 1.25em; }
}


/* LIENS ET BOUTONS */

.link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--blue);
    cursor: pointer;
    z-index: 1;
}

.btn {
    display: inline-flex;
    position: relative;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 0.3125em;
    padding: 1rem 1.5em;
    cursor: pointer;
    vertical-align: middle;
    margin: .5rem 0 0 0;
    transition: all .4s;
}

.btn-blue {
    background-color: var(--blue);
    color: var(--white);
}

.btn-black {
    background-color: var(--black);
    color: var(--white);
}

.btn-white {
    background-color: var(--white);
    color: var(--blue);
}

.btn-transparent {
    color: var(--blue)
}

.btn-log::after {
    content: "";
    display: inline-block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    padding: 0 0 0 .5em;
    background: var(--bg-image);
    background-size: contain;
}

.btn-fixed {
    position: fixed;
    right: -5em;
    line-height: 100%;
    font-weight: 400;
    border-radius: 0.3125em 0 0 0.3125em;
    transition: all .4s;
    z-index: 10;
}

.btn-fixed::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 1em;
    padding: 0 2em 0 0;
    background: var(--bg-image);
    background-size: 1.5em;
}

.btn-log:hover::after {
    filter: grayscale(1) brightness(10)
}

.btn-top:hover::before {
    filter: grayscale(1) brightness(.1);
}

input, select {
    border: 2px solid var(--blue);
    border-radius: 5px;
    padding: .3em;
    font-family: var(--font-General);
    background-color: var(--gray);
    font-weight: 500;
    font-size: 1em;
}

input[type=checkbox] {
    width: 30px;
    border: 2px;
}


/* HOVER LIENS ET BOUTONS */

.link:hover, .btn-transparent:hover {
    color: var(--blue);
}

.link::before,
.link::after {
	content: "";
	position: absolute;
	width: 50%;
	height: .15em;
	background-color: var(--blue);
	bottom: -.1em;
	transition: transform 0.25s ease;
	z-index: 0;
}

.link::before {
	left: 0;
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
	transform-origin: bottom left;
}

.link::after {
	right: 0;
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
	transform-origin: bottom right;
}

.link:hover::before,
.link:hover::after {
	transform: scaleX(1);
	-webkit-transform: scaleX(1);
}

.btn-blue:hover {
    background-color: var(--black);
    color: var(--white);
}

.btn-black:hover {
    background-color: var(--white);
    color: var(--black);
}

.btn-white:hover {
    background-color: var(--blue);
    color: var(--white);
}

.btn-fixed:hover {
    right: 0 !important;
}

.btn-top { 
    right: -10em;
    bottom: 8em;
}

.btn-chat {
    bottom: 3em;
}

/* ELEMENTS GRAPHIQUE */

.mtn-simple {
    width: 10em;
    height: 5em;
    aspect-ratio: 2/1;
    -webkit-aspect-ratio: 2/1;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.mtn-inverted {
    width: 10em;
    height: 5em;
    aspect-ratio: 2/1;
    -webkit-aspect-ratio: 2/1;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.mtn-square {
    width: 5em;
    height: 5em;
    aspect-ratio: 1/1;
    -webkit-aspect-ratio: 1/1;
}

.mtn-top-left {
    clip-path: var(--top-left);
}

.mtn-top-right {
    clip-path: var(--top-right);
}

.mtn-bottom-right {
    clip-path: var(--bottom-right);
}

.mtn-bottom-left {
    clip-path: var(--bottom-left);
}

.mtn-blue {
    background-color: var(--blue);
}

.mtn-black {
    background-color: var(--black);
}

.mtn-striped {
    background: url('../img/Stripes.png') fixed;
    background-size: 3em;
    background-color: var(--gray);
}

.mtn-dotted {
    background: url('../img/Dots.png') fixed;
    background-size: 3em;
    background-color: var(--gray);
}

.mtn-image {
    background: linear-gradient(0deg, transparent 60%, var(--blue) 100%), var(--bg-image);
    background-size: cover;
    background-blend-mode: darken, normal;
}

@media screen and (max-width: 844px) {
    .mtn-striped, .mtn-dotted {
        background-attachment: scroll;
    }
    .center {
        text-align: center;
        align-self: center;
    }
}

/* GRILLE */

.flex {
    display: flex;
}

.flex-col-to-row {
    display: flex;
    flex-direction: column;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.wrap {
    flex-wrap: wrap;
}

.none {
    display: none;
}

@media screen and (min-width: 844px) {
    .flex-col-to-row {
        flex-direction: row;
    }

    section, footer {
        margin-top: 1em;
    }
}

/* TRANSITIONS */

.ts-small {
    transition: all .2s ease;
}

.ts-medium {
    transition: all .3s ease;
}

.ts-big {
    transition: all .4s ease;
}

/* ANIMATIONS */
@media screen and (min-width: 844px) {

.fade-up-1 {
    animation: fadeUp 1s ease .5s 1 both;
}

.fade-up-2 {
    animation: fadeUp 1s ease .7s 1 both;
}

.fade-up-3 {
    animation: fadeUp 1s ease .8s 1 both;
}

.fade-up-4 {
    animation: fadeUp 1s ease .9s 1 both;
}

.fade-up-text {
    animation: fadeUpSpecial .8s ease .5s 1 both;
}

.fade-up-pass {
    animation: fadeUpSpecial 1s ease 1.8s 1 both;
}
    
}

@keyframes fadeUp {
    0% {bottom: -70em;}
    100% {bottom: 0;}
}

@keyframes fadeUpSpecial {
    0% {transform: translate(0, 3em); opacity: 0;}
    100% {transform: translate(0, 0%); opacity: 1;}
}

/* ---------------------------------------NAVIGATION--------------------------------------- */

#navigation {
    width: 100%;
    padding: 1.75em calc((100vw - 1592px)/2);
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--gray);
    backdrop-filter: blur(2px);
    z-index: 99;
    font-size: 18px;
    gap: 1.75em;
}

.nav-mobile {
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    padding-left: 1.75em;
}

.nav-logos {
    justify-content: space-between;
    z-index: 1;
}

.nav-list {
    transform: translate(100%, 6em);
    position: fixed;
    width: 100%;
    max-height: 80vh;
    top: 0;
    right: 0;
    flex: 1 0;
    padding: 1.75em;
    justify-content: center;
    gap: 1.75rem;
    align-items: center;
    text-align: center;
    list-style: none;
    margin: 0;
    background-color: var(--gray);
    overflow-y: scroll;
}

.nav-list.open {
    transform: translate(-0%, 6em);
}

#navigation .btn {
    margin-top: 0;;
}

#nav-burger {
    margin-right: 1.75em;
    cursor: pointer;
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%);
    z-index: 1;
}

#nav-burger.open {
    background-color: #0008f8;
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
}

#nav-burger.open .burger-line {
    height:10px;
}


.burger-line {
    width: 48px;
    height: 6px;
    background-color: var(--blue);
    margin-bottom: 5px;
}

.burger-line:last-of-type {
    margin-bottom: 0px;
}

@media screen and (min-width: 844px) {
    #navigation {
        align-items: center;
        padding: 0 calc((100vw - 1592px)/2);
    }

    .nav-list {
        transform: translate(0) !important;
        position: relative;
        justify-content: flex-end;
    }

    .mobile-only {
        display: none;
    }

}

@media screen and (max-width: 844px) {
    .desktop-only {
        display: none;
    }
}

/* ----------------------------FOOTER---------------------------- */

#footer {
    width: 100%;
    margin-top: 108px;
}

.footer-logo {
    padding-left: 1.75em;
}

.footer-links {
    background: linear-gradient(to top, var(--blue) 80%, transparent 80%);
    padding: 1.75em;
}

#footer h2 {
    font-size: 2.5em;
    letter-spacing: -0.015em;
}

#footer h3 {
    font-family: var(--font-Bebas);
    font-weight: 400;
    -webkit-text-stroke-width: 0.03em;;
    letter-spacing: -0.015em;
    color: var(--white);
    margin-top: 0;
    margin-bottom: .875rem;
    text-transform: uppercase;
}

#footer ul {
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: .875em;
    margin-bottom: 1.75em;
}

#footer .socials {
    gap: 1.75em;
}

#footer .link, #footer p {
    color: var(--white);
}

#footer .link::before, #footer .link::after {
    background-color: var(--white);
}

#footer p {
    margin-bottom: 0;
}

@media screen and (min-width: 844px) {
    .footer-logo {
        padding: 1.75em;
        justify-content: flex-start;
        flex: 1;
    }

    .empty {
        flex: 7;
    }

    .footer-logo > div:nth-child(2) {
        flex: 5;
    }

    .footer-links {
        align-items: flex-end;
        background: var(--blue);
        flex: 1;
    }

    .footer-cta {
        position: relative;
        flex: 7;
    }

    .footer-cta img {
        position: absolute;
        bottom: 108px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 600px;
    }

    .footer-nav {
        flex: 5;
    }
}