@charset "utf-8";

/* www.alexandre.cc */

*{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
	outline: none;
  font-family: "Fira Sans", sans-serif;
  font-optical-sizing: auto;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
	text-align: inherit;
	line-height: inherit;
	letter-spacing: 0.05rem;
	color: inherit;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: none;
}

html, body{
	width: 100%;
	min-height: 100vh;
	font-size: 62.5%;
	display: flex;
	background: #f0f0f0;
}
html{
	scroll-behavior: smooth;
}

img{ max-width: 100%;}

a, button{ cursor: pointer;}

::selection,
::-moz-selection{ background: #BDB4D4; color: #2E2863;}

input{ -webkit-appearance: none;}



/* CONTENT */

section#content{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-size: 1.8rem;
	line-height: 3.2rem;
	color: #1E1C1A;
	text-align: left;
	font-family: "Fira Sans", sans-serif;
  font-weight: 400;
	background-color: #fafafa;
	overflow: hidden;
}
.home section#content{ font-weight: 500;}
section#content, header, header nav{ max-width: 1920px;}




/* HEADER */


header#header{
	z-index: 9;
	top: 0;
	left: auto;
	position: fixed;
	width: 100%;
}
header.scroll{ background: rgba(46, 40, 99, 0.95);}
.home header.scroll{ background: rgba(0,0,0, 0.9);}

header#header nav,
header#header nav div,
header#header nav ul{
	display: flex;
	width: 100%;
}
header#header nav{ padding: 0 80px 0 220px;}
.home header#header nav{ padding-left: 90px;}
header#header nav ul{
	margin: 0 auto;
	justify-content: center;
}
header nav a{
	display: flex;
	color: #584093;
	padding: 0 3rem;
	height: 100px;
	line-height: 100px;
	font-weight: 500;
}
.references header nav a,
.home header#header nav a{ color: #fff;}
.home header#header nav a,
header#header nav a:hover{ color: #7AC7C0;}

header.scroll nav a{ color: #fff;}
.home header.scroll nav a{ color: #fff;}

.references header nav #menu-item-48 a{ color: #fff; background-color: #7AC7C0;}


header nav .current-menu-item a{
	background: #D6D0E4;
}
.home header nav .current-menu-item a{
	background: none;
}
#content header nav ul a:hover{
	color: #584093;
	background: #DEF1EF;
}
.home #content header nav a:hover{
	color: #fff;
	background: none;
}
#content header nav ul .current-menu-item a:hover{
	color: #D6D0E4;
	background: #584093;
}


header#header nav #telephone,
header#header nav #linkedin {
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 100px;
	height: 100px;
	font-size: 0;
}
header#header nav #linkedin::after {
	content: " ";
	width: 100px;
	height: 100px;
	font-size: 0;
	background-color: #584093;
	-webkit-mask:  url(images/icone-linkedin.svg) no-repeat 50% 50%;
	mask: url(images/icone-linkedin.svg) no-repeat 50% 50%;
	mask-size: 24px;
	-webkit-mask-size: 24px;
}


header#header nav #telephone{
	right: 60px;
}
header#header nav #telephone::after {
	content: " ";
	width: 100px;
	height: 100px;
	font-size: 0;
	background-color: #584093;
	-webkit-mask:  url(images/icone-telephone.svg) no-repeat 50% 50%;
	mask: url(images/icone-telephone.svg) no-repeat 50% 50%;
	mask-size: 24px;
	-webkit-mask-size: 24px;
}


.home header#header nav #telephone::after,
.home header#header nav #linkedin::after,
.references header#header nav #linkedin::after { background-color: #fff;}

.scroll header#header nav #telephone::after{ background: linear-gradient(90deg, #7AC7C0 10%, #584093 100%);}
.scroll header#header nav #linkedin::after{ background: linear-gradient(45deg, #7AC7C0 40%, #584093 67%);}

.scroll header#header nav #telephone:hover::after,
header#header nav #telephone:hover::after,
.scroll header#header nav #linkedin:hover::after,
header#header nav #linkedin:hover::after{ background: linear-gradient(45deg, #7AC7C0 50%, #584093 70%);}


header#header nav #email{
	display: none;
}

header#header #logo,
header#header #picto{
	display: flex;
	position: absolute;
	top: 0;
	height: 100px;
}
header#header #logo{
	left: 70px;
	z-index: 2;
	width: 150px;
	background-image: url(images/logo-menu.svg);
	background-size: auto 100px;
}
.references header#header #logo,
.scroll header#header #logo{ 	background-image: url(images/logo-menu-scroll.svg);}
header#header #picto{
	left: 0;
	width: 100px;
	background-color: #fff;
	-webkit-mask:  url(images/picto-mono.svg) no-repeat 50% 50%;
	mask: url(images/picto-mono.svg) no-repeat 50% 50%;
	mask-size: 48px;
	-webkit-mask-size: 48px;
}
header#header #picto,
.home header#header #logo{ display: none;}
.home header#header #picto{ display: flex;}
.scroll header#header #picto,
header#header #picto:hover{ background: linear-gradient(180deg, #7AC7C0 33%, #584093 67%);}




#burger{
	z-index: 10;
	position: fixed;
	display: none;
	flex-direction: column;
	justify-content: center;
	top: 0;
	right: 0;
	height: 60px;
	width: 60px;
	padding: 0 18px;
}
button.ouvert{ background: #E6594D;}
button.ferme{ background: #7AC7C0;}
button.ferme:hover{ background: #584093;}

button.ferme span,
button.ouvert span{
	width: 24px;
	height: 3px;
}
header button span{
	margin: auto auto 0;
	background: #fff;
}
button.ferme span{
	margin: auto auto 0;
	background: #2E2863;
}
button.ferme span:nth-of-type(2n){ margin: 6px auto 0;}
button.ferme span:last-of-type{ width: 16px; margin: 6px auto auto 0;}
button.ferme:hover span:nth-of-type(2n),
button.ferme:hover span:nth-of-type(3n){ margin-top: 7px; width: 24px;}

button.ferme:hover span{ background: #fff;}

button.ouvert span{
	margin: auto;
	-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
button.ouvert span:nth-of-type(2n){
	margin: -30px auto auto;
	-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
button.ouvert:hover span{ -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
button.ouvert:hover span:nth-of-type(2n){ -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

button.ouvert span:nth-of-type(3n){ display: none; opacity: 0;}

/* FOOTER */

footer{
	position: relative;
	display: flex;
	min-height: 72px;
	padding: 2rem 40px 2rem 82px;
	font-size: 1.4rem;
	color: #9693B1;
	font-weight: 500;
	background-color: #2E2863;
}
.home footer{
	color: #2E2863;
	background-color: #fff;
}
footer::before{
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 72px;
	height: 72px;
	background-color: #9693B1;
	-webkit-mask:  url(images/picto-mono.svg) no-repeat 50% 50%;
	mask: url(images/picto-mono.svg) no-repeat 50% 50%;
	mask-size: 32px auto;
	-webkit-mask-size: 32px auto;
}
.home footer::before{ background-color: #2E2863;}
footer p,
footer nav{
	font-size: 1.6rem;
}
footer p{
	margin: auto 0;
}
footer nav{
	margin: auto 0 auto auto;
}
footer nav ul{
	display: flex;
	flex-wrap: wrap;
}
footer nav ul li::after{
	content: "-";
}
footer nav ul li:last-child::after{
	display: none;
}
footer nav ul a{ padding: 0 0.7rem;}
footer nav ul .current-menu-item a{ color: #7AC7C0; font-weight: 700;}
footer nav ul a:hover{ color: #fff;}
.home footer nav ul a:hover{ color: #7AC7C0;}


/* BASES */

#content .wp-block-greenshift-blocks-row-column{ padding: 0;}
.gspb_row{ width: 100%;}

h1{
	margin-bottom: 20rem;
	font-size: 8rem;
	line-height: 9rem;
	font-weight: 800;
	color: #2E2863;
}
h2, h3{
	padding: 2.8rem 0;
	font-size: 2.8rem;
	line-height: 3.6rem;
	font-weight: 800;
}
h2:first-of-type{ padding-top: 0;}
.home h2{
	padding: 0;
	margin-bottom: 5rem;
	font-size: 8rem;
	line-height: 9rem;
}
h3{
	padding: 2.1rem 0;
	font-size: 2.4rem;
	line-height: 3.2rem;
}
.home h3{
	padding: 0 10% 0 0;
	margin-bottom: 4.8rem;
	font-size: 4.8rem;
	line-height: 5.6rem;
}

p.introduction{
	width: 55%;
	max-width: 920px;
	margin: 0 auto 6rem;
	font-size: 2.1rem;
	line-height: 2.8rem;
}
strong{ font-weight: 800;}

p{
	font-size: 1.8rem;
	line-height: 2.8rem;
	margin-bottom: 2.8rem;
}
p:last-child{ margin-bottom: 0;}

p a{
	border-bottom: 1px solid #584093;
}
p a:hover{
	color: #7AC7C0;
	border-bottom: 1px solid #7AC7C0;
}


/* BOUTONS */

p.bouton{
	display: flex;
	flex-wrap: wrap;
}
p.bouton a{
	display: flex;
	width: auto;
	margin: 0 1rem;
	padding: 0 2.4rem;
	height: 4.8rem;
	line-height: 4.8rem;
	text-transform: uppercase;
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 10rem;
}
p.bouton a:hover{
	color: #7AC7C0;
	border-color: #7AC7C0;
}

p.bouton-grand a{
	padding: 0 3rem;
	height: 6rem;
	line-height: 6rem;
	text-transform: none;
	font-size: 1.6rem;
}
p.bouton-point a{
	position: relative;
	padding-right: 4.8rem;
	text-transform: none;
	font-size: 1.6rem;
}
p.bouton-point a::before,
p.bouton-point a::after{
	position: absolute;
	right: 0;
	top: 0;
	content: "•";
	text-align: center;
	width: 4.8rem;
	height: 4.8rem;
	line-height: 4.8rem;
	font-size: 2.1rem;
}
p.bouton-grand a::before,
p.bouton-grand a::after{
	text-align: center;
	width: 6rem;
	height: 6rem;
	line-height: 6rem;
	font-size: 2.1rem;
}
p.bouton-point a::before{
	opacity: 0;
	content: "→";
}
p.bouton-point-bas a::before{
	font-size: 1.8rem;
}
p.bouton-point-bas a:hover::before{ -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
p.bouton-point a:hover::before{ opacity: 1;}
p.bouton-point a:hover::after{ opacity: 0;}


p.bouton-vert a{
	color: #7AC7C0;
	border-color: #7AC7C0;
}
p.bouton-vert a:hover{
	color: #fff;
	background: #7AC7C0;
	border-color: #7AC7C0;
}
p.bouton-marine a{
	color: #2E2863;
	border-color: #2E2863;
}
p.bouton-marine a:hover{
	color: #78B2C6;
	background: #2E2863;
	border-color: #2E2863;
}
p.bouton-violet a{
	color: #584093;
	border-color: #D6D0E4;
}
p.bouton-violet a:hover{
	color: #584093;
	background: #D6D0E4;
	border-color: #D6D0E4;
}

p.bouton-plein-blanc a{
	color: #2E2863;
	background: #fff;
	border-color: #fff;
}
p.bouton-plein-blanc a:hover{
	color: #fff;
	background: #2E2863;
	border-color: #2E2863;
}

p.bouton-plein-violet-clair a{
	color: #584093;
	background: #D6D0E4;
	border-color: #D6D0E4;
}
p.bouton-plein-violet-clair a:hover{
	color: #D6D0E4;
	background: #584093;
	border-color: #584093;
}

p.bouton-plein-violet-clair a.actif,
p.bouton-plein-violet a{
	color: #D6D0E4;
	background: #584093;
	border-color: #584093;
}
p.bouton-plein-violet-clair a.actif:hover,
p.bouton-plein-violet a:hover{
	color: #D6D0E4;
	background: #25204b;
	border-color: #25204b;
}

p.has-text-align-center a{ margin-left: auto; margin-right: auto;}

.ancre{
	top: 0;
	position: absolute;
	margin-top: -140px;
	width: 1px;
	height: 1px;
	font-size: 0;
}



/* MAIN */

main{
	padding: 30rem 0 10rem;
	min-height: 80vh;
	min-height: calc(100vh - 72px);
}
.home main{ padding: 0;}

.page #content main .wp-block-greenshift-blocks-row:first-child .gspb_row__content{
	width: 90%;
	max-width: 920px;
}
.home #content main .wp-block-greenshift-blocks-row .gspb_row__content,
.home #content main .wp-block-greenshift-blocks-row:first-child .gspb_row__content{
	width: 100%;
	max-width: none;
}



/* SECTIONS */

main .accueil{
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 100px 5% 0;
}
main .accueil .logo{
	margin: auto 0 3rem;
}
main .accueil .logo img{
	max-width: 520px;
	width: 30vw;
	height: auto;
}
main .accueil h1{
	line-height: 2.8rem;
	font-size: 2.1rem;
	font-weight: 700;
	text-transform: uppercase;
	padding-left: 9%;
	margin-bottom: 6rem;
}
main .accueil::before{
	z-index: 0;
	content: " ";
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	-webkit-mask:  url(images/picto-accueil.svg) no-repeat 100% 50%;
	mask: url(images/picto-accueil.svg) no-repeat 100% 50%;
	mask-size: 80vw auto;
	-webkit-mask-size: 80vw auto;
}

#content  main .accueil .bouton-grand{
	margin: auto 0 4rem;
}
#content  main .accueil .gspb_row__content .bouton-grand a{
	color: #fff;
	border-color: #fff;
}
#content  main .accueil .gspb_row__content .bouton-grand a:hover{
	color: #1E1C1A;
	background-color: #fff;
}

#content main .accueil p.bouton{ justify-content: center;}
#content main .accueil p.bouton a{
	margin: 0 1rem 6rem;
	color: #7AC7C0;
	border-color: #7AC7C0;
}
#content main .accueil p.bouton a:hover{
	color: #1E1C1A !important;
	background: #7AC7C0;
}
#content main .accueil p.bouton a:nth-of-type(2n){
	color: #8DCFC9;
	border-color: #8DCFC9;
}
#content main .accueil p.bouton a::hover:nth-of-type(2n){ background: #8DCFC9;}
#content main .accueil p.bouton a:nth-of-type(3n){
	color: #9CD5D0;
	border-color: #9CD5D0;
}
#content main .accueil p.bouton a:hover:nth-of-type(3n){ background: #9CD5D0;}
#content main .accueil p.bouton a:nth-of-type(4n){
	color: #AADBD7;
	border-color: #AADBD7;
}
#content main .accueil p.bouton a:hover:nth-of-type(4n){ background: #AADBD7;}
#content main .accueil p.bouton a:nth-of-type(5n){
	color: #B9E2DE;
	border-color: #B9E2DE;
}
#content main .accueil p.bouton a:hover:nth-of-type(5n){ background: #B9E2DE;}


/* QSN - Services */

#content main .qsn,
#content main .services,
#content main .univers,
#content main .references,
#content main .confiance,
#content main .contact{
	padding: 15vh 5%;
}
#content main .univers{ padding-top: 7.5vh; padding-bottom: 0;}
#content main .references{ padding-top: 20vh;}
#content main .contact{ padding-top: 2vh;}


/* DÉGRADÉS */

#content main .degrade-vert-clair-bleu-pastel{ background: linear-gradient(175deg, #BCE3DF 8%, #7AC7C0 50%, #6983A9 92%);}
#content main .degrade-bleu-pastel-violet-cyan{ background: linear-gradient(175deg, #6983A9 8%, #584093 20%, #26214C 40%, #26223E 55%, #2E2863 60%, #584093 70%, #76B4C1 92%);}
#content main .degrade-cyan-blanc{ background: linear-gradient(175deg, #76b4c1 10%, #AFD3DB 30%, #fff 50%);}
#content main .degrade-blanc-violet{ background: linear-gradient(175deg, #fff 5%, #D6D0E4 20%, #584093 67%);}
#content main .degrade-violet-violet-fonce{ background: linear-gradient(175deg, #584093 10%, #25204b 90%);}




/* SERVICES */

#content .services-liste .wp-block-greenshift-blocks-row-column{
 	margin-bottom: 1.8vw;
	padding: 6rem 4rem 10rem;
}
#content .services-liste .wp-block-greenshift-blocks-row-column .wp-block-greenshift-blocks-row-column{ padding: 0; margin: 0;}
.services-liste h3{
	display: flex;
	flex-direction: column;
	font-size: 2.8rem;
	line-height: 3.2rem;
	margin-top: 2.1rem;
	padding-top: 0.5rem;
}
.services-liste h3#surete{ margin-bottom: 2rem;}
.services-liste h3 em{
	margin-top: 1.8rem;
	line-height: 2.1rem;
	font-size: 1.8rem;
	font-weight: 500;
}
.services-liste figure{
	margin-left: auto;
	margin-right: 0;
}
.services-liste figure,
.services-liste figure img{
	display: flex;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 10rem;
}
.services-liste figure{
	border: 1px solid rgba(255, 255, 255, 0.33);
}
.services-liste .wp-block-greenshift-blocks-row-column:hover figure{ border: 1px solid rgba(255, 255, 255, 0.7);}

.services-liste .services-itcab figure{ border: 1px solid rgba(46, 40, 99, 0.4);}
.services-liste .wp-block-greenshift-blocks-row-column:hover .services-itcab figure{ border: 1px solid rgba(46, 40, 99, 1);}

.services-liste ul{
	margin-top: 4.8rem;
	font-weight: 700;
}
.services-liste ul li{
	position: relative;
	list-style: none;
	font-size: 1.6rem;
	line-height: 2.6rem;
	padding-left: 2rem;
	margin-bottom: 1rem;
}
.services-liste ul li:last-child{ margin-bottom: 0;}
.services-liste ul li::before{
	position: absolute;
	left: 0;
	content: "›";
	margin-right: 2rem;
}



/* UNIVERS */

.univers h3{
	font-size: 1.8rem;
	margin-top: 2.1rem;
	margin-bottom: 0rem;
}
#content .univers-liste{
	margin-top: 6rem;
}
#content .univers-liste .wp-block-greenshift-blocks-row-column{
	padding: 2rem;
}
.univers-liste figure,
.univers-liste figure img{
	display: flex;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 10rem;
}
.univers-liste figure{
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.univers-liste .wp-block-greenshift-blocks-row-column:hover figure{ border: 1px solid rgba(255, 255, 255, 1);}

.univers-liste p{
	font-size: 1.6rem;
	line-height: 2.6rem;
	padding-right: 1rem;
}


.univers-liste h3,
.univers-liste p{
	text-shadow: 2px 2px 8rem rgba(0,0,0, 0.4);
}



/* EQUIPE */

#content .notre-equipe{
	margin-top: 20rem;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 3.2rem;
}
#content .notre-equipe .introduction{
	margin-left: 0;
}
#content .notre-equipe-liste{
	margin-top: 12rem;
}
#content .notre-equipe .gspb_row__content .gspb_row__content .wp-block-greenshift-blocks-row-column{
	margin-bottom: 5vw;
}
#content .notre-equipe .gspb_row__content .gspb_row__content .wp-block-greenshift-blocks-row-column  .wp-block-greenshift-blocks-row-column{
	margin-bottom: 0;
}
#content .notre-equipe p:first-child{
	margin-bottom: 0;
}
#content .notre-equipe .gspb_row__content .gspb_row__content p:first-of-type strong{
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.15rem;
}
#content .notre-equipe h3{
	margin: 1.8rem 0 1.8rem;
	font-size: 3.6rem;
	line-height: 3.6rem;
}
#content .notre-equipe p{
	margin-bottom: 1.4rem;
}
#content .notre-equipe .photo{
	width: 80%;
	height: 24vw;
	margin-bottom: 2rem;
}
#content .notre-equipe .photo .wp-block-greenshift-blocks-row-column{
	position: relative;
}
#content .notre-equipe .photo p{
	position: absolute;
	bottom: 0;
	right: 0;
}
#content .notre-equipe .photo a{
	display: flex;
	width: 60px;
	height: 60px;
	font-size: 0;
	background: #2E2863;
	border: none;
}
#content .notre-equipe .photo:hover a{ background: #D5CFE4;}
#content .notre-equipe .photo:hover a:hover{ background: #0A66C2;}
#content .notre-equipe .photo a::after{
	display: flex;
	width: 60px;
	height: 60px;
	content: " ";
	background-color: #D5CFE4;
	-webkit-mask:  url(images/icone-linkedin-seul.svg) no-repeat 50% 50%;
	mask: url(images/icone-linkedin-seul.svg) no-repeat 50% 50%;
	mask-size: 50px auto;
	-webkit-mask-size: 50px auto;
}
#content .notre-equipe .photo:hover a::after{ background-color: #2E2863;}
#content .notre-equipe .photo:hover a:hover::after{ background-color: #fff;}

#content .notre-equipe a{
	font-weight: 700;
	border: none;
}


/* REFERENCES */

#references{
	display: flex;
	flex-direction: column;
	margin-bottom: 10rem;
}
#references p.categories{
	display: flex;
	justify-content: center;
}
#references p.categories a{
	margin-bottom: 3rem;
}
#references a.reference{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: 30vh 10%;
	font-weight: 800;
	font-size: 14rem;
	line-height: 14rem;
	color: rgba(255, 255, 255, 0.67);
	background-position: center;
	background-size: cover;
	background-color: #25204b;
}
#references a.reference em{
	font-style: normal;
	font-size: 4.8rem;
	line-height: 6rem;
	text-transform: uppercase;
	letter-spacing: 2.5rem;
}
#references a.reference:hover{ color: #fff;}


/* LOGOS CONFIANCE */

#logos-confiance{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#logos-confiance p{
	display: flex;
	margin: 0 auto 0;
	width: 16vw;
	height: 16vw;
	background-color: #bdb4d4;
	mask-size: 100% auto;
	-webkit-mask-size: 100% auto;
}
#logos-confiance p:hover{ background-color: #fff;}

/* CONTACT */

#content main .contact {
	font-weight: 400;
	background-size: 1920px 1080px;
}

#content main .contact ul{
	padding-left: 2rem;
	margin-bottom: 2.8rem;
}

#content main .contact h3{
	margin-top: 8rem;
}

#content form{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#content form p{
	display: flex;
	flex-direction: column;
	width: 47%;
	margin: 0 auto 3.2rem 0;
}
#content form p:nth-child(2n+1){
	margin-left: auto;
	margin-right: 0;
}
#content form p.message,
#content form p.submit{
	width: 100%;
}
#content .contact form label{
	padding-bottom: 1rem;
	color: #D6D0E4;
}
#content .contact form input,
#content .contact form textarea{
	display: flex;
	width: 100%;
	padding: 0 3rem;
	line-height: 3.6rem;
	color: #584093;
	background: #fff;
}
#content .contact form textarea{
	padding: 2rem 3rem;
}
#content .contact form p.submit{
	width: auto;
	margin: 0 0 0 auto;
}
#content .contact form input[type="submit"]{
	padding: 0 8.4rem;
	font-weight: 700;
	line-height: 5.6rem;
	text-transform: uppercase;
	background: #D6D0E4;
	cursor: pointer;
}
#content .contact form input[type="submit"]:hover{
	color: #fff;
	background: #7AC7C0;
}

#content .wpcf7 form.sent .wpcf7-response-output,
#content .wpcf7 form .wpcf7-response-output,
#content .contact form .wpcf7-not-valid-tip{
	min-width: 100%;
	margin-top: 1rem;
	padding: 1rem 2rem;
	font-size: 1.4rem;
	font-weight: 500;
	font-style: italic;
	color: #E6594D;
	background: #D6D0E4;
	border-radius: 1rem;
}

#content .wpcf7 form .wpcf7-response-output{
	font-size: 1.6rem;
}
#content .wpcf7 form.failed .wpcf7-response-output,
#content .wpcf7 form.aborted .wpcf7-response-output,
#content .wpcf7 form.invalid .wpcf7-response-output{
	color: #fff;
	background: #E6594D;
	border-color: #E6594D;
}

#content .wpcf7 form.sent .wpcf7-response-output{
	color: #584093;
	background: #7AC7C0;
	border-color: #7AC7C0;
}

/* PAGES */



/* RÉFÉRENCES */

#liste-references{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10rem 5%;
}
#filtres{
	display: flex;
	width: 90%;
	max-width: 920px;
	margin: 0 auto 6rem;
}
#filtres em{
	display: flex;
	flex-grow: 0;
	margin: 0 auto 0 0;
	padding: 4px 2rem;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.33rem;
	text-transform: uppercase;
	color: #584093;
  background: #D6D0E4;
	border-radius: 10rem;
}

#filtres select,
#filtres option,
#filtres input{
	display: flex;
	line-height: 2.8rem;
	margin-left: 1.8rem;
	padding: 0 2.1rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: #584093;
	border: 1px solid #D6D0E4;
	border-radius: 4rem;
}
#filtres input[type="submit"]{
	color: #D6D0E4;
  background: #584093;
	border-color: #584093;
	cursor: pointer;
}
#filtres input[type="submit"]:hover{
	color: #fff;
  background: #7AC7C0;
	border-color: #7AC7C0;
}

#liste-references #articles{
	display: flex;
	flex-wrap: wrap;
}

#liste-references article{
	display: flex;
	justify-content: center;
	width: 33.33%;
	background-size: cover;
	background-position: center;
}
#liste-references article a{
	display: flex;
	margin: 0;
	width: 100%;
	height: 30vw;
	background: rgba(0,0,0, 0.2);
}
#liste-references article a:hover{ background: rgba(255, 255, 255, 0.1);}
#liste-references article a strong{
	margin: auto;
	text-align: center;
	color: #fff;
	line-height: 4.8rem;
	font-size: 4.2rem;
	font-weight: 700;
	padding: 3rem;
}



/* RÉFÉRENCE */

.references main{ padding-top: 0;}

#reference{
	display: flex;
	flex-direction: column;
}

#reference .entete{
	display: flex;
	flex-direction: column;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#reference .entete .noir{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding: 40rem 5% 2rem;
	color: #fff;
	background: rgba(0,0,0, 0.33);
}
#reference .entete em{
	margin-bottom: 3rem;
	text-align: center;
	font-size: 2.4rem;
	text-transform: uppercase;
	font-style: normal;
	letter-spacing: 1.25rem;
	font-weight: 500;
}
#reference .entete h1{
	margin-bottom: 4rem;
	text-align: center;
	font-size: 8rem;
	line-height: 9rem;
	color: #fff;
}
#reference .plus,
#reference .categories{
	display: flex;
	justify-content: center;
	margin-bottom: 16rem;
}
#reference .plus{
	margin-bottom: 3rem;
}
#reference .categories a{ margin-bottom: 3rem;}
#reference .textes{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 15rem 5% 5rem;
	max-width: 1080px;
	margin: 0 auto;
	color: #2E2863;
}


/* PAGE 404 */

div.page{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
	padding-left: 5%;
	padding-right: 5%;
	justify-content: center;
}


/* BRETAGNE */

.page-template-bretagne main{
	position: relative;
	color: #2E2863;
}
.page-template-bretagne main::before{
	z-index: 1;
	position: absolute;
	content: " ";
	top: -120px;
	right: 0;
	width: 50vw;
	height: 75vw;
	background-image: url('images/bretagne-page.svg');
	background-size: cover;
	background-position: left top;
	opacity: 0.1;
}
.page-template-bretagne main .wp-block-greenshift-blocks-row{
	z-index: 2;
	position: relative;
}



*,
.t50{-webkit-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);
	-ms-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);}


header
{-webkit-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
	-ms-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 1s cubic-bezier(0.86, 0, 0.07, 1); transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);}





/* ADMIN */

.admin-bar #burger,
.admin-bar header#header{ top: 32px;}




/* MAX-WIDTH */

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

	html, body{ font-size: 62%;}

	#content main .contact {
		background-size: 110vw auto;
	}
}

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

	html, body{ font-size: 61%;}
}

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

	html, body{ font-size: 60%;}

	main .accueil h1{ padding-left: 10%;}
}

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

	html, body{ font-size: 59%;}
}

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

	html, body{ font-size: 58%;}

	header#header #logo{ left: 20px;}
}

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

	html, body{ font-size: 57%;}

	#content main .references{ padding-left: 2.5%; padding-right: 2.5%;}
}

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

	html, body{ font-size: 56%;}

	header#header #logo{
		left: 10px;
		width: 140px;
		background-size: auto 90px;
	}
	header#header nav{ padding-left: 150px; padding-right: 70px;}
	header nav a{ padding: 0 2rem;}
	header#header nav #linkedin{ width: 80px;}

	main .accueil h1{ padding-left: 14%;}

	#content .notre-equipe h3{ font-size: 3.2rem;}

	#content main .contact {
    background-size: 105vw auto;
  }
}

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

	html, body{ font-size: 55%;}

	footer{
		flex-direction: column;
	}
	footer p,
	footer nav{
		margin: auto;
	}
	footer nav{ margin-top: 3rem;}

	main .accueil .logo img{ width: 40vw;}
	p.introduction{ width: 67%;}

	#content .notre-equipe .photo{ height: 33vw;}

	#content main .contact {
    background-size: 120vw auto;
  }
}

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

	html, body{ font-size: 54%;}

	header nav a{ padding: 0 1.8rem;}
}

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

	html, body{ font-size: 53%;}

	header#header #picto{ display: flex; background-color: #584093;}
	.home header#header #picto{ display: flex; background-color: #fff;}
	header#header #logo{ display: none;}

	header#header nav{ padding-left: 80px;}
	header nav a{ padding: 0 1.6rem;}

	main .accueil .logo img {
		width: 50vw;
	}
	#content .services-liste .wp-block-greenshift-blocks-row-column {
  	margin-bottom: 4vw;
	}

	p.introduction{ width: 100%;}

	#liste-references article{ width: 50%;}
	#liste-references article a{ height: 45vw;}

	.page-template-bretagne main::before{
		top: -60px;
	}
}

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

	html, body{ font-size: 52%;}

	header nav a{ padding: 0 1.4rem;}
}

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

	html, body{ font-size: 51%;}

	header#header nav {
		 padding-left: 76px;
		 padding-right: 56px;
	 }
	.home header#header nav {
	  padding-left: 76px;
	}
	header nav a{ padding: 0 1rem;}

	main{ padding-top: 25rem;}
	#reference .entete h1,
	h1,
	.home h2 {
	  font-size: 7.2rem;
	  line-height: 8rem;
	}

	#content .notre-equipe .gspb_row__content .gspb_row__content .wp-block-greenshift-blocks-row-column { margin-bottom: 8rem;}
	#content .notre-equipe .photo{ height: 45vw;}

	#references a.reference {
	  font-size: 12rem;
	  line-height: 12rem;
	}
	#references a.reference em {
	  font-size: 4.2rem;
	  line-height: 5.6rem;
	}

	#content main .confiance{ padding-bottom: 4rem;}
	#content main .contact{
		padding-top: 67vw;
		background-size: 200vw auto;
		background-position: -25% 0%;
	}

	.page-template-bretagne main::before{
		top: 24rem;
		width: 75vw;
  	height: 110vw;
	}

	#filtres{
		width: 100%;
		flex-direction: column;
	}

	#filtres em,
	#filtres select{
		margin-bottom: 2rem;
	}

	#filtres select,
	#filtres option, #filtres input {
		min-height: 3.6rem;
		line-height: 3.6rem;
		margin-left: 0;
		margin-right: auto;
	}
	#filtres input[type="submit"]{
		min-height: 4.8rem;
		line-height: 4.8rem;
		margin-right: auto;
	}

	#reference .entete .noir{ padding-top: 12rem;}
	#reference .entete em{ margin-top: auto;}
	#reference .plus{ margin-bottom: auto;}

}

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

	html, body{ font-size: 50%;}

	header#header nav #email,
	header#header nav #telephone,
	#burger{ display: flex;}

	header#header #picto{
		height: 60px;
	}

	#content header #logo,
	#content .home header #logo {
	display: none;
		left: 0;
		width: 100%;
		height: 60px;
		background-image: url(images/logo-menu-scroll.svg);
		background-repeat: no-repeat;
		background-position: center;
  	background-size: auto 100px;
		opacity: 0;
	}

	.home header#header nav,
	header#header nav{
		display: none;
		top: 0;
		position: absolute;
		width: 100vw;
		height: 100vh;
		padding: 60px 0 40px;
		background: #1E1C1A;
		opacity: 0;
	}

	#content header.ouverte #logo,
	#content .home header.ouverte #logo,
	#content .home header.ouverte nav,
	#content header.ouverte nav{
		display: flex;
		opacity: 1;
	}

	header#header nav,
	header#header nav ul{
		flex-direction: column;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}
	.home header#header nav ul a,
	header#header nav ul a,
	header#header nav #email,
	header#header nav #telephone,
	header#header nav #linkedin{
		order: 1;
		position: relative;
		width: 100%;
		height: 8vh;
		line-height: 8vh;
		justify-content: center;
		color: #fff;
		font-size: 2.1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
	header#header nav #email,
	header#header nav #telephone,
	header#header nav #linkedin{
		color: #D6D0E4;
	}
	.home header#header nav ul a:hover,
	header#header nav ul a:hover{
		color: #fff;
		background: #7AC7C0;
		border-top: 1px solid rgba(255, 255, 255, 0);
	}
	#content header nav ul .current-menu-item a {
	  color: #584093;
	  background: #D6D0E4;
	}
	.home #content header nav ul .current-menu-item a { color: #fff; background: none;}
	.home #content header nav ul .current-menu-item:first-of-type a { color: #584093; background: #D6D0E4;}

	header#header nav #email{ margin-top: auto;}
	header#header nav #linkedin{
		order: 2;
		margin-bottom: 2rem;
	}

	header#header nav #telephone{ right: auto;}
	.home header#header nav #telephone::after,
	header#header nav #telephone::after,
	.home header#header nav #linkedin::after,
	header#header nav #linkedin::after{
		width: 48px;
		height: 8vh;
		background-color: #D6D0E4;
	}

	footer p{ line-height: 2.1rem;}

	section#content{ font-size: 2.1rem;}
	p {
	  font-size: 2.1rem;
	  line-height: 3.2rem;
	  margin-bottom: 3.2rem;
	}

	#content main .degrade-bleu-pastel-violet-cyan { background: linear-gradient(175deg, #6983A9 8%, #584093 20%, #26214C 30%,  #26223E 45%, #26223E 55%, #2E2863 65%, #584093 70%, #76B4C1 92%);}

	.univers-liste p,
	.services-liste ul li {
	  font-size: 1.8rem;
	  line-height: 2.8rem;
	}
	.univers h3 {
	  font-size: 2.1rem;
		padding-right: 0;
	}

	main .accueil{
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
	#content main .accueil p.bouton a{ margin-bottom: 2rem;}
	#content main .accueil p:last-child a{ margin-bottom: 8rem;}

	#references a.reference {
		padding-left: 5%;
		padding-right: 5%;
	  font-size: 10rem;
	  line-height: 12rem;
	}
	#references a.reference em {
	  font-size: 3.6rem;
	  line-height: 4.8rem;
	}

	#logos-confiance p {
	  width: 22vw;
	  height: 22vw;
	}

	.home #content header.scroll #picto { background: #2E2863;}

	#reference .entete em{ font-size: 2.1rem;}
}

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

	html, body{ font-size: 49%;}

	#content .notre-equipe .photo{ height: 90vw;}
	#content .notre-equipe .gspb_row__content .gspb_row__content .wp-block-greenshift-blocks-row-column { margin-bottom: 6rem;}

	#liste-references article{ width: 100%;}
	#liste-references article a{ height: 90vw;}

	#reference .entete h1,
	h1,
	.home h2 {
	 font-size: 6.6rem;
	 line-height: 7.6rem;
 }
 .home h2 {
	  margin-bottom: 5rem;
	}

	main{ padding-top: 20rem;}
	.page-template-bretagne main::before{ top: 20rem;}

	#content .univers-liste .wp-block-greenshift-blocks-row-column{
		max-width: 320px;
		margin: 0 auto 4rem;
	}
	.univers-liste figure{ margin: 0 auto;}
	.univers-liste h3,
	.univers-liste p{ text-align: center;}

	#content form p.submit,
	#content form p{ width: 100%; margin-left: 0; margin-right: 0;}
	#content form input[type="submit"]{ text-align: center;}
}

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

	html, body{ font-size: 48%;}

	#content .notre-equipe .photo{
		width: 80%; height: 100vw;
		max-width: 280px;
		max-height: 400px;
	}

	#content main .references{
		padding: 0;
	}
	#content main .references p,
	#content main .references h2{
		padding-left: 5%;
		padding-right: 5%;
	}
	#references a.reference {
		padding: 25vh 2.5%;
	  font-size: 9rem;
	  line-height: 12rem;
	}
	#references a.reference em {
	  font-size: 3.2rem;
	  line-height: 4.2rem;
	}

	#content main .contact {
    background-size: 240vw auto;
		background-position: -10% 0%;
  }

	#logos-confiance p {
	 width: 30vw;
	 height: 30vw;
 }
}

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

	html, body{ font-size: 46%;}

	footer nav{ margin-left: 0;}
	footer nav ul{ flex-direction: column;}
	footer nav ul a{ display: block; padding: 1rem 2rem 1rem 0; width: 100%;}
	footer nav ul li::after{ display: none;}

	#references a.reference {
	  font-size: 7.2rem;
	  line-height: 10rem;
	}
	#references a.reference em {
	  font-size: 2.8rem;
	}

	#content .notre-equipe .photo{ width: 100%; height: 120vw;}

	#reference .entete h1,
	h1,
	.home h2 {
	 font-size: 4.8rem;
	 line-height: 5.6rem;
 }

 	#reference .entete em{ font-size: 1.8rem;}
}

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

	html, body{ font-size: 44%;}

	#references a.reference {
	  font-size: 6rem;
	  line-height: 9rem;
	}
	#references a.reference em {
	  font-size: 2.1rem;
	}
}