@charset "UTF-8";

:root {
	--light: #fff;
	--dark: black;
	--medium: #f5f5f5;
	--accent: #5926FF;
	--hnav: 84px;
	--font01: 'Epilogue', 'helvetica', 'Arial', sans-serif;
	--font02: 'SpaceGrotesk', 'Space Grotesk', 'avenir','MS Gothic', sans-serif;
}

* {
	margin: 0; 
	padding: 0;
	text-decoration: none;
	border: none;
	box-shadow: none;
	outline: none;
	flex-wrap: wrap;
	box-sizing: border-box;
	font-style: normal;
	list-style-type: none;
}

body { 
	height: 100vh;
	width: 100vw;
	height: 100%;
	width: 100%;
	color: var(--dark);
	background: var(--light);
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
}

::selection {
	background: var(--dark);
	color: var(--accent);
}

h1, h2, h3 {
	font-family: var(--font01);
}

h4, h5, h6 { 
	font-family: var(--font02);
}

h1 { 
	font-size: 3em;
	font-weight: 700;
	line-height: 1.125;
}

h2 {
	font-size: 2em;
	font-weight: 600;
	line-height: 1.5;
}

h3 {
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.25;
}

h4 {
	font-size: 3em;
	font-weight: 700;
}

h5 {
	font-size: 2em;
	font-weight: 600;
}

h6 {
	font-size: 1.5em;
	font-weight: 600;
}

footer,
article {
	z-index: 35;
	position: relative;
}

section { display: flex; }

.top {
	top: 0;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	align-self: flex-start;
	margin: 0 auto auto auto;	
}

.bottom {
	bottom: 0;
	justify-content: flex-end;
	align-content: flex-end;
	align-items: flex-end;
	align-self: flex-end;
	margin: auto auto 0 auto;
}

.left {
	left: 0;
	justify-content: flex-start;
	margin: auto auto auto 0;
}

.right {
	right: 0;
	justify-content: flex-end;
	margin: auto 0 auto auto;
}

.center {
	justify-content: center;
	margin: 0 auto;
}

.txtcenter {
	text-align: center;
}

.txtleft {
	text-align: left;
}

.txtright {
	text-align: right;
}

.masonry {
	display: inline-flex;
	justify-content: space-between;
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ SPRITE ⏤⏤⏤⏤⏤⏤⏤⏤ */

.sprite {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left center;
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ LINKS ⏤⏤⏤⏤⏤⏤⏤⏤ */

p a,
p a:visited {
	color: var(--accent);
	text-decoration: underline;
}

p a:hover,
p a:active {
	color: var(--accent);
	text-decoration: none;
}

footer a,
footer a:hover,
footer a:visited {
	color: var(--dar);
	text-decoration: underline;
}

footer u,
footer a:hover {
	text-decoration: none;
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ BUTTONS ⏤⏤⏤⏤⏤⏤⏤⏤ */

.button01,
.button02 {
	display: inline-flex;
} 

.button01 {
	display: inline-block;
	padding: 1em 2em;
	text-align: center;
	font-family: var(--font01);
	font-weight: 400;
	font-size: 1.25rem;
	background-color: var(--dark);
	transform: rotate(0);
	transition: ease 50ms;

}

.button01,
.button01:hover,
.button01:visited {
	color: var(--light) !important;
}

.button01:hover {
	background-color: var(--accent);
}

.button01,
.button01:hover,
.button01:active,
.button01:visited {
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
}

.button02 {
		padding: 0.5em 1em;
		text-align: center;
		font-family: var(--font01);
		border: 1px solid var(--dark);
		border-radius: 100px;
}

.button02,
.button02:visited {
	color: var(--dark);
}

.button02:hover,
.button02:active
 {
	background-color: var(--dark);
	color: var(--light) !important;
}

.button01:nth-child(1):hover { transform: rotate(2deg); }

.button01:nth-child(2):hover { transform: rotate(-2deg); }

.button01:nth-child(3):hover { transform: rotate(2deg); }

.button01:nth-child(4):hover { transform: rotate(-2deg); }

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ LOADER ⏤⏤⏤⏤⏤⏤⏤⏤ */


.loader {
	top: 0;
	left: 0;
	z-index: 200;
	height: 100vh;
	width: 100vw;
	position: fixed;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	background: #070314;
	
}

.simpleloader {
	color: var(--light);
	font-style: var(--font02);
	font-size: 6em;
}

.simpleloader::after {
	animation: simpleloader 600ms infinite;
	content: "";
}

@keyframes simpleloader {
	0% { content: "✌︎"; }
	15% { content: "✧"; }
	30% { content: "✐"; }
	45% { content: "✍︎"; }
	60% { content: "✄"; }
	75% { content: "♕"; }
	100% { content: "✌︎"; }
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ NAV ⏤⏤⏤⏤⏤⏤⏤⏤ */

nav {
	top: 0;
	z-index: 150;
	position: fixed;
	display: flex;
	justify-content: center;
	height: var(--hnav);
	font-family: var(--font02);
}

#topnav { 
	transition: color, background, ease-out 250ms;
}


#topnav ul {
	height: 100%;
	color: inherit;
	font-size: 1.05em;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	display: flex;
}

#topnav a { 
	color: var(--dark);
}

#topnav ul {
	border-bottom: solid 1px var(--dark);
	border-color: var(--dark);
}

#topnav ul > .menu {
	display: flex;
	gap: 3em;
}


#topnav ul li {
/*	width: 5em;*/
}


#topnav .menu .lang svg {
	height: 1em;
	width: 1em;
}

#topnav .menu .nyd svg {
	height: 2em;
	width: 2em;
}



#topnav ul li a {
	display: box;
	color: auto;
	rotate: 0;
	transform: rotate(0) scale(1);
	transition: font-weight, transform, ease-in 100ms;
}

#topnav li {
	transition: font-weight, transform, ease-in 50ms;
}


#topnav .menu svg {
	fill: var(--dark);
}

#topnav ul li:hover a {
	font-weight: 700;
}

#topnav li:nth-child(1):hover {
	transform: rotate(-4deg) scale(1.2);
}

#topnav .menu li:nth-child(2):hover,
#topnav li:nth-child(4):hover {
	transform: rotate(-4deg) scale(1.2);
}

#topnav .menu li:nth-child(1):hover,
#topnav .menu li:nth-child(3):hover {
	transform: rotate(4deg) scale(1.2);
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ COOKIES ⏤⏤⏤⏤⏤⏤⏤⏤ */

#cookies {
	z-index: 50;
	position: fixed;
	bottom: 0;
	padding: 1em 0;
	word-spacing: 0.05em;
	font-family: var(--font01);
	background-color: var(--light);
	border-top: solid 1px var(--dark);
}

#cookies div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
}

#cookies .button02 {
	margin: auto 0.5em 0 1em;
}

#cookies .coucou {
	margin: 0 1.5em 0 0;
	font-size: 1.5em;
}

#cookies .coucou > em {
	position: absolute;
	animation: coucou 500ms steps(1) infinite;
}

@keyframes coucou {
	0% {transform: rotate(0deg);
	}

	50% {transform: rotate(60deg);
	}

	100% {transform: rotate(0deg);
	}
}


/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ ABOUT ⏤⏤⏤⏤⏤⏤⏤⏤ */

#about {
	padding: calc(var(--hnav)*1.25) 0;
}


#about p {
	line-height: 1.5;
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ RESUME ⏤⏤⏤⏤⏤⏤⏤⏤ */

#resume {  }

.cv-nav {
	display: flex;
	justify-content: space-between;
	padding: 2em 0 3em 0;
}

.resume {  display: grid; row-gap: 1em;  }

.resume,
.resume article {
	grid-gap: 1em;
}

.resume {
	flex-direction: column;
}

.resume article {
	display: grid; grid-template-columns: 4fr 2fr 1fr;
	justify-content: space-between;
}

.resume article div { }

.resume article div:nth-child(1) { }

.resume article div:nth-child(2) { }

.resume article div:nth-child(3) { text-align: right; }

#resume a { color: var(--link); }


/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ WORK ⏤⏤⏤⏤⏤⏤⏤⏤ */

#work {
	display: flex;
	padding: calc(var(--hnav)*1.5) 0;
}

/*.portfolio::before {
	content: '';
	width: 0;
	padding-bottom: 100%;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

.portfolio:first-child {
		grid-row: 1 / 1;
		grid-column: 1 / 1;
}*/

.portfolio {
	/*display: grid;*/
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: 3vw;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 auto;
}


.tile {
	color: var(--dark);
	overflow: hidden;
	width: 280px;
	height: 350px;
	transform: translateY(0);
	transition: transform ease 200ms;
}

.tile > div {
	position: absolute;
	padding: 40px;
}

.tile:hover, 
.tile:active {
	transform: translateY(-8px);
}

.tile.sprite {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left center;
}

.tile:hover, .tile:active {
	animation: preview 2000ms steps(24) infinite;
}

@keyframes preview {
	0% { background-position-x: 0% }
	50% { background-position-x: 100% }
	100% { background-position-x: 0% }
}

.tile h5 {
	line-height: 0.9;
	margin-top: 5px;
}


.lmstp { 
	background: #FF9A68;
	background-image : url('../anims/tile_2019_louemoistp.png');
}


.malaise { 
	background: #DDD3FF;
	background-image : url('../anims/tile_2019_malaise.png');
}


.fabulab { 
	background: #f5f5f5;
	background-image : url('../anims/tile_2018_fabulab.png');
}

.pops { 
	background: #fef6ec;
	/*background: #faf5f0;*/
	/*background: #fffaf5;*/
	background-image : url('../anims/tile_2018_pops.png');
}

.arti {
	background-color: #efeeff;
	background-image : url('../anims/tile_2018_arti.png');
}

.fnfa {
	background-color: #d0f6ee;
	background-image : url('../anims/tile_2018_fnfa.png');
}

.velodroom {
	background: #b3cdfc;
	background-image : url('../anims/tile_2015_velodroom.png');
}

.cubique { 
	background: #ffefaa;
	background-image : url('../anims/tile_2017_cubique.png');
}

.c4d {
	background-color: #FFD5AA;
	background-image : url('../anims/tile_2017_c4d.png');
}

.divers {
	background-color: var(--medium);
	background-image : url('../anims/tile_2016_nomade.png');
}

/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ FOOTER ⏤⏤⏤⏤⏤⏤⏤⏤ */

footer {
	bottom: 0;
	font-family: var(--font01);
	padding: calc(var(--hnav)*1.5) 0;
	line-height: 1.25;
	background-color: var(--medium);
}

footer section {
	justify-content: space-between;
}

footer section div {
	margin: auto;
}

.at::after {
	content: "fr" !important;
}


/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ LAYOUT ⏤⏤⏤⏤⏤⏤⏤⏤ */



[class*="h"] {  }

.h100 { height: 100vh; }
.h95 { min-height: 95vh; }
.h90 { min-height: 90vh; }
.h85 { min-height: 85vh; }
.h80 { min-height: 80vh; }
.h75 { min-height: 75vh; }
.h70 { min-height: 70vh; }
.h65 { min-height: 65vh; }
.h60 { min-height: 60vh; }
.h50 { min-height: 50vh; }
.h40 { min-height: 40vh; }
.h30 { min-height: 30vh; }
.h25 { min-height: 25vh; }
.h20 { min-height: 20vh; }
.h10 { min-height: 10vh; }
.hfull { min-height: 100%; }


[class*="size-"] {  }

.w1 { width: 6.58333333333333%; }
.w2 { width: 15.416666666666667%;  }
.w3 { width: 23.875%; }
.w4 { width: 32.333333333333333%; }
.w5 { width: 40.416666666666663%; }
.w6 { width: 49.25%; }
.w7 { width: 57.7083%; }
.w8 { width: 66.166666666666664%; }
.w9 { width: 74.625%; }
.w10 { width: 83.083333333333333%; }
.w11 { width: 91.541666666666667%; }
.w12 { width: 100%; min-width: 100%; }
.w100 { width: 100vw; }




/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ RESPONSIVE ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ */
	

@media screen and (min-width: 2200px) { 

	body { 
		font-size: 18px;
	}

	.tile {
		width: 400px;
		height: 500px;
	}
}

@media screen and (min-width: 1440px) {  }

@media screen and (max-width: 1280px) {
	
	.portfolio {
		grid-gap: 5vw;
		grid-template-columns: repeat(2, 1fr);
	}

	.tile {
		width: calc(280px * 1.25);
		height: calc(350px * 1.25);
	}
}

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

	:root {
		--hnav: 72px;
	}

	.portfolio {
		grid-gap: 5vw;
	}

	footer section {
		flex-direction: column;
	}

	footer section > div {
		text-align: center;
		margin: 0 0 2em 0;
	}
}


@media screen and (max-width: 840px) {
	
	.portfolio {
		grid-gap: 1vw;
		grid-template-columns: repeat(1, 1fr);
	}

	.tile {
		width: calc(280px * 1.25);
		height: calc(350px * 1.25);
	}
}


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

	.w1, 
	.w2,
	.w3,
	.w4,
	.w5,
	.w6,
	.w7,
	.w8,
	.w9 {
		width: 91.541666666666667%;
	}
 
	.w10,
	.w11 {
		min-width: 91.541666666666667%;
	}
	
	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2rem;
	}


	h3 {
		font-size: 1.5rem;
	}

	h4 {
		font-size: 1.5rem;
		font-weight: 500;
	}

	#cookies .button01 {
		margin: 1em 0.5em 0 1em;
	}


/* ⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤⏤ RESUME ⏤⏤⏤⏤⏤⏤⏤⏤ */

	#resume h2 {
		margin: 0 0 0.5em 0;
	}

	.cv-nav {
		display: flex;
		justify-content: space-between;
		padding: 2em 0 3em 0;
	}

	.resume,
	.resume article {
		display: flex;
		margin-bottom: 2em;
	}

	.resume {
		flex-direction: column;
	}

	.resume article {
		justify-content: flex-start;
	}

	.resume article div:nth-child(2) {  }

	.resume article div:nth-child(3) { text-align: left; }

}




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

	body {
		font-size: 20px;
	}

	#cookies p {
		padding: 0 0 1em 0;
	}

	#about h2 {

		font-size: 1.5rem;
	}

	.tile {
		/*
		80 = 100
		88 = 110
		*/

		width: 88vw;
		height: 110vw;
		margin-bottom: 6vw;
	}

	.tile:hover {
		transform: none;
	}

	.tile {
		animation: preview 2000ms steps(24) infinite;
	}

	#topnav ul li {
		width: auto;
	}

	footer section div {
		margin: 0 0 2em 0;
	}
}