@CHARSET "UTF-8";

:root {
	
	--blanc:#ffffff;
	--rouge:#e73532;	
	--bleu:#1c1b36;
	--ease:cubic-bezier(0.165, 0.84, 0.44, 1);
	--ease2:cubic-bezier(.215,0,.355,1);
	
}

a {text-decoration:none;}

body, html {margin:0; padding:0; background:var(--bleu);  font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight:400; font-style: normal;}
body {color:var(--blanc); background:var(--bleu); overflow:hidden;}

.underline a {position:relative; white-space: nowrap; display:inline-block; color:var(--rouge);}
.underline a:before {content:''; position:absolute; bottom:-10%; left:0; width:100%; min-height:1px; height:1px; transform-origin:left; transform:scaleX(1); 
transition:transform .75s cubic-bezier(0.165, 0.84, 0.44, 1); background-color:var(--rouge);}
.underline a:hover::before {transform-origin:right; transform:scaleX(0);}

body {font-size:1.1rem; line-height:1.5;}
.font-s {font-size:90%;}
h1, h2, h3 {margin:0;}
.height-100 h2 {font-size:1.9rem;}
.height-100 h3 {font-size:1.4rem;}
.article h1 {font-size:2.8vw; font-weight:600;}
.article h2 {font-size:1.2rem; font-weight:600; margin-top:2rem; color:var(--rouge);}
.grid.col-2 div h2:first-child {margin-top:0;}

section {position:relative;}

.grid {display:grid;}
.col-2 {grid-template-columns:1fr 1fr;}
.wrapper-bottom .col-2 {grid-gap:7vw;}

.cls-1 {fill:var(--blanc);}
.cls-2 {fill:var(--rouge);}

.height-100 {height:100vh; width:100vw; overflow:hidden;}
.height-100 .wrapper {z-index:3; position:relative;}
.wrapper {padding:10vw 8vw 8vw 8vw;}
.wrapper-bottom {z-index:5; position:relative; padding:10vw 8vw 3rem 8vw;}

.header {z-index:10; position:absolute; opacity:0; top:1.5rem; transform:scale(0.98) translateX(-50%); left:50%;
transition:1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter;
transition-delay:.1s; filter: blur(10px);}
.ready .header {opacity:1; top:3rem; transform:translateX(-50%); filter: blur(0);}
.logo svg {width:390px;}

.noise {z-index:2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: .1;}

.background-sky {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center center; z-index:1;
background-image:url('img/design/background-sky.jpg'); will-change: transform; transform:scale(1.2); opacity:0; transition:.5s var(--ease2); }
.ready .background-sky {opacity:.35; transform:none;}

.text {will-change: transform, opacity;}

.article {height: calc(100% - 10vw - 3rem);}

.article h1, .article .col-2, .copyright {opacity: 0; transform: translateY(1.5rem) scale(0.98); filter: blur(10px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter;}

.article h1 {transition-delay: 0.15s;}
.article .col-2 {transition-delay: 0.3s;}
.copyright {transition-delay: 0.45s;}

.ready .article h1, .ready .article .col-2, .ready .copyright {opacity: 1; transform: translateY(0) scale(1); filter: blur(0);}

.article {display:flex; flex-direction:column; align-items: center; grid-gap:6vw; justify-content: space-between;}
.article h1 {color:var(--rouge); margin-bottom:3rem;}
.article p {margin-bottom:1rem;}
.article .col-2 div p:last-child {margin-bottom:0;}

.copyright {width:100%; display:flex; justify-content:space-between; grid-gap:3rem;}


@media screen and (max-width:1790px) {
	
	body {font-size: 1rem; line-height: 1.4;}
	.height-100 h2 {font-size: 1.5rem;}
	.height-100 h3 {font-size: 1.2rem;}
	
	.logo svg {width: 340px;}
	
	.height-100 {height:auto;}
	body {overflow: auto;}
	.article {height: auto;}
	
	
}

@media screen and (max-width:1390px) {

	.wrapper-bottom {padding: 13vw 8vw 3rem 8vw;}
	
}

@media screen and (max-width:1050px) {
	
	.article h1 {font-size: 1.8rem; font-weight: 600; line-height: 1.2;}
	.article h2 {font-size: 1.5rem;}

	.wrapper-bottom {padding: 11rem 4rem 4rem 4rem; height: auto;}
	.col-2 {grid-template-columns: 1fr; grid-gap: 2rem;}
	
	.wrapper-bottom .col-2 {grid-gap: 4rem;}
	
}

@media screen and (max-width:790px) {

	body {font-size: .9rem;}
	.article h2 {font-size: 1.2rem;}
	.article h1 {margin-bottom:2rem;}

	.logo svg {width: 300px;}
	.wrapper-bottom {padding: 10rem 3rem 3rem 3rem;}
	.article {grid-gap:3rem;}
	
	.height-100 h2 {font-size: 1.2rem;}
	.height-100 h3 {font-size: 1rem;}
	
	.text {text-align:center;}
	.copyright {align-items: center; grid-gap: 1rem; flex-direction: column;}
	
}

@media screen and (max-width:590px) {
	
	.ready .header {top: 2rem;}
	.wrapper-bottom {padding:9rem 2rem 4rem 2rem;}
	
}