@charset "UTF-8";
/*
Theme Name: LEBLEU
Author: LEBLEU
Author URI: https://equipelebleu.com/
Version: 3.0.0
Text Domain: wplebleu
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* Variables */
:root {
	--themeprincipal: #39404A;
	--blanc : white;
	--noir : black;
	--bleu: #4294D0;
	--textebleu: #0083C8;
}


/* cacher WPML mode dev 
.otgs-development-site-front-end,
.wpml-ls-statics-footer {
	display: none !important;
}*/

#evneWrapper, body{
	background-color: var(--bleu);
}

.bg-blue{
	background-color: var(--bleu);
}

/* FORM MESSAGE */
#form-confirmation{
	padding: 16px;
	background: green;
	border-radius: 8px;
	margin-bottom: 32px;
	width: fit-content;
	color: #FFF;
	font-family: 'Anton', serif;
	font-size: 20px;
	position: fixed;
	top: 24px;
	left: 24px;
	z-index: 999;
	max-width: calc(100vh - 48px);
}

/* Hero V1 */
#hero{
	position: relative;
}

#hero header{
	display: flex;
	padding: 12px 48px;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	align-self: stretch;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 5;
}

#hero header .logo a{
	display: block;
}

#hero header .socials{
	display: flex;
	gap: 12px;
	align-items: center;
}

#hero header .socials a:not(:nth-child(2)) img{
	height: 30px;
	width: auto;
}

#hero .bus{
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: 100 / 65;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	display: flex;
	align-items: flex-end;
}

#hero .bus .content{
	display: block;
	width: 100%;
	height: auto;
	display: flex;
	padding: 12px 48px 100px;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

#hero .bus .content button,
#hero .bus .content a{
	color: #0083C8;
	font-family: 'Anton', serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	display: flex;
	width: fit-content;
	padding: 20px 40px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 100px;
	background: #FFF;
	border: none;
	cursor: pointer;
}

#hero .bus .content .logos{
	display: flex;
	gap: 24px;
	align-items: center;
}

#hero .bus .content .logos img:not(.scfp){
	height: 100px;
	width: auto;
}

@media screen and (max-width: 1024px) {
	#hero .bus .content button{
		font-size: 24px;
		padding: 12px 18px;
	}

	#hero .bus .content .logos img:not(.scfp){
		height: 60px;
		width: auto;
	}

	#hero .bus .content .logos img.scfp{
		height: 30px;
		width: auto;
	}
}

@media screen and (max-width: 768px) {
	#hero header{		
		position: relative;
		background: var(--textebleu);
		border-bottom: 1px solid white;
	}

	#hero .bus{
		aspect-ratio: auto;
		background-size: contain;
	}

	#hero .bus .content{
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 60vw;
	}

	#hero .bus .content .logos{
		width: 100%;
		order: 1;
		justify-content: center;
	}

	#hero .bus .content button{
		margin-top: 32px;
		order: 2;
	}
}

@media screen and (max-width: 550px) {
	#hero header .logo img{
		height: 26px;
		width: auto;
	}

	#hero .bus .content{
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 50vw;
		padding: 12px 48px 0;
	}
}

/* Textimg */
#textimg{
	position: relative;
	z-index: 2;
	padding-top: 0;
}

#textimg .container{
	position: relative;
	z-index: 2;
}

#textimg .radial-1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.5;
}

#textimg .radial-1 img{
	width: auto;
	height: 100%;
	object-fit: contain;
}

#textimg .container > div + div{
	margin-top: 24px;
}

#textimg p{
	font-size: 32px;
	line-height: 120%;
	font-weight: 500;
	color: white;
}

#textimg-img{
	position: relative;
	z-index: 2;
	padding-bottom: 140px;
}

#textimg-img .box-about-image {
	max-width: 1080px;
	aspect-ratio: 4 / 3;
	height: auto;
	margin: 0 auto;
	border-radius: 40px;
	position: relative;
	overflow: hidden;
}

#textimg-img img{
	border-radius: 32px;
	object-fit: cover;
}

@media screen and (max-width: 992px) {
	#textimg{
		padding-top: 72px;
	}

	#textimg p{
		font-size: 24px;
	}
}

@media screen and (max-width: 768px) {
	#textimg p{
		font-size: 20px;
	}	
}

@media screen and (max-width: 550px) {
	#textimg-img{
		padding-bottom: 50px;
	}
}

/* Text stroke */
#textstroke{
	padding-top: 20px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#textstroke .container{
	position: relative;
	z-index: 2;
}

#textstroke .radial-1{
	position: absolute;
	top: -10vw;
	left: 55%;
	z-index: 1;
	opacity: 0.5;
	width: fit-content;
}

#textstroke .radial-2{
	position: absolute;
	top: 160px;
	left: 20%;
	z-index: 1;
	opacity: 0.5;
	width: fit-content;
}

#textstroke p{
	color: #FFF;
	font-size: 32px;
	font-weight: 500;
	line-height: 120%;
	text-shadow: 0px 0px 26.014px rgba(0, 0, 0, 0.25);
	max-width: 920px;
	margin: 0 auto 24px;
}

#textstroke h2{
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: var(--color-light);
	text-transform: uppercase;
	font-family: "Anton", serif;
	font-weight: 400;
	font-size: 96px;
	font-style: normal;
}

#textstroke h2 .line-0,
#textstroke h2 .line-1,
#textstroke h2 .line-2,
#textstroke h2 .line-3,
#textstroke h2 .line-4{
	line-height: 160%;
}

#textstroke h2 .line-0:after,
#textstroke h2 .line-1:after,
#textstroke h2 .line-2:after,
#textstroke h2 .line-3:after,
#textstroke h2 .line-4:after{
	display: none !important;
}

.animate-fill-text div{
	background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgba(0, 0, 0, 0) 50%);
    background-position-x: 100%;
    color: rgba(0, 0, 0, 0);
    background-clip: text;
    -webkit-background-clip: text;
	background-size: 300% 150%;
}

#textstroke .studio-image-2{
	transform: translate(-100%, 25%);
}

@media screen and (max-width: 992px) {
	#textstroke p{
		font-size: 24px;
	}

	#textstroke h2{
		font-size: 64px;
	}
}

@media screen and (max-width: 768px) {
	#textstroke p{
		font-size: 20px;
	}	

	#textstroke h2{
		font-size: 48px;
	}
}

/* Pinned text */
#pinnedtext .con{
	background-color: #FFF;
}

/* #pinnedtext header > div{
	position: sticky;
	top: 50px;
} */

#pinnedtext header h2{
	font-family: "Anton", serif;
	font-weight: 400;
	font-size: 60px;
	text-transform: uppercase;
}

#pinnedtext header h2 span{
	color: var(--textebleu);
}

#pinnedtext header p{
	color: rgba(0, 0, 0, 0.75);
	font-weight: 500;
	font-size: 20px;
	line-height: 150%;
}

#pinnedtext .award{
	margin-bottom: 48px;
	padding-bottom: 48px;
}

#pinnedtext .award .award-image{
	height: fit-content !important;
	margin: 0 auto 32px;
}

#pinnedtext .award p{
	font-weight: 500;
	font-size: 20px;
	line-height: 150%;
}

@media screen and (max-width: 1024px) {
	#pinnedtext header h2{
		font-family: "Anton", serif;
		font-weight: 400;
		font-size: 48px;
		text-transform: uppercase;
	}
}

/* VIDEO */
#video{
	position: relative;
	z-index: 1;
	padding-top: 0;
}

#video .container{
	position: relative;
	z-index: 2;
}

#video .radial-1{
	position: absolute;
	top: 100px;
	left: 0;
	z-index: 1;
	opacity: 0.5;
	width: fit-content;
}

#video .radial-2{
	position: absolute;
	top: 150px;
	right: 0;
	z-index: 1;
	opacity: 0.5;
	width: fit-content;
}

#video .section-title h2{
	font-family: "Anton", serif;
	font-weight: 400;
	font-size: 160px;
	text-transform: uppercase;
	color: #000;
	line-height: 1;	
    padding-top: 0.18em;
}

#video .section-title h2 span{
	color: #FFF;
}

#video .section-title p{
	font-weight: 400;
	font-size: 20px;
	color: #FFF;
}

#video .video-title{
	color: #FFF;
	font-size: 64px;
	font-weight: 400;
	font-family: 'Anton', serif;
}

#video .play-button{
	background: var(--textebleu);
}

#video .play-button:hover{
	background: #FFF;
}

#video .play-button:hover svg g{
	fill: var(--textebleu);
}

#video .section-share{
	display: flex;
	align-items: center;
}

#video .section-share .text-share{
	position: relative;
	display: flex;
	align-items: center;
	gap: 3px;
}

#video .section-share .text-share::after{
	content: "";
	display: block;
	height: 1px;
	background: #FFF;
	width: 150px;
	margin: 0 12px;
}

#video .section-share p{
	color: #FFF;
	font-family: 'Anton', serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	flex-shrink: 0;
	text-transform: uppercase;
}

#video .section-share .btn-share{
	display: flex;
	align-items: center;
	gap: 12px;
}

#video .section-share a{
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

#video .section-share a img{
	height: 32px;
	width: 32px;
	object-fit: contain;
}
#video .section-share a img.x{
	height: 20px;
}

@media screen and (max-width: 1024px) {
	#video .section-title h2{
		font-size: 90px;
	}
}

@media screen and (max-width: 768px) {
	#video .section-title h2{
		font-size: 56px;
	}

	#video .video-title{
		color: #FFF;
		font-size: 42px;
		font-weight: 400;
		font-family: 'Anton', serif;
	}
}

@media screen and (max-width: 550px) {
	#video .section-share{
		margin-top: 24px !important;
		align-items: flex-start;
		gap: 16px;
		flex-direction: column;
	}
	
	#video .section-share .text-share::after{
		display: none;
	}
}

/* FORM */
#form{
	margin-bottom: 0;
	position: relative;
	z-index: 100;
	margin-top: 0;
}

#form #message{
    padding: 16px;
    background: green;
    border-radius: 8px;
    margin-bottom: 32px;
    width: fit-content;
}

#form #message p{
    color: #FFF !important;
	font-family: 'Anton', serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
}

#form .con-projects{
	border: 1px solid rgba(0, 0, 0, 0.3);
}

#form .con-projects.scroll-class{
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.8);
}

#form .con-projects.scroll-class .section-title h2 span{
	color: var(--textebleu);
}

#form .section-title h2{
	font-family: "Anton", serif;
	font-weight: 400;
	font-size: 160px;
	line-height: 100%;
	text-transform: uppercase;
}

#form .form .acf-fields{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -24px;
}

#form .form .acf-fields > *{
	width: 50%;
	padding: 24px;
	border-top: none;
}


#form .form .acf-fields > .acf-field-textarea{
	width: 100%;
}

#form .form .acf-fields label{
	color: black;
}

#form .form .acf-fields input,
#form .form .acf-fields textarea{
	border: 2px solid var(--textebleu);
	background: #FFF;
	border-radius: 40px;
	padding: 16px 24px;
	font-size: 20px;
	color: black;
}

#form .form .acf-fields textarea{
    height: fit-content;
}

#form .form .acf-fields button{
	color: #FFF;
	display: flex;
	padding: 16px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-family: 'Anton', serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border-radius: 40px;
	background: #0083C8;
}

#form ul li{
	font-weight: 400;
	font-size: 20px;
	color: black;
	margin-bottom: 8px;
	font-weight: 500;
	position: relative;
	padding-left: 24px;
}

#form ul li + li{
	margin-top: 12px;
}

#form ul li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 16px;
	height: 2px;
	background: black;

}

#form ul li span{
	opacity: 0.5;
	display: inline;
	font-weight: 400;
}

#form .xtra-strong{
	text-transform: uppercase;
	font-weight: 900;
	font-size: 20px;
	margin-top: 16px;
}

@media screen and (max-width: 1024px) {
	#form .section-title h2{
		font-size: 90px;
	}

	#form .form .acf-fields{
		margin: -16px;
	}
	
	#form .form .acf-fields > *{
		padding: 16px;
	}

	#form .form .acf-fields > *:nth-child(5){
		width: 100%;
	}
}


@media screen and (max-width: 992px) {
    #form .form .acf-fields textarea{
        height: 390px;
    }
}

@media screen and (max-width: 768px) {
	#form .section-title h2{
		font-size: 56px;
	}	

	#form .form .acf-fields{
		margin: -16px;
	}
	
	#form .form .acf-fields > *{
		width: 100%;
	}

	#form .form .acf-fields input{
		padding: 12px 16px;
	}
	
    #form .form .acf-fields textarea{
        height: 460px;
    }
}

@media screen and (max-width: 550px) {
    #form .form .acf-fields textarea{
        height: 565px;
    }
}

/* CONTACT */
#contact{
	margin-bottom: 0;
	position: relative;
	z-index: 10;
	margin-top: 0 !important;
}

#contact .con-projects{
	border: 1px solid rgba(0, 0, 0, 0.3);
}

#contact .con-projects.scroll-class{
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.8);
}

#contact .con-projects.scroll-class .section-title h2 span{
	color: var(--textebleu);
}

#contact .section-title h2{
	font-family: "Anton", serif;
	font-weight: 400;
	font-size: 160px;
	text-transform: uppercase;
	line-height: 100%;
}

#contact .section-title p{
	font-weight: 400;
	font-size: 20px;
	color: black;
}

#contact .section-title p:nth-child(2){
	font-weight: 500;
	font-size: 24px;
}

#contact .section-title p strong{
	text-transform: uppercase;
}

#contact .section-title ul{
	list-style-type: initial;
	padding-left: 48px;
}

#contact .section-title ul li{
	font-weight: 400;
	font-size: 20px;
	color: black;
	margin-bottom: 8px;
	font-weight: 500;
}

#contact .section-title ul li span{
	opacity: 0.5;
	display: inline;
	font-weight: 400;
}

#contact .section-title a{
	color: #FFF;
	display: flex;
	padding: 16px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-family: 'Anton', serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border-radius: 40px;
	background: #0083C8;
	width: fit-content;
	margin: 24px auto 48px;
}

.selected-portfolio .con-projects.scroll-class a{
	color: #FFF !important;
}

@media screen and (max-width: 1024px) {
	#contact .section-title h2{
		font-size: 90px;
	}
}

@media screen and (max-width: 768px) {
	#contact .section-title h2{
		font-size: 56px;
	}	
	
	#contact .section-title p:nth-child(2){
		font-size: 20px;
	}
}

/* Footer */
footer{
	margin-top: 128px;
}

footer .footer--wrapper{
	border-radius: 40px 40px 0 0;
	background: #000;
	margin-bottom: 0;
}

footer .footer-top{
	position: relative;
	overflow: hidden;
}

footer .footer-top .radial{
	position: absolute;
	right: 32px;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.5;
}

footer .footer-top .container{
	position: relative;
	z-index: 2;
}

footer .footer-top h2{
	color: #FFF;
	font-family: 'Anton', serif;
	font-size: 80px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 88px */
	margin-bottom: 24px;
}

footer .footer-top h2 span{
	color: var(--textebleu);
}

footer .footer-top p{
	color: #FFF;
	/* font-family: "Helvetica Neue LT Pro"; */
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%;
}

footer .footer-top a{
	color: #FFF;
	display: flex;
	padding: 16px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-family: 'Anton', serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border-radius: 40px;
	background: #0083C8;
	width: fit-content;
	margin-top: 24px;
}

footer .footer-bottom{
	border-top: 1px solid rgba(255, 255, 255, 0.30);
}

footer .footer-bottom .con{
	padding-top: 24px;
	padding-bottom: 24px;
	display: flex;
}

footer .footer-bottom p{
	color: #FFF;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
}


footer .footer-bottom .copyright a,
footer .footer-bottom .credit a{
	color: var(--textebleu);
}

footer .row{
	width: 100%;
}

footer .socials{
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
}

footer .socials a:not(:nth-child(2)) img{
	height: 30px;
	width: auto;
}



@media screen and (max-width: 1024px) {
	footer .footer-top h2{
		font-size: 72px;
	}
}

@media screen and (max-width: 768px) {
	footer .footer-top h2{
		font-size: 56px;
	}	
}
       

.gallerypop-overlay{
	z-index: 99999;
	position: fixed;
}