:root {
 --main-color: #141414/*grissombre*/;
 --white-color: #FFFFFF/*blanc*/;
 --title-color: #C06C6C/*rouge*/;
 --secondary-about : rgba(228,10,10,1)/*marron*/;
 --rouge : rgb(158, 45, 57,1);
}
html {
  height: 100%;
}
body{
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	background-color: var(--main-color);
	font-family: arial, sans-serif;
	text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
    line-height: 1.3;
    font-size: 12px;
    animation : transitionIn 1.5s;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.highlight{
	color: #ffffff;
}
/*////////////////////////////// NAV //////////////////////////////*/

.nav{
	padding-bottom: 24px;
	position: fixed;
	background-color: var(--main-color);
	bottom: 0px;
	width: 100%;
	height: 72px;
	overflow-x: auto;
	border-top: solid 1px #ffffff26;
	display: none;
}
.nav-link{
	display: flex;
	padding-top: 12px;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	min-width: 50px;
	color: var(--white-color);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	filter: brightness(80%);
}
.nav-link:hover{
	filter: brightness(100%);
}
.nav-link-selected{
	display: flex;
	padding-top: 12px;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	min-width: 50px;
	color: var(--title-color);
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	filter: brightness(100%);
}
.nav-icon{
	height: 24px;
	margin-bottom: 8px;
}
.soon-menu{
	margin: 0;
	padding: 0;
	margin-left: 4px;
	padding: 1px 4px;
	font-size: 12px;
	color: var(--main-color);
	background-color: var(--title-color);
	border-radius: 4px;
}
.soon-tab-bar{
	margin-top: 2px;
	padding: 2px 4px;
	font-size: 9px;
	color: var(--main-color);
	background-color: var(--title-color);
	border-radius: 4px;
}
/*////////////////////////////// HEADER //////////////////////////////*/
.headlong{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin : 48px 72px;
	color : var(--title-color);
}
.left{
	margin: auto 0;
}
.logo{
	width : 96px;
}
.center{
	display:block;
}
.menu{
	padding : 0;
	margin : 0;
}
.menu .title{
	display : inline-block;
}
.menu .title-selected{
	display : inline-block;
}
.menu .title a{
	margin : 0px 3px;
	padding: 4px 20px;
	text-decoration : none;
	text-transform : uppercase;
	transition : 400ms;
	color : var(--title-color);
	font-size: 12px;
	display : inline-block;
}
.menu .title a:hover{
	background-color: var(--title-color);
    color: var(--main-color);
}
.menu .title-selected a{
	margin: 0px 3px;
    padding: 4px 20px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 400ms;
    background-color: var(--title-color);
    color: var(--main-color);
    filter: brightness(100%);
    font-size: 12px;
    display: inline-block;
}
.menu .category{
	display : inline-block;
}
.menu .category-selected{
	display : inline-block;
}
.menu .category a{
	margin : 0px 3px;
	padding :10px 15px;
	text-decoration : none;
	text-transform : uppercase;
	transition : 400ms;
	color : #FECF41;
	filter: brightness(60%);
	font-size: 12px;
	display : inline-block;
}
.menu .category-selected a{
	margin : 0px 3px;
	padding :10px 15px;
	text-decoration : none;
	text-transform : uppercase;
	transition : 400ms;
	color : #FECF41;
	filter: brightness(100%);
	font-size: 12px;
	font-weight:lighter;
	display : inline-block;
}
.menu .category a:hover{
	filter: brightness(100%);
}

/*////////////////////////////// WORKS //////////////////////////////*/

.catalogue{
	display: flex;
	flex-wrap: wrap;
	color : var(--title-color);
}
.prod-box{
	position: relative;
	box-sizing: border-box;
	margin-bottom: -3px;
	width : 33.33%;
}
.prod-box-works{
	position: relative;
	box-sizing: border-box;
	margin-bottom: -3px;
	width : 20%;
}
.prod-img{
	width:100%;
}
.overlay{
	position:absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
    color: rgba(0,0,0,0);
	margin:auto;
    top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(210,59,59,0);
}
.overlay:hover {
	color : var(--title-color);
	background-color: rgba(210,59,59,0.8);
}
.overlay p{
	margin:0;
	text-align: center;
	color : rgba(0,0,0,0);
}
.overlay:hover p{
	color: var(--white-color);
}
.overlay h2{
	margin:0;
	margin-top:45%;
	position: relative;
	text-align: center;
	font-variant: normal;
	font-size : 20px;
}
.overlay:hover h2{
	color: var(--white-color);
}


/*////////////////////////////// PROJECT //////////////////////////////*/
.project{
	display: flex;
    justify-content: space-between;
    margin: 48px 72px;
}
.visuel{
	width: 60%;
}
.visuel-box{
	width:100%;
}
.visuel-image{
	width:100%;
}
.description{
	margin: 0;
	width: 30%;
	color: var(--title-color);
}
.project-title{
	margin:0;
}
.client-date{
	padding-top: 2px;
	padding-bottom: 16px;
	border-bottom: solid 0.5px var(--title-color);
	color: var(--title-color);
}
.description-text{
	margin: 16px 0;
    line-height: 1.5;
    font-size: 12px;
}
p{
	margin: 0;
	color: var(--title-color);
}

/*////////////////////////////// ABOUT //////////////////////////////*/

.sect-about {
    margin: 0 72px;
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.about-left, .about-right {
    display: inline-block;
    height: auto;
    vertical-align: top;
}
.about-left {
    width: 100%;
    margin-right: 0;
}
h1{
	margin: 0;
	width: 100%;
	font-family: arial, sans-serif;
	text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
    line-height: 1.1;
    font-size: 24px;
    color: var(--title-color);
}
.about{
	width: 256px;
	margin-bottom: 48px;
    margin-top: 0;
}
.partner {
    margin: 24px 0;
    display: inline-block;
}
.partner-list {
    padding: 0;
    margin: 0;
    display: flex;
}
.partner-list .title {
    margin: auto;
    list-style: none;
    padding-right: 24px;
}
.buttons{
	display: flex;
}
#first {
	display: none;
}
#second {
	margin-left: 96px;
}
.primary-button a {
	margin-right: 48px;
    float: left;
    display: flex;
	align-items: center;
    color: var(--title-color);
    text-transform: uppercase;
    text-decoration: none;
    transition: 200ms;
}
.primary-button a:hover{
	background-color: var(--title-color);
    color: var(--main-color);
}
.secondary-button a {
    display: flex;
	align-items: center;
    color: var(--title-color);
    text-transform: uppercase;
    text-decoration: none;
    transition: 200ms;
}
.secondary-button a:hover{
	background-color: var(--title-color);
    color: var(--main-color);
}
.right-up-social{
	position: relative;
    margin-left: 4px;
    width: 20px;
	height: 20px;
    float: right;
}
.right-up-cta{
	position: relative;
    margin-left: 4px;
    width: 36px;
	height: 36px;
    float: right;
}
.right-up-icon-alternate{
	position: relative;
    margin-left: 4px;
    width: 20px;
	height: 20px;
    float: right;
}
.about-right {
	display: flex;
	margin-left: 30%;
}
.about-profile {
    width: 100%;
    margin: 5% 0%;
}
.social{
	margin:  0;
	padding: 0;
}
.icone {
    height: 18px;
    float: left;
}

/*////////////////////////////// FOOTER //////////////////////////////*/

.footlong{
	display: flex;
	text-align: right;
	justify-content: space-between; ;
	margin: 48px 72px;
	color : var(--title-color);
}

/*//////////////////////////////////////////////////// RESPONSIVE ////////////////////////////////////////////////////*/

@media screen and (min-width: 1920px){
	.prod-box{
		width:25%;
	}
}
@media screen and (max-width: 1024px){

	/*////////////////////////////// HEADER //////////////////////////////*/

	body{
		padding-bottom: 80px;
	}
	.headlong{
		flex-direction: column;
		align-items: center;
     	text-align: center;
	}
	.menu .title a{
		margin : 4px;
		padding :8px;
		font-size: 16px;
	}
	.menu .title-selected a{
		margin : 4px;
		padding :8px;
		font-size: 16px;
	}
	.center{
		margin-top: 32px;
	}
	.right{
		display: none;
	}

	/*////////////////////////////// catalogue //////////////////////////////*/

	.prod-box{
		width:50%;
	}
	/*////////////////////////////// project //////////////////////////////*/

	.project{
		flex-direction: column;
	}
	.description{
		margin: 0 24px;
		width: auto;
	}
	.visuel{
		width: 100%;
		margin-top: 24px;
	}
	/*////////////////////////////// ABOUT //////////////////////////////*/


	#first {
		display: flex;
	}
	#second {
		margin-left: 0;
	}
	.sect-about {
		display: flex;
		flex-direction: column;
		align-items: baseline;
		margin: 0 72px;
	}
	.social {
		margin-top: 32px;
	}
	.about-left, .about-right{
		padding: 0;
		margin: 0;
		width: auto;
	}
	.partner{
		margin-top: 32px;
		margin-bottom: 16px;
	}
	.about-right{
		margin-top: 32px;
		flex-direction: column;
	}
	.about-profile{
		margin: 0;
		margin-bottom: 16px;
		width: 100%;
	}

	/*////////////////////////////// FOOTER //////////////////////////////*/

	.footlong{
		flex-direction: column;
     	padding: 48px auto;
	}
	.footlong .title a {
	    padding: 4px;
	    margin: 12px;
	    filter: brightness(100%);
	}
	.icone {
	    height: 24px;
	    float: left;
	}
	.copyright{
		margin-top:16px;
	}
	.nav{
		display: flex;
	}
}
@media screen and (max-width: 720px){
	body{
		padding-bottom: 64px;
	}
	.project{
		margin: 0 0;
	}
	.sect-about {
		margin: 0 24px;
	}
	.buttons{
		flex-direction: column;
	}
	.primary-button a{
		margin-right: 0;
		margin-top: 16px;
	}
	.prod-box{
		width:100%;
	}
	.prod-box-works{
		width:100%;
	}
	.footlong{
		margin: 72px 24px;
	}
}