@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}img{width:100%}

/*--------------------------------------------------------------
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;*/
}
strong{font-weight: 700}
h1,h2,h3,.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);
}
h3{
	font-size:1.25rem;
	text-shadow: none
}
.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;
}
.wrapper-s{max-width: var(--width-s, --width)}
.wrapper-l{max-width: var(--width-l, --width)}
.full-width .wrapper{
	padding-left:0;
	padding-right:0;
	max-width: none
}
.grid{
	display:grid;
	gap:var(--leading);
	margin-top:var(--leading);
	margin-bottom:var(--leading)
}
.about-content h2: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)
}
.lead{font-weight: bold;}
.text-center{text-align: center}

.has-button a{
	color:currentColor;
	background: var(--white);
	display: inline-block;
	border:2px solid currentColor;
	padding:.5rem 1rem;
	text-decoration: none;
	text-transform: uppercase
}

.p-s{padding:var(--leading)}
.p-l, .p-xl, .p-xxl{padding:3rem}
.pt-s{padding-top:var(--leading)}
.pb-s{padding-bottom:var(--leading)}
.pl-s{padding-left:var(--leading)}
.pr-s{padding-right:var(--leading)}
.pt-l, .pt-xl, .pt-xxl{padding-top:3rem}
.pb-l, .pb-xl, .pb-xxl{padding-bottom:3rem}
.pl-l, .pl-xl, .pl-xxl{padding-left:3rem}
.pr-l, .pr-xl, .pr-xxl{padding-right:3rem}
.m-s{margin:var(--leading)}
.m-l, .m-xl, .m-xxl{margin:3rem}
.mt-s{margin-top:var(--leading)}
.mb-s{margin-bottom:var(--leading)}
.ml-s{margin-left:var(--leading)}
.mr-s{margin-right:var(--leading)}
.mt-l, .mt-xl, .mt-xxl{margin-top:3rem}
.mb-l, .mb-xl, .mb-xxl{margin-bottom:3rem}
.ml-l, .ml-xl, .ml-xxl{margin-left:3rem}
.mr-l, .mr-xl, .mr-xxl{margin-right:3rem}

.overflow-t-s{margin-top:calc(0px - var(--leading))}
.overflow-t-l, .overflow-t-xl, .overflow-t-xxl{margin-top: -3rem}
.overflow-b-s{margin-bottom:calc(0px - var(--leading))}
.overflow-b-l, .overflow-b-xl, .overflow-b-xxl{margin-bottom: -3rem}

.shadow{box-shadow: 0px 3px 6px rgba(0,0,0,.3)}

/*--------------------------------------------------------------
Colors
--------------------------------------------------------------*/

[class*='bg-'] .btn{
	border:2px solid var(--white);
	background: transparent;
	color:var(--white);
}
[class*='bg-'] .btn:hover, [class*='bg-'] .btn:focus{
	box-shadow: none;
	background: var(--white);
}
.bg-blue{
	background: var(--blue);
	color:var(--white);
}
.bg-blue .btn:hover, .bg-blue .btn:focus{color:var(--blue);}
.bg-light_blue{
	background: var(--light_blue);
	color:var(--blue);
}
.bg-light_blue .btn{
	border-color:var(--blue);
	color:var(--blue)
}
.bg-light_blue .btn:hover, .bg-light_blue .btn:focus{
	background: var(--blue);
	color:var(--light_blue)
}
.bg-pink{
	background: var(--pink);
	color:var(--white);
}
.bg-pink .btn:hover, .bg-pink .btn:focus{color:var(--pink)}
.bg-white{background: var(--white)}
.text-white *{color:var(--white)}

/*--------------------------------------------------------------
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}
.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);
}

/*--------------------------------------------------------------
Breadcrumb
--------------------------------------------------------------*/

.breadcrumb{
	background: var(--blue);
	color:var(--white);
}
.breadcrumb ol{
	list-style: none;
	padding:.5rem 1.5rem;
	margin:0 auto;
	display: flex
}
.breadcrumb li + li:before{
	content:"/";
	margin:0 .5rem
}

/*--------------------------------------------------------------
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% 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{
	margin-top:3rem;
	font-size:1.7rem;
}

/* 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
}

/*--------------------------------------------------------------
Content
--------------------------------------------------------------*/

.page-title{margin-top:3rem}

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

.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, #home-tagline, #c-point-1, #c-point-2, #c-point-3, #dessins{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 1.2s forwards shadows
}

#point-1{animation: .6s ease-in-out .2s forwards point}
#point-2{animation: .6s ease-in-out .5s forwards point}
#point-3{animation: .6s ease-in-out .8s forwards point}

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

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

#dessins{animation: .6s ease-in-out 1.2s forwards fadein;}

/*#overlay{
	transform-origin: bottom right;
	transform-box:fill-box;
	transform: rotate(0deg);
	animation: 1s linear 4s forwards overlay;
}*/

.line-1 > *:first-child{
	stroke-dasharray:500;
	stroke-dashoffset:-500;
	animation:line .5s 1s linear forwards;
}
.line-1 > *:last-child{
	stroke-dasharray:30;
	stroke-dashoffset:-30;
	animation:line .25s 1.5s linear forwards;
}
.line-2 > *:first-child{
	stroke-dasharray:300;
	stroke-dashoffset:300;
	animation:line .5s 1s linear forwards;
}
.line-2 > *:last-child{
	stroke-dasharray:35;
	stroke-dashoffset:-35;
	animation:line .25s 1.5s linear forwards;
}

/*#main-animation{
	transform-origin: top right;
	transform-box:fill-box
}
#main-animation{animation: .3s linear 4.2s forwards main-animation}*/

@keyframes line{
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes main-animation{
	to {
		transform:scaleX(0);
	}
}
@keyframes overlay{
	to {
		transform:rotate(140deg);
	}
}
@keyframes point{
	0%,100%{opacity:1}
	50%{opacity:0}
}
@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{
	1%{
		transform:translateX(11px);
		opacity: 1}
	100%{
		transform:translateX(0);
		opacity: 1;
	}
}

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

section{
	text-align: center;
	padding-top:3rem;
	padding-bottom:3rem
}
/* SVG Animation */
.intro{
	pointer-events: none;
	/*position: fixed;
	z-index: 999;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:0;
	padding:0;*/
	margin:0 auto;
	height:30vh;
	padding:0;
	grid-area:logo
}
.intro svg{
	margin:0 auto;
	width:100%;
	height:100%;
	/*object-fit: cover;*/
}
.home-lead{
	display: grid;
	align-items: center;
	margin-bottom:5rem;
}
.home-lead > *:first-child{
	width:40%;
	margin:0 auto
}

/* Home logo */
.home-logo{display: none}

/* Home intro */
.home-intro{
	text-align: left;
	padding-bottom:0
}
.intro-agency h1{
	margin:0;
	text-align: left;
	text-shadow: none;
	font-size:2.5rem
}
.intro-agency p{
	font-size:2rem;
	text-transform: uppercase;
	font-weight: 200;
}
.home-intro .btn{
	position: relative;
	z-index: 9;
	border:2px solid var(--blue);
	color:var(--blue);
	background: transparent;
	margin-bottom:5rem;
}
.home-intro .btn:hover, .home-intro .btn:focus{
	color:var(--blue);
	background: var(--white);
	/*box-shadow: none;*/
}

/* 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 */

.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);
}
.about-content svg{display:none}

/* Services */

.agency-services-list{margin-top:5rem}
.agency-services-list ul{
	list-style: none;
}
.agency-services-list .service-cover{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}
.agency-services-list .service-cover p{
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size:1.5rem;
}
/*.agency-services-list .service-cover svg{margin:3rem auto}*/
.service-cover .btn{
	margin:3rem 0 0;
	background: transparent;
	border:2px solid currentColor;
	color:currentColor;
}
.agency-services-list .service-cover .btn:hover, .agency-services-list .service-cover .btn:focus{
	box-shadow: none;
	border-color:var(--blue);
	background: var(--blue);
	color:var(--light_blue);
}
.agency-services-list li:first-child .service-cover .btn:hover, .agency-services-list li:first-child .service-cover .btn:focus{
	border-color:var(--white);
	background: var(--white);
	color:var(--blue);
}
.agency-services-list li:last-child .service-cover .btn:hover, .agency-services-list li:last-child .service-cover .btn:focus{
	border-color:var(--white);
	background: var(--white);
	color:var(--pink);
}

/* Team */

.script{
	font-family: Caveat, script;
	text-align: center;
	font-size:2rem;
}
.team{
	padding-top:6rem;
	padding-bottom:6rem;
}
.team h2{margin-bottom:calc(1.3em + 2 * var(--leading))}
.pitxuteam{
	margin-bottom:5rem
}
.pitxuteam img{
	background: linear-gradient(#0072be, #014093);
	margin:0 auto .5rem;
}
.pitxuteam h3{
	text-transform: uppercase;
	color:var(--pink)
}
.job{
	text-transform: uppercase;
	font-weight: 700;
}
.job-content{display:none}

/*--------------------------------------------------------------
Services page
--------------------------------------------------------------*/

.service{
	margin:3rem 0;
	padding:var(--leading) 0
}
.service h2{
	text-shadow: none;
	margin:0 0 var(--leading);
	font-size: 2.5rem;
	text-align: left;
}
.service .content{margin-left:var(--leading)}
.services-portfolio h1{
	margin-bottom:5rem;
	text-shadow: none;
	font-size:2.5rem
}
.services-portfolio .portfolio-item{text-align: left}
.services-portfolio .portfolio-item img{aspect-ratio: 1/1}

/*--------------------------------------------------------------
Single service
--------------------------------------------------------------*/

.service-intro{position: relative}
.service-intro .lead{
	font-weight: 100;
	font-size:1.35rem
}
.service-intro .subtitle{
	font-weight: 100;
	margin-top:0;
	opacity: 1;
	font-size:3.2rem;
}
.service-intro svg{display:none}
.single-service h2{
	text-shadow: none;
	margin:0 0 calc(.3em + 1.75rem);
	text-align: left;
	font-size:2.5rem
}
.single-service h3{text-align:left}
.single-service-pagination{
	display:flex;
	justify-content: space-between
}
.single-service-pagination .btn{
	display:flex;
	gap:.5rem
}
.single-service-pagination svg{height:1.5rem}
.service-quote-title p{
	position: relative;
	text-align: center;
	font-size:2.35rem;
	font-weight: 900;
	text-transform: uppercase;
	margin:0 3rem 3rem;
}
.service-quote-title p:before, .service-quote-title p:after{
	content:'“';
	font-size:3em;
	position: absolute;
	height:1rem;
	line-height: 1rem;
	left:0;
	top:50%;
}
.service-quote-title p:after{
	content:'”';
	left:auto;
	right:0;
}
.design-graphique img{
	margin:0 auto 3rem;
	max-width:10rem;
}
.design-graphique h3{
	text-transform: uppercase;
	margin-bottom:var(--leading)
}

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

.portfolio{
	display: grid;
	gap:3rem;
	margin-bottom:5rem;
}
.filter{
	display:flex;
	justify-content: space-between;
	gap:1rem;
	flex-wrap: wrap
}
.filter button, .filter a{
	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, .filter a:hover, .filter a:focus{box-shadow: none}
.filter button.active, .filter a.active{
	background: var(--pink);
	color:var(--white);
	box-shadow: none
}
.filter + *{margin-top:3rem;}
.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 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:0 0 .5rem;
	color:var(--pink);
	text-transform: uppercase;
}
.item-categories span + span:before{content:" "}

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

.project-header{position:relative}
.project-intro .subtitle{
	font-size:1.35rem;
	font-weight: 700;
	text-transform: uppercase
}
.project h1, .project h2{
	text-shadow: none;
	margin:0 0 calc(.3em + 1.75rem);
	text-align: left;
	font-size:2.5rem
}
.project h2.text-center{text-align: center}
.project h1{
	font-size:3.2rem;
	font-weight:100;
}
.project-pagination{
	position:absolute;
	width:100%;
	top:50%;
	transform: translateY(-50%);
	padding:0 var(--leading);
	display: flex;
	justify-content: space-between;
}
.project-pagination a{
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: center;
	color:var(--white);
	text-decoration: none;
}
.project-pagination a:last-child{align-items: flex-end}
.project-pagination svg{
	border:2px solid currentColor;
	width:1.75rem;
	margin-bottom:.5rem;
}
.project-pagination span{display:none}

/*--------------------------------------------------------------
Pagination
--------------------------------------------------------------*/

.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))}

/*--------------------------------------------------------------
Blog page
--------------------------------------------------------------*/

.blog{
	display: grid;
	gap:3rem;
	margin-bottom:5rem;
}
.blog h2{
	font-weight: 700;
	color:var(--blue);
	font-size:1.2rem;
	text-shadow: none;
	margin-bottom:var(--leading);
	text-align: left;
}
.blog .filter a{
	border:3px solid var(--blue);
	color:var(--blue);
}
.blog .filter a:hover, .blog .filter a:focus, .blog .filter a.active{
	background: var(--blue);
	color:var(--white);
}
.blog-item{position: relative}
.blog-item h2{
	margin:var(--leading) 0 0;
	text-transform: none
}
.blog-item a{text-decoration: none}
.blog-item a:hover,.blog-item a:focus{color:var(--pink)}
.blog-item a:after{
	content:"";
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.blog-categories{color:var(--light_blue);}

/*--------------------------------------------------------------
Article
--------------------------------------------------------------*/

.article-title{
	text-align: left;
	font-weight: 700;
	text-shadow: none;
	margin:3rem 0 var(--leading);
}
.article-metas{
	margin-bottom:3rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3rem;
}
.article-metas p{margin:0}
.article-metas .social-menu{
	list-style: none;
	margin:0;
	padding:0;
}
.article-metas .social-menu svg{
	height:2rem;
	border-radius:4px;
}
.author{
	text-transform: uppercase;
	font-weight: 700;
	font-size:1.25rem;
}
.infos{color:var(--pink);}
.infos span + span:before{
	content:"•";
	margin:0 .5rem;
}
.sidebar h2{
	margin:0 0 3rem;
	text-shadow: none;
	font-size:1.25rem;
	text-align: left;
}
.sidebar-contact{
	position: relative;
	margin-top:5rem;
	padding:5rem var(--leading) 3rem;
	background: var(--light_blue);
}
.sidebar-contact svg{
	position:absolute;
	width:5rem;
	right:-1.75rem;
	top:-1.75rem;
}
.sidebar-contact p{
	font-size: 2.2rem;
	line-height: 1.1;
	font-weight: 900;
	text-transform: uppercase;
	width:fit-content;
	margin:0 auto;
}
.sidebar-contact .btn{
	display:block;
	width:fit-content;
	margin:var(--leading) auto 0;
}

/*--------------------------------------------------------------
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;
		--width-s:50rem;
		--width-l:100rem;
	}
	/*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);
	}

	/* Utilities */
	.p-xl{padding:5rem}
	.pt-xl{padding-top:5rem}
	.pb-xl{padding-bottom:5rem}
	.pl-xl{padding-left:5rem}
	.pr-xl{padding-right:5rem}
	.p-xxl{padding:8rem}
	.pt-xxl{padding-top:8rem}
	.pb-xxl{padding-bottom:8rem}
	.pl-xxl{padding-left:8rem}
	.pr-xxl{padding-right:8rem}
	.m-xl{margin:5rem}
	.mt-xl{margin-top:5rem}
	.mb-xl{margin-bottom:5rem}
	.ml-xl{margin-left:5rem}
	.mr-xl{margin-right:5rem}
	.m-xxl{margin:8rem}
	.mt-xxl{margin-top:8rem}
	.mb-xxl{margin-bottom:8rem}
	.ml-xxl{margin-left:8rem}
	.mr-xxl{margin-right:8rem}

	.overflow-t-xl{margin-top:-5rem}
	.overflow-t-xxl{margin-top: -8rem}
	.overflow-b-xl{margin-bottom:-5rem}
	.overflow-b-xxl{margin-bottom: -8rem}

	.mw-40{max-width: 40%}
	.mw-50{max-width: 50%}
	.mw-60{max-width: 60%}

	.align-center .grid{align-items: center}
	.align-bottom .grid{align-items:end}


	.image-left-overflow .grid > *:first-child{margin-left:-8rem}
	.image-right-overflow .grid > *:last-child{margin-right:-8rem}

	/* 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}
	.grid-5-2{grid-template-columns: 5fr 2fr}
	.grid-1-1-1{grid-template-columns: 1fr 1fr 1fr}

	section{
		padding-top:6rem;
		padding-bottom:6rem
	}

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

	/* Main footer */
	.main-footer{
		padding:5rem 0 5rem;
		text-align: left
	}
	.main-footer .grid{text-align: left}
	.main-footer .grid > :last-child{text-align: right}
	.main-footer address{text-align: left}
	.main-footer .social-menu{justify-content: flex-end}

	/* Services */
	.services-list ul{
		position: relative;
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:var(--leading);
		align-items: start;
	}
	.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:first-child .service-cover{
		background: var(--blue);
		color:var(--white)
	}
	.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 */
	.home .logo{display:none}
	.home-logo{display: block}
	.home-intro .grid{
		gap:8rem;
		align-items: center
	}
	.intro-agency{
		padding-left:3rem;
		border-left:2px solid var(--blue)
	}
	.intro-agency p{font-size:3rem}
	.intro-agency .btn{margin-bottom:0}
	.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 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:var(--leading) 0 0}
	.about-content{position: relative}
	.about-content svg{
		display:block;
		height:19rem;
		position:absolute;
		left:100%;
		top:-15rem;
	}
	.team{text-align: center}
	.pitxuteam{text-align: left}
	.pitxuteam h2{text-align: left}
	.pitxuteam figure{
		position: relative;
		background: url("../img/team-bg.png") no-repeat;
		background-size: cover;
	}
	.pitxuteam img{
		transition: background .2s ease-out;
		margin:0
	}
	.pitxuteam figure:hover img{background: rgba(0,0,0,0)}
	.pitxuteam figcaption{
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		padding:3rem 5rem;
		display:flex;
		flex-direction: column;
		justify-content:flex-end;
		font-style: normal;
		opacity:0;
		transition: opacity .2s ease-out;
	}
	.pitxuteam figure:hover figcaption{opacity: 1}
	.pitxuteam figcaption h3{
		background: var(--pink);
		color:var(--white);
		width:fit-content;
		margin:0 auto;
		padding:0 var(--leading)
	}
	.pitxuteam figcaption .job{
		text-align: left;
		text-align-last: right
	}
	.pitxuteam figcaption .job span{
		background: var(--white);
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		color:var(--pink);
		padding:.15rem var(--leading);
		margin:0;
		text-transform: none
	}

	/* Services */
	.agency-services-list .service-cover p, .agency-services-list .service-cover .btn{
		margin-left:-3.25rem;
		margin-right:-3.25rem;
	}
	.services-list.align-stretch ul{align-items: stretch}
	.agency-services-list .service-cover .btn{display: block;}
	.service{margin:5rem 0 10rem}
	.service .grid{align-items: center}
	.service .content{margin-left:3rem}
	.service .mockup{margin-bottom:-10rem}
	.service .grid > *:first-child p:last-child{margin-bottom:0}
	.service-design .grid > *:first-child{order:1}

	/* Single service */
	.service-intro svg{
		display:block;
		position: absolute;
		height:25rem;
		right:100%;
		bottom:-12rem
	}
	.service-quote, .service-referencement{
		margin:0 auto;
		max-width:40rem;
	}
	.service-referencement h2{text-align: center}
	.single-service .grid{gap:3rem}

	/* 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, .filter a:hover, .filter a:focus{
		background: var(--pink);
		color:var(--white);
	}

	/* Project */
	.project .grid{
		gap:3rem;
		margin-top:0;
		margin-bottom:0
	}
	.project .project-intro{margin:3rem 0 8rem}
	.project-pagination svg{
		width:3rem;
	}
	.project-pagination span{display:block}

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

	/* Article */
	.article-title{max-width:calc(5/7*(100% - 5rem))}
	.article > .grid{gap:5rem}

	/* 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){
}