html, body {
	scroll-behavior : smooth;
	overflow-x : hidden;
}

.display-none {
	display : none;
}

h1 {
	font-size : 26px;
	line-height : 1.6;
	text-transform : uppercase;
}

.subtitle {
	display : block;
	color : #333;
	font-weight : normal;
	font-family : AvenirBook;
	font-size : 18px;
	line-height : 1;
}

.align-right {
	text-align : right;
}


.header-container {
	display : flex;
	justify-content : center;
	margin : 40px 40px 80px;
}

.header {
	display : flex;
	justify-content : space-between;
	flex-wrap : nowrap;
	width : calc(400px * 3 + 40px);
}

.header-title {
	margin : 20px 0 0 0;
}

@media (max-width: 850px) {
	.header-container {
		margin : 20px;
	}
}

.header-right {
	display : flex;
	flex-direction : column;
	align-items : flex-end;
	justify-content : space-between;
}

.header-right-explain {
	color : #3333FF;
	font-weight : bold;
	font-size : 18px;
	text-align : right;
	padding : 40px 0 0 20px;
}

.header-right-explain:before {
	content : "";
	position : absolute;
	top : 64px;
	left : 0;
	width : 100vw;
	height : 8px;
	background-color : #dec0ff;
	z-index : -1;
}

@media (max-width: 475px) {
	.header {
		flex-wrap : wrap;
		justify-content : center;
	}
	
	.header-right {
		align-items : center;
	}
	
	.header-right-explain {
		text-align : center;
		padding : 20px 0;
	}
}

.header menu {
	padding : 0;
	margin : 0;
}

.logo-container {
    display : flex;
    flex-direction : column;
	text-align : center;
}

.logo {
	width : 160px;
	height : 160px;
}


.menu {
	display : flex;
	flex-wrap : wrap;
	list-style-type : none;
	padding : 0;
	margin : 0;
}

.menu-link,
.menu-link:visited {
	display : flex;
	flex-direction : column;
	align-items : center;
	text-decoration : none;
	color : inherit;
	font-size : 14px;
	line-height : 1;
}

.menu-link:hover {
	text-decoration : underline;
}

.menu-link img {
	width : 60px;
	margin-bottom : 14px;
	transition : transform 0.35s;
}

.menu li:not(:first-child) .menu-link {
	margin-left : 30px;
}

.menu li:nth-child(1) .menu-link:hover img {
	transform : rotate(10deg) scale(1.1);
}

.menu li:nth-child(2) .menu-link:hover img {
	transform : rotate(-8deg) scale(1.1);
}

.menu li:nth-child(3) .menu-link:hover img {
	transform : rotate(6deg) scale(1.1);
}


.project-container {
	display : flex;
	flex-direction : column;
	align-items : center;
}

.portfolio {
	display : flex;
	flex-wrap : nowrap;
}

.project-list {
	display : flex;
	flex-direction : column;
	max-width : 100vw;
	/*column-count : 2;
	column-gap : 30px;
	column-fill : balance;*/
	text-align : center;
	list-style-type : none;
	padding : 20px;
	box-sizing : border-box;
	margin : 0;
}

.project-list figure {
	position : relative;
	padding : 15px 0 15px 0;
	margin : 0;
}

.project-list figcaption {
	position : absolute;
	bottom : 15px;
	left : 0;
	width : 100%;
	background-color : white;
	padding : 5px;
	box-sizing : border-box;
	border-radius : 5px;
	box-shadow : 0 1px 2px grey;
	opacity : 0;
	transform : translateY(-40px);
	transition : opacity 0.35s, transform 0.35s;
}

.project-list li:hover figcaption {
	opacity : 1;
	z-index : 1;
	transform : translateY(0);
}

@media (max-width: 600px) {
	.project-list {
		padding : 10px;
	}
	
	.project-list figcaption {
		display : none;
	}
}

.project-list figcaption span {
	display : block;
	font-size : 14px;
}

.project-list figcaption time {
	font-size : 12px;
}

.project-list img {
	display : block;
	width : 400px;
	max-width : 100%;
	/*min-height : 300px;*/
	object-fit : contain;
	overflow : hidden;
	background-color : white;
	border-radius : 20px;
	transition : box-shadow 0.35s, border-radius 0.35s, transform 0.35s;
}

.project-list li:hover img {
	box-shadow : 0 0 2px grey;
	transform : scale(1.05);
}
/*
@media (max-width: 1300px) {
	.project-list {	
		column-count : 2;
	}
}

@media (max-width: 835px) {
	.project-list {	
		column-count : 1;
	}
}
*/

.mes-services {
	max-width : 95vw;
	text-align : center;
	margin : 40px 0;
}

.mes-services h2 {
	margin-bottom : 60px;
}

.mes-services p {
	color : #a47dcd;
	font-size : 18px;
	line-height : 1.4;
	margin : 8px;
}


.a-propos {
	position : relative;
	width : 620px;
	max-width : 95vw;
	text-align : center;
	margin : 50px 0 200px 0;
}

.a-propos h2 {
	margin-bottom : 60px;
}

.a-propos p {
	font-size : 16px;
	line-height : 1.4;
	margin : 1em 24px;
}

.a-propos:before,
.a-propos:after {
	content : "";
	position : absolute;
	background : scroll no-repeat center center / cover;
}

.a-propos:before {
	top : 120px;
	left : 0;
	height : 216.8px;
	width : 82.4px;
	background-image : url("/ressource/icon/tagada-left.png");
	transform : translateX(-10vw);
}

.a-propos:after {
	top : 70%;
	right : 0;
	height : 216.8px;
	width : 114.24px;
	background-image : url("/ressource/icon/tagada-right.png");
	transform : translateX(10vw);
}


@media (max-width: 650px) {
	.a-propos {
		margin-bottom : 50px;
	}
	
	.a-propos:before,
	.a-propos:after {
		display : none;
	}
}


.contact {
	width : 600px;
	max-width : 95vw;
	text-align : center;
}

.contact h2 {
	margin-bottom : 60px;
}

.contact-big {
	font-size : 18px;
	font-weight : bold;
	font-style : italic;
	color : #a47dcd;
}

.contact-form {
	background : url("/ressource/logo.jpg") scroll no-repeat center center / cover;
	padding : 20px;
	transition : padding 0.35s;
}

@media (max-width: 500px) {
	.contact-form {	
		padding : 20px;
	}
}

@media (max-width: 460px) {
	.mes-services p br,
	.a-propos p br,
	.contact p br {
		display : none;
	}
}

.input {
	position : relative;
	display : block;
	width : 100%;
	margin-top : 20px;
}

.input input,
.input textarea {
	font-family : inherit;
	padding : 18px 12px 6px;
	border : 2px solid #CC6699;
	box-sizing : border-box;
	outline : none;
	border-radius : 18px;
}

.input input::placeholder,
.input textarea::placeholder {
	color : transparent;
}

.input label {
	position : absolute;
	top : 12px;
	left : 12px;
	transform-origin : top left;
	transition : transform 0.35s;
}

.input textarea {
	resize : vertical;
	min-height : 200px;
	padding-top : 2em;
}

.input input[data-value] + label,
.input textarea[data-value] + label,
.input input:focus + label,
.input textarea:focus + label {
	transform : scale(0.7) translateY(-8px);
}

.button {
	display : inline-flex;
	align-items : center;
	justify-content : center;
	color : white;
	font-size : 24px;
	font-family : CooperStdBlack;
	text-transform : uppercase;
	line-height : 1;
	cursor : pointer;
	background-color : #3333FF;
	padding : 8px 18px;
	border : none;
	border-radius : 20px;
}

.button:disabled {
	opacity : 0.6;
}

.success {
	color : yellowgreen;
}

.error {
	color : tomato;
}

.footer {
	color : white;
	font-size : 12px;
	text-align : center;
	background-color : #3333FF;
	padding : 6px;
	margin-top : 60px;
}