@charset "UTF-8";

@font-face {
	font-family: 'Spartan MB';
	src: url('../fonts/SpartanMB-Bold.woff2') format('woff2'),url('../fonts/SpartanMB-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spartan MB';
	src: url('../fonts/SpartanMB-Regular.woff2') format('woff2'),url('../fonts/SpartanMB-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spartan MB';
	src: url('../fonts/SpartanMB-Black.woff2') format('woff2'),url('../fonts/SpartanMB-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spartan MB';
	src: url('../fonts/SpartanMB-Light.woff2') format('woff2'),url('../fonts/SpartanMB-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Caveat';
	src: url('../fonts/Caveat-Regular.woff2') format('woff2'),url('../fonts/Caveat-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,legend,textarea,hr,h1,h2,h3{margin:0;padding:0}button,input,textarea{margin:0}*,*:before,*:after{box-sizing:border-box}img,video,svg{display:block;height:auto;max-width:100%;border:0}

/*--------------------------------------------------------------
Vars
--------------------------------------------------------------*/

:root{
	--leading:1.2rem;

	--white:#fff;
	--pink:#e8267d;
	--blue:#002641;
	--light_blue:#b4e0e9;

	--width:100%;
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
}
body{
	position:relative;
	min-height:100vh;
	text-rendering:optimizeSpeed;
	background:var(--white);
	color:var(--blue);
	font-family:'Spartan MB',sans-serif;
	font-size:1rem;
	font-weight: 200;
	line-height:1.75;
	overflow-x:hidden;
	word-wrap: break-word;
}
a{
	color:inherit;
	text-decoration:underline;
	text-underline-offset:.1em;
}
a:where(:hover,:focus-visible){
	/*background: var(--color_text);
	color:var(--dark);
	text-decoration: none;*/
}
h1,h2,.h1-like{
	font-size:3rem;
	font-weight:900;
	text-align:center;
	line-height:1.3;
	margin:0 0 calc(.3em + 1.75rem);
	text-transform: uppercase;
	text-shadow: 0 .1em 0 var(--pink), 0 .2em 0 var(--light_blue);
}
.h1-like a{text-decoration: none}
p,address,ol,ul,dl,blockquote{
	margin-top:0;
	margin-bottom:var(--leading);
}
li p,li ul,li ol,ol ol,ul ul{
	margin-top:0;
	margin-bottom:0;
}
ul,ol{
	padding-left:2em;
}
em,address,cite{
	font-style:italic;
	position:relative;
	vertical-align:baseline;
}
abbr{
	text-transform:uppercase;
	letter-spacing:.1em;
}
abbr[title]{
	text-decoration:none;
	border-bottom:1px dotted;
}
small{font-size:.833em;}
blockquote{
	font-style:italic;
	padding-left:1.75rem;
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

label{
	display:block;
	cursor:pointer;
	font-weight:700;
}
[type=search],[type=text],[type=url],select,textarea,button,.btn{
	white-space:nowrap;
	font-family:inherit;
	font-size:inherit;
	vertical-align:middle;
	margin:0 0 var(--leading);
	transition:.2s;
	transition-property:box-shadow,background-color,color,border;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	width:100%;
	padding:.5rem;
	background: transparent;
	border:4px solid var(--blue);
}
select{
	padding-right:1.75rem;
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23002641'%3E%3Cpath d='m6 9 6 6 6-6H6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 1.25rem;
	background-position: top .5rem right .25rem;
}
fieldset{
	border:none;
	padding:0;
	margin:0
}
textarea{
	min-height:9em;
	vertical-align:top;
	resize:vertical;
	white-space:normal
}
.btn,button{
	white-space: normal;
	padding:.5rem 3rem;
	margin:0;
	border-radius:2rem;
	border:none;
	background:var(--pink);
	display:inline-block;
	text-decoration:none;
	color:var(--white);
	text-transform:uppercase;
	text-align:center;
	cursor:pointer;
	box-shadow:none;
	font-family:inherit;
	width:auto;
	transition:box-shadow .2s ease-in-out;
	font-size:.825rem
}
.btn:hover,.btn:focus,button:hover,button:focus{box-shadow: -.5rem -.5rem 0 var(--blue), -1rem -1rem 0 var(--light_blue)}

/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/

:focus:not(:focus-visible){outline:0;}
:focus-visible{outline-offset:3px;}
@media (prefers-reduced-motion:no-preference){
	:focus-visible{transition:outline-offset .15s ease;}
}
::selection{
	background:var(--pink);
	color:var(--white);
}
.screen-reader-text,.email{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
}
.screen-reader-text:focus{
	background-color:var(--pink);
	display:block;
	width:auto;
	height:auto;
	top:0;
	left:0;
	padding:.5em 1em;
	text-decoration:none;
	z-index:999;
}
.sprite{display:none}
.wrapper{
	max-width:var(--width);
	padding-left:1.5rem;
	padding-right:1.5rem;
	margin-left:auto;
	margin-right:auto;
}
.grid{
	display:grid;
	gap:var(--leading);
	margin-top:var(--leading);
	margin-bottom:var(--leading)
}
.about-content h2:after, .project h1:after, .dot:after{
	content:".";
	color:var(--pink);
	font-size:1.5em;
	line-height: .5;
}
figcaption{
	text-align: center;
	color:#666;
	font-style: italic;
	margin-top:var(--leading)
}

/*--------------------------------------------------------------
Main header
--------------------------------------------------------------*/

.main-header{
	margin-top:1.5rem;
	display: grid;
	grid-template-columns: auto 1.4rem;
	gap:1rem;
	grid-template-areas:
		"logo button"
		"title title";
	align-items: center
}
.logo{grid-area: logo}
.logo svg{height:2rem}
.page-title{grid-area: title;}
.main-nav{
	grid-area:button;
	text-align: right;
}
.menu-toggle{
	position: relative;
	z-index: 999;
	margin:0;
	padding:0;
	background:none;
	box-shadow: none;
	border:none;
}
.menu-toggle:hover,.menu-toggle:focus{box-shadow: none}
.menu-toggle svg{
	fill:var(--blue);
	width:1.4rem;
}
.menu-toggle path{transition:opacity .2s, transform .2s;}
.menu-toggle[aria-expanded=true] path:nth-child(1) {
	transform: rotate(-45deg) translateX(-11px) translateY(-5px);
}
.menu-toggle[aria-expanded=true] path:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded=true] path:nth-child(3) {
	transform: rotate(45deg) translateX(4px) translateY(-6px);
}
.menu-toggle[aria-expanded=true] svg{fill:var(--white)}

/*--------------------------------------------------------------
Main menu
--------------------------------------------------------------*/

.menu-container{
	background: var(--blue);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	padding-top: 6rem;
	overflow-y: auto;
	z-index:998;
	opacity:0;
	transform:scale(.5);
	transform-origin:100% 0;
	visibility:hidden;
	transition:opacity .2s,transform .2s;
	text-align:center;
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.menu-container.active{
	opacity:1;
	visibility:visible;
	transform:scale(1);
}
.menu-container ul{
	margin:0;
	padding:1rem var(--leading);
	list-style:none;
	font-size:1.5rem;
}
.main-menu a{
	color:var(--white);
	display:block;
	text-align: center;
	text-decoration:none;
	text-transform:uppercase;
	font-weight: 900;
	line-height: 1;
	transition: text-shadow .2s ease-in-out;
}
.main-menu a:hover, .main-menu a:focus{
	text-shadow: -.2em 0 0 var(--pink);
}
.social-menu{
	display:flex;
	justify-content: center;
	gap:1rem;
}
.menu-container .social-menu{margin-top:auto}
.social-menu a{
	color:var(--pink);
	text-decoration: none;
}
.social-menu svg{height:1.5rem;}
.menu-container .language-menu{
	background: var(--white);
	text-transform: uppercase;
	font-family: var(--font_heading);
}

/*--------------------------------------------------------------
Main footer
--------------------------------------------------------------*/

.main-footer{
	background: var(--blue);
	color:var(--white);
	padding:3rem 0;
	position:relative;
	text-align: center;
}
.main-footer:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3rem;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 2' fill='%23fff' preserveAspectRatio='none'%3E%3Cpath d='M18 2c-1.7-.8-4.8-2-9-2-1.8 0-5.2.2-9 2'/%3E%3C/svg%3E") 0 0 no-repeat;
	background-size:100%
}
.main-footer h1, .main-footer h2{
	text-shadow: none;
	margin:0 0 var(--leading);
	text-align: inherit;
}
.main-footer h1 span{
	display: block;
	line-height: 1.1
}
.main-footer h1 span:nth-child(2n){color:var(--pink)}
.main-footer h1 span:nth-child(3n){color:var(--light_blue)}
.main-footer h2{font-size:1.7rem}

/* Newsletter */
.newsletter{margin-bottom:3.5rem;}
.newsletter button:hover,.newsletter button:focus{box-shadow: -.5rem -.5rem 0 var(--white), -1rem -1rem 0 var(--light_blue)}
.newsletter [type="text"]{
	font-family: Caveat,script;
	text-align: center;
	color:var(--white);
	border:none;
	border-bottom:2px solid var(--white);font-size:1.9rem;
}
.newsletter [type="text"]::placeholder{color:#fff}

/* Social menu */
.main-footer .social-menu{
	list-style: none;
	padding:0;
}

/* Legals */
.legals{text-align: center;}
.legals svg{
	margin:0 auto var(--leading);
	height:5.8rem
}

/*--------------------------------------------------------------
Services blocks
--------------------------------------------------------------*/

.services-list{margin-top:5rem}
.services-list ul{
	list-style: none;
}
.service-cover{
	color:var(--blue);
	padding:2rem
}
.services-list li:nth-child(2n) .service-cover{color:var(--light_blue)}
.services-list li:nth-child(3n) .service-cover{color: var(--pink)}
.service-cover svg{
	margin:0 auto;
	max-height:7rem;
}
.service-content{padding:var(--leading)}
.service-content h2{
	font-weight: 700;
	color:var(--blue);
	font-size:1.2rem;
	text-shadow: none;
	margin-bottom:var(--leading);
}
.service-content p{
	font-weight: 300;
	margin-bottom:var(--leading);
	align-self: flex-start;
}
.service-content .tags{
	margin-bottom:var(--leading);
	text-align: center;
	text-transform: uppercase
}

/*--------------------------------------------------------------
Home animation
--------------------------------------------------------------*/

#check, #point-1, #point-2, #point-3, #home-tagline, #c-point-1, #c-point-2, #c-point-3{opacity: 0}
#apostrophe-2,#apostrophe-3{
	transform-origin: bottom left;
	transform-box:fill-box
}

#ombre-1, #ombre-2{
	transform: translateX(11px);
	opacity: 0;
	animation: .4s ease-in-out 2.8s forwards shadows
}

#point-1{animation: 3s ease-in-out forwards point1}
#point-2{animation: 3s ease-in-out forwards point2}
#point-3{animation: 3s ease-in-out forwards point3}

#c-point-1{animation: 3s ease-in-out infinite point1}
#c-point-2{animation: 3s ease-in-out infinite point2}
#c-point-3{animation: 3s ease-in-out infinite point3}

#check{animation: .4s ease-in-out 2.8s forwards fadein}
#home-tagline{animation: .4s ease-in 2.8s forwards fadein}

#apostrophe-2{animation: .4s ease-in-out 2.8s forwards apostrophe2}
#apostrophe-3{animation: .4s ease-in-out 2.8s forwards apostrophe3}

@keyframes point1{
	0%,30%,60%,100%{opacity:0}
	15%,45%,75%,90%{opacity:1}
}
@keyframes point2{
	3%,33%,63%,100%{opacity:0}
	18%,48%,78%,90%{opacity:1}
}
@keyframes point3{
	6%,36%,66%,100%{opacity:0}
	21%,51%,81%,90%{opacity:1}
}
@keyframes fadein{
	from{opacity:0}
	to{opacity:1}
}
@keyframes apostrophe2{
	from{transform:rotate(0)}
	to{transform:rotate(15deg)}
}
@keyframes apostrophe3{
	from{transform:rotate(0)}
	to{transform:rotate(30deg)}
}
@keyframes shadows{
	0%{transform:translateX(11px)}
	5%{opacity: 1}
	100%{
		transform:translateX(0);
		opacity: 1;
	}
}

/*--------------------------------------------------------------
Home page
--------------------------------------------------------------*/

section{
	text-align: center;
	padding-top:6rem;
	padding-bottom:6rem
}
.intro{
	position: relative;
	padding-top:var(--leading);
	padding-bottom:var(--leading);
	min-height: calc(100vh - 7rem);
	display: flex;
	flex-direction: column;
	justify-content:space-between;
}
.intro:before{
	content:"";
	display:block;
	height:2rem;
}
.home-logo{
	width:50%;
	margin:0 auto 6.4rem;
}
.mouse{
	height:2rem;
	filter:drop-shadow(-1px -1px 0 var(--pink)) drop-shadow(-1px -1px 0 var(--light_blue));
}
.lead{
	display: grid;
	align-items: center;
	margin-bottom:5rem;
}
.lead > *:first-child{
	width:40%;
	margin:0 auto
}

.home-service-list .btn{margin-top:var(--leading)}

/* Projects */

.home-portfolio ul{
	list-style: none;
	padding:0;
	display:grid;
	gap:var(--leading);
}
.home-portfolio ul a{
	display:grid;
	grid-template-areas: "content";
	text-decoration: none;
	height:100%
}
.home-portfolio ul a > *{grid-area: content}
.home-portfolio ul img{
	width:100%;
	height:100%;
	object-fit: cover
}
.project-content{
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	color:var(--white);
	background: rgba(0,38,65,.8);
	padding:var(--leading);
}
.home-portfolio li:nth-child(3n-1) .project-content{background: rgba(232,38,125,.8)}
.home-portfolio li:nth-child(4n) .project-content{
	background: rgba(180,224,233,.8);
	color:var(--blue)
}
.project-content h3{
	margin-bottom:var(--leading);
	text-transform: uppercase
}
.pitxuevent{
	font-weight: 300;
	text-transform: uppercase;
	font-size:1.4rem;
	text-align: center;
	margin-top:calc(3 * var(--leading))
}
.pitxuevent a{
	display:inline-block;
	position:relative;
	padding:.5rem .75rem;
	background: var(--pink);
	color:var(--white);
	text-decoration: none;
}
.pitxuevent a:after{
	content:"pitxuevent.fr";
	position:absolute;
	left:0;
	top:0;
	padding:.5rem .75rem;
	background: var(--pink);
	transform:scaleX(0);
	transition:transform .2s ease-in-out;
	transform-origin: left;
}
.pitxuevent a:hover:after,.pitxuevent a:focus:after{transform: scaleX(1)}

/* Contact */

.home-contact{background: var(--light_blue)}
.home-contact h2{text-shadow: 0 .8em 0 var(--pink), 0 1.6em 0 var(--white);}
.home-contact .btn:hover,.home-contact .btn:focus{box-shadow: -.5rem -.5rem 0 var(--blue), -1rem -1rem 0 var(--white)}

/*--------------------------------------------------------------
Agency page
--------------------------------------------------------------*/

/* About images */

.about-images{
	display:grid;
	grid-template-areas: "content"
}
.about-images img{grid-area: centent}
.fade-in,.inactive{opacity:0;}
.fade-in.active{opacity:1}
.fade-in.inactive{opacity:0;}
.slide-in{transform:translateX(-50vw);}
.tasse{animation: .3s ease-in-out .2s forwards slide;}
.souris{animation: .3s ease-in-out .4s forwards slide;}
.tablette{animation: .3s ease-in-out .6s forwards slide;}
.chocolatine-1,.chocolatine-2,.chocolatine-3,.chocolatine-4{animation: .3s ease-in-out .8s forwards slide;}
.clavier{animation: .3s ease-in-out 1s forwards slide;}
.imac{animation: .3s ease-in-out 1.2s forwards slide;}

@keyframes slide{
	from{
		transform:translateX(-50vw);
	}
	to{
		transform:translateX(0);
	}
}

/* About */

.about{margin-bottom:6rem}
.about-content h2, .about-content h3{
	font-weight: 700;
	color:var(--blue);
	font-size:1.2rem;
	text-shadow: none;
	margin-bottom:var(--leading);
	text-align: left;
}
.about-content svg{display:none}

/* Services */

.agency-services-list{margin-top:5rem}
.agency-services-list ul{
	list-style: none;
}

/* Team */

.script{
	font-family: Caveat, script;
	text-align: center;
	font-size:2rem;
}
.team{
	padding-top:6rem;
	padding-bottom:6rem;
	text-align: center;
}
.team h2{margin-bottom:calc(1.3em + var(--leading))}
.pitxuteam{
	padding:0 1.5rem;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:1.5rem;
	margin-bottom:5rem
}
.pitxuteam img{
	border-radius: 50%;
	margin:0 auto .5rem;
	width:90%;
}
.pitxuteam h3{
	text-transform: uppercase;
	color:var(--pink)
}
.job{
	text-transform: uppercase;
	font-weight: 700;
}
.job-content{display:none}

/*--------------------------------------------------------------
Portfolio page
--------------------------------------------------------------*/

.portfolio{
	display: grid;
	gap:3rem;
	margin-bottom:5rem;
}
.filter{
	display:flex;
	justify-content: space-between;
	gap:1rem;
	flex-wrap: wrap
}
.filter button{
	display: block;
	text-decoration: none;
	padding:.5rem 1rem;
	background: transparent;
	border-radius:0;
	border:3px solid var(--pink);
	color:var(--pink);
	transition: color .2s ease-in-out, background .2s ease-in-out;
	flex-grow: 1;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
}
.filter button:hover, .filter button:focus{box-shadow: none}
.filter button.active{
	background: var(--pink);
	color:var(--white);
	box-shadow: none
}
.portfolio h2{
	font-weight: 700;
	color:var(--blue);
	font-size:1.2rem;
	text-shadow: none;
	margin-bottom:var(--leading);
	text-align: left;
}
.portfolio-item{position: relative}
.portfolio-item.hidden{display:none}
.portfolio-item h2{
	margin:var(--leading) 0;
	text-transform: none
}
.portfolio-item a{text-decoration: none}
.portfolio-item a:hover,.portfolio-item a:focus{color:var(--pink)}
.portfolio-item a:after{
	content:"";
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.item-categories{
	margin:-1.2rem 0 .5rem;
	color:var(--pink);
	text-transform: uppercase;
}
.item-categories span + span:before{content:", "}

/*--------------------------------------------------------------
Single project
--------------------------------------------------------------*/

.project-meta{
	color:var(--pink);
	font-weight: 300;
	font-size:1.2rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom:var(--leading);
}
.project-meta span{display: block}
.project h1,.project h2,.project h3,.subtitle{
	font-weight: 700;
	color:var(--blue);
	font-size:1.4rem;
	text-shadow: none;
	margin-bottom:var(--leading);
	text-align: left;
}
.project h2{font-size:1.2rem;}
.project h3{font-size:1rem;}
.subtitle{
	opacity:.6;
	text-transform: uppercase;
	margin-top:-1.2rem;
	line-height: 1.3
}
.project-website:before{
	content:"";
	width:3rem;
	height:1.75rem;
	margin-right:1rem;
	display:inline-block;
	background: linear-gradient(var(--white) calc(50% - 1px), var(--pink) calc(50% - 1px),  var(--pink) calc(50% + 1px),  var(--white) calc(50% + 1px));
}
.project-website{
	display:flex;
	background: var(--white);
	color:var(--pink);
	font-weight: 900;
	text-decoration: none;
}
.project-website:hover, .project-website:focus{text-decoration: underline}
.project-medias figure + figure{margin-top:var(--leading)}
.post-navigation{
	margin:calc(5 * var(--leading)) 0;
	color:var(--pink);
	display:flex;
	justify-content: space-between;
}
.post-navigation a{
	display:flex;
	text-decoration: none;
	align-items: center;
	gap:.5rem;
}
.post-navigation svg{
	height:1.5rem;
	transition:filter .2s ease-in-out;
}
.prev:hover svg,.prev:focus svg{filter:drop-shadow(-1rem 0 0 var(--light_blue)) drop-shadow(-1rem 0 0 var(--blue))}
.next:hover svg,.next:focus svg{filter:drop-shadow(1rem 0 0 var(--light_blue)) drop-shadow(1rem 0 0 var(--blue))}

/*--------------------------------------------------------------
Contact page
--------------------------------------------------------------*/

.contact-content{margin-bottom:6rem}
.contact-content h2{
	font-weight: 900;
	color:var(--blue);
	font-size:1.4rem;
	text-shadow: none;
	margin-bottom:var(--leading);
	text-align: inherit;
}
.contact-content a{
	text-decoration: none;
	color:var(--pink);
	font-weight: bold
}
.contact-social{
	padding:0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap:1rem
}
address{
	font-style: normal;
	text-transform: uppercase;
}
address strong{
	text-transform: uppercase;
	color:var(--pink);
	font-weight: 900;
}
.contact-form{
	background: var(--light_blue);
	padding:6rem 0
}
.contact-form ::placeholder,.contact-form [type=text],.contact-form select,.contact-form textarea{
	font-weight: 700;
	color:var(--blue);
	opacity: .7;
}
.contact-form button{
	border-radius:0;
	background: var(--blue);
	transition: background .2s ease-in-out;
	margin:0;
	padding:3rem 1rem;
	display:block;
	width:100%
}
.contact-form h2{text-shadow: 0 .1em 0 var(--pink), 0 .2em 0 var(--white);}
.contact-form button > *{display:block}
.contact-form button span{
	font-size:1.4rem;
	font-weight: 700;
}
.contact-form button:hover, .contact-form button:focus{
	background: var(--pink);
	box-shadow: none;
}

/* Form confirmation */
.form-confirmation h2 {
	color: var(--blue);
	font-size: 1.5rem;
	font-weight: 900;
	text-shadow: none;
	margin-bottom: var(--leading);
	text-align: left;
}

/*--------------------------------------------------------------
Error page
--------------------------------------------------------------*/

.error-page{margin-bottom: 9rem}
.error-page h2 {
	color: var(--blue);
	font-size: 1.5rem;
	font-weight: 900;
	text-shadow: none;
	margin-bottom: var(--leading);
	text-align: left;
}
._404{text-align: center}
._404 span{
	display:inline-block;
	font-size:6rem;
	font-weight: 900;
	color:var(--pink);
}
._404 span:first-child{
	color:var(--blue);
	transform: rotate(-10deg) translate(-1rem, -1rem);
}
._404 span:last-child{
	color:var(--light_blue);
	transform: rotate(10deg) translate(1rem, 1rem);
}

/*--------------------------------------------------------------
Legals page
--------------------------------------------------------------*/

.cgv h1,.cgv h2{
	font-weight: 900;
	color:var(--blue);
	font-size:1.2rem;
	text-shadow: none;
	margin-bottom:var(--leading);
	text-align: inherit;
}

/*--------------------------------------------------------------
Media queries
--------------------------------------------------------------*/

@media (min-width:48rem){
}

@media (min-width:62rem){
	:root{
		--width:80rem;
	}
	/*html{font-size: 112.5%}*/

	/* Typography */
	h1,h2,.h1-like{
		font-size:4.4rem;
		margin:0 0 calc(2.4em + 1.75rem);
		text-shadow: 0 .8em 0 var(--pink), 0 1.6em 0 var(--light_blue);
	}

	/* Grids */
	.grid-1-1{grid-template-columns: 1fr 1fr}
	.grid-1-2{grid-template-columns: 1fr 2fr}
	.grid-1-3{grid-template-columns: 1fr 3fr}
	.grid-5-7{grid-template-columns: 5fr 7fr}
	.grid-7-5{grid-template-columns: 7fr 5fr}

	/* Main header */
	.main-header{
		margin-top:5rem;
		grid-template-columns: 12rem auto 12rem;
		grid-template-areas:"logo title button";
		align-items: start;
		max-width:100rem
	}
	.logo svg{height: auto}
	.main-menu a{
		font-size:7.6rem;
		margin:1rem 0;
	}

	/* Main footer */
	.main-footer{
		padding:6rem 0 5rem;
		text-align: left
	}
	.main-footer h1{text-align: left}
	.newsletter  > *{
		display: flex;
		gap:var(--leading);
		align-items: center
	}
	.newsletter [type="text"]{margin:0}
	.newsletter button{white-space: nowrap}
	.main-footer .wrapper > *:last-child{text-align: right}
	.main-footer .social-menu{justify-content: flex-end}

	/* Services */
	.services-list{
		position:relative;
		background: var(--pink);
	}
	.services-list:before{
		content:"";
		position:absolute;
		left:0;
		width:50%;
		height:100%;
		background: var(--blue);
	}
	.services-list ul{
		position: relative;
		display:grid;
		grid-template-columns: 1fr 1fr 1fr
	}
	.services-list li{
		display:grid;
		grid-template-areas: "content";
		overflow: hidden;
	}
	.services-list li > *{grid-area: content}
	.service-cover{
		background: var(--blue);
		color:var(--white);
		padding:5rem;
		order:1;
		transition:transform .2s ease-in-out;
	}
	.services-list li:nth-child(2n) .service-cover{
		background: var(--light_blue);
		color:var(--blue)
	}
	.services-list li:nth-child(3n) .service-cover{
		background: var(--pink);
		color:var(--white)
	}
	.services-list li:hover .service-cover, .services-list li:focus .service-cover{transform:translateY(calc(-100% + var(--leading)))}
	.services-list li:first-child:hover .service-cover, .services-list li:first-child:focus .service-cover{transform:translateX(calc(-100% + var(--leading)))}
	.services-list li:last-child:hover .service-cover, .services-list li:last-child:focus .service-cover{transform:translateX(calc(100% - var(--leading)))}
	.service-cover svg{max-height:12rem}
	.service-content{
		padding: calc(2 * var(--leading));
		background: var(--white);
		display:flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items:center;
	}

	/* Home page */
	.lead{
		grid-template-columns: 15% auto;
		gap:5rem;
	}
	.lead > *:first-child{width:100%}
	.home-services-list .service-content{justify-content: center}
	.home-services-list .btn{margin-top:var(--leading)}
	.home-portfolio{max-width:100rem}
	.home-portfolio ul{
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin-bottom:calc(2 * var(--leading))
	}
	.home-portfolio li:first-child{
		grid-column-end: span 2;
		grid-row-end: span 2
	}
	.home-portfolio ul img{aspect-ratio: 1/1}
	.project-content{
		background:var(--blue);
		transition:opacity .2s ease-in-out;
		opacity:0;
		padding:3rem;
	}
	.home-portfolio a:hover .project-content,.home-portfolio a:focus .project-content{opacity:1}
	.home-portfolio li:nth-child(3n-1) .project-content{background:var(--pink)}
	.home-portfolio li:nth-child(4n) .project-content{background:var(--light_blue)}

	/* Agency */
	.agency-services-list{background: transparent}
	.agency-services-list:before{display:none}
	.agency-services-list li{
		display:flex;
		flex-direction: column;
		overflow: visible;
	}
	.agency-services-list.services-list li:hover .service-cover, .agency-services-list.services-list li:focus .service-cover{transform: none}
	.service-action{
		margin:auto var(--leading) 3rem;
		align-self:center;
	}
	.agency-services-list .service-cover{
		position:relative;
		order:0
	}
	.agency-services-list .service-content{padding-bottom:0}
	.agency-services-list .wrapper li:first-child .service-cover:before,.agency-services-list .wrapper li:last-child .service-cover:before{
		content:"";
		position:absolute;
		right:0;
		top:0;
		width:50vw;
		height:100%;
		background: var(--blue);
		z-index: -1
	}
	.agency-services-list .wrapper li:last-child .service-cover:before{
		background: var(--pink);
		left:0
	}
	.agency-services-list ul{
		position: relative;
		display:grid;
		grid-template-columns: 1fr 1fr 1fr
	}
	.about-content{position: relative}
	.about-content svg{
		display:block;
		height:19rem;
		position:absolute;
		left:100%;
		top:-15rem;
	}
	.pitxuteam{
		overflow-x: hidden;
		display:flex;
		gap:5rem;
		padding:0;
		position:sticky;
		top:0;
		margin-bottom:5rem
	}
	.pitxuteam img{width:100%}
	.pitxuteam figure{min-width:20%}
	.pitxuteam figure:first-child{margin-left:3rem}
	.pitxuteam figure:last-child{margin-right:3rem}
	.job-content{display:block}

	/* Portfolio */
	.portfolio{
		grid-template-columns: 1fr 1fr 1fr;
		gap:4.7rem;
	}
	.portfolio-item.wide{grid-column-end: span 2}
	.filter button:hover, .filter button:focus{
		background: var(--pink);
		color:var(--white);
	}

	/* Project */
	.project{gap:7rem}
	.column-content{padding:3rem}
	.project-medias .grid{
		justify-items:center;
		align-items: center
	}

	/* Contact */
	.contact-content{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:5rem;
	}
	.contact-content > *:nth-child(2n){text-align: center}
	.contact-content > *:nth-child(3n){text-align: right}
	.contact-social{justify-content: center}
	.contact-form h2{text-shadow: 0 .8em 0 var(--pink), 0 1.6em 0 var(--white);}
	.contact-form .grid > *:last-child{order:-1}
	.message-field,textarea{
		height:calc(100% - .875rem);
		margin:0
	}

	/* Error page */
	._404 span{
		font-size:20rem;
		line-height: 1;
		position:relative;
		z-index: 99;
	}
	._404 span:first-child{
		transform: rotate(-30deg) translate(-1rem, -15rem);
	}
	._404 span:nth-child(2n){
		transform: rotate(30deg) translate(-7rem, 5rem);
	}
	._404 span:last-child{
		transform: rotate(45deg) translate(-5rem, 25rem);
	}

	/* Legals */
	.cgv{
		max-width:40rem;
	}
}

@media (min-width:100rem){
}