.waiting{width:100%; height:60vh; padding:2em; background:#222; display: flex; align-items:center; justify-content: center;}
.waiting .title{color:#fff;}
.waiting a{font-family: 'Montserrat', sans-serif;}
.waiting a:nth-of-type(1){margin-top: 2em;}

/* global */
.sm-link{color:#fff; display:inline-block; position: relative; padding:6px 8px 8px 24px; font-size: 14px; text-transform: uppercase; font-weight:700; letter-spacing: 1.5px;}
.sm-link:before{content:''; width:16px; height:12px; position: absolute; top:52%; left:0; transform: translateY(-50%); background:url('../img/link-arrow.svg') no-repeat center;}
.sm-link:after{content:''; transition:0.5s; width:0; height:1px; left:0; bottom:-4px; background:#fff; position: absolute;}
.sm-link:hover:after{width: 100%;}
.redColor .sm-link:before{background:url('../img/link-arrow-red.svg') no-repeat center;}
.pinkColor .sm-link:before{background:url('../img/link-arrow-pink.svg') no-repeat center;}
.blueColor .sm-link:before{background:url('../img/link-arrow-blue.svg') no-repeat center;}
.fiu{transform: translateY(100px); transition: 0.3s; opacity: 0;}
.fiu.animate{transform: translateY(0); opacity: 1; transition:1s;}
.w100{width:100%;}

/* first section */
.firstSection{position:relative; background: #222; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(68,68,68,1) 100%); width:100%; padding:0 2em; height: calc(var(--vh) * 100); display: flex; align-items: center; justify-content: center;}
.firstSection > div{max-width: 1400px; width:100%; position: initial; z-index: 2; padding:0 2em;}
.firstSection:before{transform:translateY(-20px); content:''; position: absolute; width:calc(100% - 4em); height:calc(100% - 300px); background:no-repeat center; background-size: cover;}
.firstSection:after{transform:translateY(-20px); content:''; animation:fadeSD 0.8s 0.2s forwards; position: absolute; width:calc(100% - 4em); height:calc(100% - 300px); background:#333; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(84,84,84,1) 100%); opacity: 0;}
.firstSection .firstTitle{animation:fadeInDown 0.8s 0.2s forwards; margin:0;}
.firstSection .firstTitle span:before{animation: whiteMark 0.5s 1.2s forwards;}
.firstSection p{animation:fadeInDown 0.8s 0.4s forwards; margin:1.5em 0; opacity:0; color: #ddd; font-size: 18px; max-width: 730px; line-height: 1.4;}
.firstSection .btn{opacity:0; animation:fadeInDown 0.8s 0.6s forwards;}
.firstSection .mw830{max-width: 830px;}
.btn.btnCircle{padding:0; width:48px; height:48px; position: relative; display: flex; align-items: center; justify-content: center;}
.btn.btnCircle img{width:15px; position: absolute;}
.btn.btnCircle:after{width:90%;}
.btn.btnCircle:hover:after{width:calc(100% + 16px);}
.summary{position: absolute; bottom:2em; right:2em; height:140px; overflow: hidden;}
.summary a{animation:showSummary 1s 1.6s forwards; transform: translateY(-105%); transition:0.3s; display: inline-block; margin:2px -5px 0 0; overflow: hidden; height:100%; min-width:280px; padding:1em; position: relative; text-shadow: 0 0 6px rgba(0,0,0,0.4); background:no-repeat center; background-size:cover;}
.summary a:nth-of-type(2){animation-delay:1.3s;}
.summary a:nth-of-type(3){animation-delay:1s;}
.summary a:last-of-type{margin-right: 0;}
.summary a:before{content:''; left:0; top:0; position: absolute; width:100%; height:100%; background: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 100%);}
.summary strong{position: relative; transition:0.3s; top:0; z-index: 2; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; color:var(--primary);}
.summary p{animation: none; transition:0.3s; opacity:1; margin:0.5em 0 0 0; position: relative; top:0; z-index: 2; font-size: 15px; font-style: italic; letter-spacing: -0.25px}
.summary span{color:#fff; z-index: 2; position: absolute; padding-left: 24px; bottom:1em; left:1.3em; font-size: 13px; text-transform: uppercase; font-weight:700; letter-spacing: 1.5px;}
.summary span:before{content:''; width:16px; height:12px; position: absolute; top:52%; left:0; transform: translateY(-50%); background:url('../img/link-arrow.svg') no-repeat center;}
.redColor .summary span:before{background:url('../img/link-arrow-red.svg') no-repeat center;}
.pinkColor .summary span:before{background:url('../img/link-arrow-pink.svg') no-repeat center;}
.blueColor .summary span:before{background:url('../img/link-arrow-blue.svg') no-repeat center;}
.summary i{position: absolute; transition:0.3s; top:20px; right:12px; color:#000; text-shadow: 0 0 1px #fff, 0 0 2px #fff; opacity:0.8; font-style: normal; transform:rotate(-90deg); transform-origin:50% 50%; font-size: 50px; letter-spacing: 1px;}
.summary a:hover strong, .summary a:hover p{top:7px;}
.summary a:hover i{color:#fff;}
@keyframes fadeSD{
	0%{opacity:0;}
	100%{opacity:0.7;}
}

@keyframes showSummary{
	0%{transform:translateY(-105%);}
	100%{transform:translateY(0%);}
}

/* first section images */
.first-view-decouvrez-the-noxe:before{background-image:url('../img/first-view-decouvrez-the-noxe.webp');}
.first-view-realisations:before{background-image:url('../img/first-view-realisations.webp');}
.first-view-site-pas-cher:before{background-image:url('../img/first-view-site-pas-cher.webp');}

/* sections */

[class^="s-txt-"]{padding:10em 1em; box-shadow: inset 0 0 12px rgba(0,0,0,0.8); overflow: hidden;}
[class^="s-txt-"] p strong{color:#eee;}
.s-txt-left .container{display: flex; align-items: flex-end; justify-content: center;}
.s-txt-right .container{display: flex; align-items: center; justify-content: center; flex-direction: row-reverse;}
[class^="s-txt-"] .container > div{position: relative; width:60%;}
[class^="s-txt-"] .container > div.s-img{width:40%;}
.s-img figure{width:calc(100% + 450px); box-shadow: 0 0 16px rgba(0,0,0,0.3); transition:0.5s 0s; transform:translateY(25%); opacity:0; position: relative; display: block; z-index: -1;}
.s-txt-right .s-img figure{width:calc(100% + 220px);}
[class^="s-txt-"].animate .s-img figure{transition:1.25s 0.2s; transform:translateY(0); opacity: 1;}
.s-img figure:before{content:''; position: absolute; top:0; width:100%; height:100%;}
.s-txt-left .s-img figure:before{left:0; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.40) 25%, rgba(0,0,0,0) 100%);}
.s-txt-right .s-img figure:before{right:0; background: linear-gradient(-90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.40) 25%, rgba(0,0,0,0) 100%);}
.s-txt-left .s-img figure{left:-360px;}
.s-txt-right .s-img figure{left:-180px;}
[class^="s-txt-"] .title{color:#fff; text-shadow: 0 6px 6px rgba(0,0,0,0.75);}
[class^="s-txt-"] b{position: absolute; top:0; opacity: 0; transition:0.5s 0s; font-size: 200px; text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; letter-spacing: 10px; transform:rotate(-90deg)}
[class^="s-txt-"].animate b{opacity: 1; transition:1s 0.4s;}
[class^="s-txt-"] p, [class^="s-txt-"] ul{color:#aaa; font-size: 16px; line-height: 1.8; max-width: 490px; margin-top: 2em;}
[class^="s-txt-"] .sm-link{margin: 2em 0;}
.s-txt-right p, .s-txt-right ul, .s-txt-right .sm-link{margin-left: 140px;}
.s-txt-left{background:#252525;}
.s-txt-right{background:#202020;}
.s-txt-left b{left:-250px; color:#252525;}
.s-txt-right b{right:-250px; color:#202020;}
[class^="s-txt-"] ul li{padding-left: 2em; margin-bottom: 1.8em; position: relative; font-size: 15px; color:#fff; line-height: 1.2;}
[class^="s-txt-"] ul li:before{content:''; position: absolute; left:0; top:0; width:18px; height:18px; background: url(../img/puce.svg) no-repeat center; background-size: 18px;}
.redColor [class^="s-txt-"] ul li:before{background: url(../img/puce-red.svg) no-repeat center; background-size: 18px;}
.pinkColor [class^="s-txt-"] ul li:before{background: url(../img/puce-pink.svg) no-repeat center; background-size: 18px;}
.blueColor [class^="s-txt-"] ul li:before{background: url(../img/puce-blue.svg) no-repeat center; background-size: 18px;}


/* CONFIANCE */
#confiance{position: relative; padding:10em 0 8em 0; background:#F1F3ED; overflow: hidden;}
#confiance h2{text-align: center; margin-bottom: -10px;}
#confiance .container{max-width:1510px; padding:0 30px; overflow: hidden;}
#confiance .swiper-confiance{width: 100%; margin-top: 6em;}
#confiance .swiper-wrapper{width: 100%;}
#confiance .swiper-slide{align-items: flex-start;}

/* REALISATIONS */
#realisations{padding:2em 0 6em 0; position: relative; z-index: 2; background: rgb(34,34,34); background: linear-gradient(180deg, rgba(32,32,32,1) 0%, rgba(43,43,43,1) 100%);}
#realisations h2.keyword{top:40vh; text-align: center; color:#242424; text-shadow: 0 10px 6px rgba(0,0,0,0.1); display: inline-block; margin:0; position:sticky;}
#realisations .container{max-width: 1300px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.real{position: relative; transition:1s 0s; transform: translateY(100px); opacity:0; display: block; margin:0 1em 8em 1em; width:380px; overflow: hidden; background:#2E2E2E;}
.real:hover{box-shadow: 0 0 20px #000;}
.real:before{content:''; position: absolute; transition:0.5s; transform: translateY(102%); left:0; top:0; width:100%; height:100%; background:var(--primary); z-index: 1;}
.real:hover:before{transform: translateY(0);}
.real:nth-of-type(3n+2){top:8em;}
.real p{position: absolute; text-shadow: 0 0 4px rgba(0,0,0,0.5); z-index: 3; top:1.5em; left:1.3em; font-size: 24px; line-height: 1; margin:0; font-weight: 700; color:#fff; text-transform: uppercase;}
.real p strong{font-weight: 500; font-size: 14px;}
.real p:after{content:''; width:38px; height:2px; background:#fff; position: absolute; bottom:-12px; left:0;}
.real img{height: 100%; width: 100%; transition:0.5s; position: relative; z-index: 2; filter:saturate(0.7);}
.real:hover img{filter:saturate(1); transform: scale(1.075);}
.real span{position: absolute; bottom:-34px; left:0; overflow: hidden; height: 24px;}
.real i{font-size: 13px; font-style: normal; letter-spacing: 1px; transform:translateY(-15px); display: block; transition:0.3s;}
.real:hover i{transform: translateY(10px);}
.real-contact{width:calc(100% - 500px); margin-top: 10em; overflow: hidden;}
.real-contact .title{transition:0.5s 0s; transform: translateX(100px); opacity:0; color:#fff; text-shadow: 0 0 10px rgba(0,0,0,0.75);}
.real-contact p{transition:0.5s 0s; transform: translateX(100px); opacity:0; color:#aaa; max-width: 482px; line-height: 1.5; margin-bottom: 2em;}
.real-contact .sm-link{transition:0.5s 0s; transform: translateX(100px); opacity:0;}
.real.animate{opacity:1; transform:translateY(0);}
.real-contact.animate .title{transition:1s 0s; transform: translateX(0); opacity:1;}
.real-contact.animate p{transition:1s 0.2s; transform: translateX(0); opacity:1;}
.real-contact.animate .sm-link{transition:1s 0.4s; transform: translateX(0); opacity:1;}
#contactHome .container > div:nth-of-type(1) img.real-starter-pack{width:auto; transform: translateX(190px);}
#contactHome.contactReal{background: #242424;}
#contactHome.contactReal > .container:nth-of-type(1){justify-content: flex-start;}
.contactReal .title{color:#fff; transform: translateY(-80px);}
#contactHome .container > div:nth-of-type(1).animate img.real-starter-pack{transform:translateX(120px);}

/* SERVICES */
.pages-dispo figure{box-shadow: none; background:none;}
.pages-dispo .s-img figure:before{background:none;}
[class^="s-txt-"] .pages-dispo p, [class^="s-txt-"] .pages-dispo ul{max-width: 400px;}

/* FORMATIONS */
.connection-formations{text-align: center;}
.connection-formations .mw830{margin:2em auto;}
.connection-formations form{animation:fadeInDown 0.8s 0.4s forwards; opacity:0; width:100%; max-width: 460px; margin:0 auto; text-align: center;}
.connection-formations form input{width: 100%; padding:4px 10px; border:1px solid var(--primary); background:#222; margin-top:16px; font-size: 18px; color:#fff;}

/* PROJET */
.projet{padding:6em 2em; background:#f5f5f5;}
.projet img{box-shadow: 0 0 12px rgba(0,0,0,0.3);}
.projet-title{height: calc(var(--vh) * 100); min-height: 500px; padding:3em; width: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
.projet-title > div:nth-of-type(1){position: absolute; height:100%; width:100%; top:0; left:0; background:no-repeat center; background-size: cover;}
.projet-title > div:nth-of-type(1):before{content:''; position: absolute; top:0; left:0; width:100%; height:25vh; background: transparent; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);}
.projet-title > div:nth-of-type(2){position: relative; z-index: 2; display: flex; justify-content: center; flex-direction: column; padding:3em 6em 3em 10em; max-width: 1520px; width: 100%; height: 55vh; min-height:320px; margin-top: 5vh;}
.projet-title > div:nth-of-type(2):before{content:''; animation:projet-title-a 1s 0.3s forwards; position: absolute; top:0; left:0; width:0; height:100%; background: #000; opacity: 0.8; z-index: -1;}
.projet-title > div:nth-of-type(2):after{content:''; animation:projet-title-b 1s 0.4s forwards; opacity:0; position: absolute; top:30px; left:30px; width:0; height:calc(100% - 60px); border:1px solid var(--primary);}
.projet-title h1{line-height: 1; opacity:0; animation:projet-title-c 1s 0.6s forwards; font-family: 'Amaranth'; margin:0 0 20px 0; text-transform: uppercase; color:#fff; font-size: 62px;}
.projet-title h2{line-height: 1; opacity:0; animation:projet-title-c 1s 0.6s forwards; font-family: 'Amaranth'; margin:4px 0 0; color:var(--primary); font-size: 36px;}
.projet-title p{opacity:0; animation:projet-title-c 1s 0.6s forwards; color:#777; margin:0; text-transform: uppercase; font-size: 20px;}
.projet-title .btn{opacity:0; animation:projet-title-c 1s 0.8s forwards; margin-top: 2em; position: relative; z-index: 2;}
.projet-mockup{overflow:hidden; padding:6em 0; display: flex; justify-content: center; background:#222;}
.projet-mockup img{max-width: 1600px; transform: translateY(120px); opacity:0; transition:0.3s;}
.projet-mockup img.animate{transform: translateY(0); opacity:1; transition:1s;}
.projet-video{overflow-x: hidden; background: #222;}
.projet-video video{width:100%; max-width: 2400px;}
.projet-view{padding:10em 2em; display: flex; flex-direction: column; justify-content:center; align-items: center; background:#222;}
.projet-view .btn{margin-bottom: 2em;}

.double-page-img{padding:6em 2em; background:#666; background: linear-gradient(131deg, rgba(147,147,147,1) 7%, rgba(163,163,163,1) 20%, rgba(198,198,198,1) 54%, rgba(160,160,160,1) 87%, rgba(202,210,210,1) 100%);}
.double-page-img .container{display: flex; justify-content: center; flex-wrap: wrap; box-shadow: 0 0 12px rgba(0,0,0,0.5);}
.double-page-img img{width:50%;}

.logo-tsemerys{padding:6em 2em; background:#f5f5f5;}
.logo-tsemerys .container{max-width: 1600px; display: flex; justify-content: center; flex-wrap: wrap;}
.logo-tsemerys img{max-width: 500px; padding: 3em;}
.logo-tsemerys img:last-of-type{max-width: 500px; padding: 4em; background:#222;}

@keyframes projet-title-a{
	0%{width:0;}
	100%{width:100%;}
}

@keyframes projet-title-b{
	0%{width:0; opacity:0;}
	1%{opacity:1;}
	100%{width:calc(100% - 60px); opacity:1;}
}

@keyframes projet-title-c{
	0%{opacity:0; transform:translateY(30px);}
	100%{opacity:1; transform:translateY(0);}
}

/******** CONTACT ********/
#home.pageContact{z-index: 1;}
.pageContact p{max-width: 660px;}
.pageContact .slide-img-1{background-image:url('../img/contact-agence-the-noxe.webp');}
.pageContact .overlay{background:rgba(0,0,0,0.6);}
.pageContact .firstTitle{margin-top: -2em;}
.pageContact .play-btn img{left:47%; top:53%;}
#formulaire-de-contact{position: relative; z-index:9; background:#222; padding:0em 3em;}
#formulaire-de-contact .container{position: relative; animation:form 0.75s 2s forwards; transform: translateY(0); transition: 1s; max-width: 1500px; background: #2B2B2B; padding:5em 8em; box-shadow: inset 0 0 16px rgba(0,0,0,0.55);}
#contactInfosForm{display: flex; justify-content: space-around;}
#contactInfosForm > p{position: absolute; bottom:10px; right:6px; font-size: 12px; color:#555;}
#contactInfosForm > p span{font-size: 20px; position: relative; top:4px;}
#contactInfosForm > div{width:40%;}
#contactInfosForm > form{width:40%;}
#contactInfosForm > div h2{color:#fff;}
#contactInfosForm > div p{line-height: 1.3; margin-bottom: 2.5em;}
#contactInfosForm > div span{position: relative; display: inline-block; padding-left: 30px; margin-bottom: 5px; font-weight: 700; color:#fff; text-transform: uppercase; font-size: 14px; letter-spacing: 1.5px;}
#contactInfosForm > div span:before{content:''; width:20px; height:24px; background:red; display: block; position: absolute; left:0; top:50%; transform: translateY(-50%);}
#contactInfosForm > div p:nth-of-type(1) span:before{background:url('../img/icon-phone-green.svg') no-repeat center;}
#contactInfosForm > div p:nth-of-type(2) span:before{background:url('../img/icon-mail-green.svg') no-repeat center;}
#contactInfosForm > div p:nth-of-type(3) span:before{background:url('../img/icon-marker-green.svg') no-repeat center;}
.redColor #contactInfosForm > div p:nth-of-type(1) span:before{background:url('../img/icon-phone-red.svg') no-repeat center;}
.redColor #contactInfosForm > div p:nth-of-type(2) span:before{background:url('../img/icon-mail-red.svg') no-repeat center;}
.redColor #contactInfosForm > div p:nth-of-type(3) span:before{background:url('../img/icon-marker-red.svg') no-repeat center;}
.pinkColor #contactInfosForm > div p:nth-of-type(1) span:before{background:url('../img/icon-phone-pink.svg') no-repeat center;}
.pinkColor #contactInfosForm > div p:nth-of-type(2) span:before{background:url('../img/icon-mail-pink.svg') no-repeat center;}
.pinkColor #contactInfosForm > div p:nth-of-type(3) span:before{background:url('../img/icon-marker-pink.svg') no-repeat center;}
.blueColor #contactInfosForm > div p:nth-of-type(1) span:before{background:url('../img/icon-phone-blue.svg') no-repeat center;}
.blueColor #contactInfosForm > div p:nth-of-type(2) span:before{background:url('../img/icon-mail-blue.svg') no-repeat center;}
.blueColor #contactInfosForm > div p:nth-of-type(3) span:before{background:url('../img/icon-marker-blue.svg') no-repeat center;}
#contactInfosForm > div p:first-of-type a{color:var(--primary); font-size: 24px; font-weight: 700;}
#contactInfosForm > div a{color:#bbb; font-size: 20px;}
#contactInfosForm > div a b{font-weight: 500;}
#contactInfosForm .at-mail:before{content:'@'; font-style: normal;}
#contactInfosForm > div a:hover{color:var(--primary);}
@keyframes form{
	0%{transform: translateY(0);}
	100%{transform: translateY(-16vh);}
}

.formGroup{position: relative; padding-top:12px;}
.formGroup label, .formGroup input, .formGroup textarea{width:100%; max-width: 100%; min-width: 100%; display: inline-block; color:#fff;}
.formGroup label{transform-origin:0; position: absolute; top:0; left:0; transform:translate(10px, 18px) scale(1); transition:0.2s;}
.formGroup.active label{color:#aaa; transform:translate(0, 0) scale(0.75);}
.formGroup input, .formGroup textarea{font-size: 15px; background: #2B2B2B; border:none; border-bottom:1px solid var(--primary); padding:10px; margin-bottom: 20px;}
.formGroup textarea{height:42px; min-height: 42px; max-height: 400px; transition:0.2s; margin-bottom: 10px;}
.formGroup.active textarea{height: 180px;}
.formGroup input:focus, .formGroup textarea:focus{outline: none; background:transparent;}
.formGroup input:-webkit-autofill{box-shadow: inset 0 0 1000px 10px #2B2B2B;}
.formGroup input{color-scheme: dark;}

.successErrorReturn{padding:2em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px 10px #000; position: fixed; top:15%; left:15%; z-index: 99999; width:70%; height:70%; background:#fff;}
.successErrorReturn:before{content:''; width:100%; height:100%; position: fixed; top:0; left:0; background:#fff; opacity:0.5;}
.successErrorReturn p{cursor:pointer; position: absolute; margin:20% 1em 1em 1em; padding:15px 30px; text-align: center; font-size: 18px; font-weight: 700; background: #fff;}
.successErrorReturn p button{background:green; color:#fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-top: 20px; padding:10px 20px;}
.successErrorReturn p.info-error button{border:2px solid red; background: red;}
.successErrorReturn p.info-valid button{border:2px solid green;}
.successErrorReturn p.info-error{border:4px solid red;}
.successErrorReturn p.info-valid{border:4px solid green;}
.successErrorReturn p.info-error:hover{background: red;}
.successErrorReturn p.info-valid:hover{background: green;}
.successErrorReturn p:hover button{border:2px solid #fff;}
.info-error:before, .info-valid:before{content:''; width:80px; height:80px; position: absolute; top:-120px; left:calc(50% - 40px); background:url('../img/error.png') no-repeat center;}
.info-valid:before{background:url('../img/valid.png') no-repeat center;}

.missing-infos{text-align: center; padding:2em 2em 8em 2em; background: #222;}
.missing-infos h2{color:#fff; position: relative; margin-bottom: 3em;}
.missing-infos h2:after{content:''; width:140px; height:2px; background:var(--primary); display: block; position: absolute; left:50%; bottom:-24px; transform:translateX(-50%);}
.missing-infos .container{display: flex; max-width: 1600px; justify-content: space-around;}
.missing-infos p{color:#999; font-size: 15px; max-width: 370px; padding:0 1em;}
.missing-infos a{margin-top: 1em;}

/******** MQ ********/

@media screen and (max-width: 1699px){
	[class^="s-txt-"] .container{max-width: 1100px;}
	[class^="s-txt-"] .container > div{width:80%;}
	[class^="s-txt-"] b{font-size: 160px;}
	.s-txt-left b{left:-190px;}
	.s-txt-right b{right:-190px;}
}

@media screen and (max-width: 1499px){
	[class^="s-txt-"] .container{max-width: 1000px;}
	[class^="s-txt-"] .container > div{width:100%;}
	.s-txt-left .container{left:20px;}
	.s-txt-right .container{left:-20px;}
	[class^="s-txt-"] b{font-size: 140px;}
	.s-txt-left b{left:-175px;}
	.s-txt-right b{right:-175px;}
	.s-txt-left .s-img figure{width:calc(100% + 350px);}
	.s-txt-right .s-img figure{width:calc(100% + 120px);}
	.s-txt-left .s-img figure{left:-360px;}
	.s-txt-right .s-img figure{left:-80px;}
	[class^="s-txt-"] p{line-height: 1.6;}
	/* contact */
	#formulaire-de-contact .container{padding:5em 3em;}
}

@media screen and (max-width: 1399px){
	/* first section */
	.firstSection:before{transform:translateY(-30px); height:calc(100% - 280px);}
	.firstSection:after{transform:translateY(-30px);  height:calc(100% - 280px);}
	/* real */
	#realisations .container{max-width: 1240px; padding:0 2em;}
	.real{margin:0 1em 8em 1em; width:360px;}
	/* projet */
	.projet-title > div:nth-of-type(2){padding:1em 4em 1em 6em;}
	/* contact */
	.missing-infos h2{margin-bottom: 2em;}
	.missing-infos .container{flex-wrap: wrap;}
	.missing-infos p{width:50%; margin-top: 3em;}
}

@media screen and (max-width: 1299px){
	[class^="s-txt-"] .container{max-width: 960px;}
	[class^="s-txt-"] b{font-size: 120px;}
	.s-txt-left b{left:-150px;}
	.s-txt-right b{right:-150px;}
	.s-txt-left .s-img figure{width:calc(100% + 350px);}
	.s-txt-right .s-img figure{width:calc(100% + 120px);}
	.s-txt-left .s-img figure{left:-360px;}
	.s-txt-right .s-img figure{left:-80px;}
	[class^="s-txt-"] p{line-height: 1.5;}
	.s-txt-left .s-img figure:before{background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.60) 25%, rgba(0,0,0,0) 100%);}
	.s-txt-right .s-img figure:before{background: linear-gradient(-90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.30) 25%, rgba(0,0,0,0) 100%);}
	/* real */
	.real{margin:0 1em 8em 1em; width:330px;}
	/* projet */
	.projet-title > div:nth-of-type(2){padding:1em 4em 1em 6em;}
	.projet-title h1{font-size: 46px;}
	.projet-title h2{font-size: 26px;}
	.projet-title p{font-size: 16px;}
	/* contact */
	#formulaire-de-contact{padding:0 4em;}
	#formulaire-de-contact .container{padding:5em 1em;}
	#contactInfosForm{justify-content: space-between; padding:0 3em;}
	#contactInfosForm > div{width:55%;}
	#contactInfosForm > form{width:45%;}
}

@media screen and (max-width: 1199px){
	/* first section */
	.firstSection p{font-size: 17px;}
	.firstSection:before{transform:translateY(-20px); height:calc(100% - 270px);}
	.firstSection:after{transform:translateY(-20px);  height:calc(100% - 270px);}
	.summary{height:125px;}
	.summary a{min-width:270px; padding:0.75em;}
	.summary strong{font-size: 17px;}
	.summary p{font-size: 15px; line-height: 1.2; margin:4px 0 0 0;}
	.summary span{bottom:1em; left:1.1em;}
	.summary i{top:20px; right:12px; font-size: 50px;}
	/* sections */
	[class^="s-txt-"] .container{max-width: 920px;}
	[class^="s-txt-"] b{font-size: 120px; transform:translateY(-100%);}
	.s-txt-left b{left:0;}
	.s-txt-right b{right:0;}
	.s-txt-left .s-img figure{width:calc(100% + 300px);}
	.s-txt-right .s-img figure{width:calc(100% + 70px);}
	.s-txt-left .s-img figure{left:-360px;}
	.s-txt-right .s-img figure{left:-20px;}
	/* real */
	#realisations .container{justify-content: center;}
	.real{margin:0 2em 8em 2em; width:380px;}
	.real:nth-of-type(3n+2){top:0;}
	.real:nth-of-type(2n+2){top:8em;}
	.real-contact{width:100%; max-width: 800px; margin:8em auto 4em auto;}
	/* projet */
	.projet-title > div:nth-of-type(2){padding:1em 3em 1em 5em;}
	.projet-title h1{font-size: 40px;}
	.projet-title h2{font-size: 22px;}
	.projet-title p{font-size: 16px;}
	/* contact */
	#formulaire-de-contact{padding:0 3em;}
	#formulaire-de-contact .container{padding:5em 0;}
	#contactInfosForm{justify-content: space-between; padding:0 2em;}
	#contactInfosForm > div{width:60%;}
	#contactInfosForm > form{width:40%;}
}


@media screen and (max-width: 991px){
	/* first section */
	.firstSection:before{transform:translateY(-25px); height:calc(100% - 235px);}
	.firstSection:after{transform:translateY(-25px);  height:calc(100% - 235px);}
	.summary{height:112px;}
	.summary a{min-width:210px; padding:0.75em;}
	.summary strong{font-size: 15px;}
	.summary p{font-size: 14px; line-height: 1.2; margin:4px 0 0 0;}
	.summary span{bottom:1em; left:1.1em; font-size:12px; letter-spacing: 1px;}
	.summary i{top:12px; right:4px; font-size: 50px;}
	/* sections */
	[class^="s-txt-"]{padding:7em 1em;}
	[class^="s-txt-"] .container{max-width: 920px; left:0; flex-direction: column; padding:0 1.5em;}
	[class^="s-txt-"] .title{padding-left: 80px; transform: translateX(-80px); transition:0.5s 0s;}
	[class^="s-txt-"].animate .title{transform:translateX(0); transition:1s 0.1s;}
	[class^="s-txt-"] b{font-size: 62px; transform: rotate(-90deg);}
	.s-txt-left b{left:-20px;}
	.s-txt-right b{right:initial; left:-20px;}
	[class^="s-txt-"] .container > div.s-img{width:100%;}
	[class^="s-txt-"] .s-img figure{width:100%; left:0; margin:0;}
	[class^="s-txt-"] .s-img figure:before{background:none;}
	.s-txt-right p, .s-txt-right ul, .s-txt-right .sm-link{margin-left: 0;}
	[class^="s-txt-"] p{max-width: 100%;}
	/* real */
	.real{margin:0 1.25em 6em 1.25em; width:300px;}
	.real p{max-width: 240px;}
	.real{margin-top:0em;}
	.real:nth-of-type(2n+2){top:6em;}
	.real-contact{width:100%; max-width: 800px; margin:8em auto 4em auto;}
	#contactHome.contactReal .container > div:nth-of-type(1).animate img.real-starter-pack{transform: translateX(20px);}
	/*projet */
	.projet-title{padding:0 1.5em;}
	.projet-title > div:nth-of-type(2){padding:0.75em 2em 0.75em 3.5em;}
	.projet-title h1{font-size: 36px;}
	.projet-title h2{font-size: 20px;}
	.projet-title p{font-size: 15px;}
	.projet-title > div:nth-of-type(2):after{ top:15px; left:15px; height:calc(100% - 30px);}
	@keyframes projet-title-b{
		0%{width:0; opacity:0;}
		1%{opacity:1;}
		100%{width:calc(100% - 30px); opacity:1;}
	}
	/* contact */
	#formulaire-de-contact{padding:0 5em;}
	#formulaire-de-contact .container{padding:5em 2em;}
	#contactInfosForm{justify-content: space-around; flex-direction: column; padding:0 2em;}
	#contactInfosForm > div{display: flex; justify-content: center; flex-direction: column; align-items: center; margin-bottom: 2em;}
	#contactInfosForm > div p{max-width: 350px; width:100%;}
	#contactInfosForm > div, #contactInfosForm > form{width:100%;}
	#contactInfosForm > p{max-width: 360px; right:initial; left:5em;}
	.missing-infos p{width:100%; padding:0;}
}


@media screen and (max-width: 767px){
	/* first section */
	.firstSection p{font-size: 16px;}
	.firstSection:before{transform:translateY(0); height:calc(100% - 190px);}
	.firstSection:after{transform:translateY(0);  height:calc(100% - 190px);}
	.summary{height:65px;}
	.summary a{min-width:140px; padding:0.75em;}
	.summary strong{font-size: 14px; letter-spacing: normal;}
	.summary p{display: none;}
	.summary span{bottom:1em; left:1.1em; font-size:12px; letter-spacing: normal;}
	.summary i{top:12px; right:4px; font-size: 34px;}
	/* real */
	.real{margin:0 1.25em 6em 1.25em; width:380px;}
	.real p{max-width: 300px;}
	.real:nth-of-type(2n+2){top:0;}
	.real-contact{width:100%; max-width: 800px; margin:4em auto 2em auto;}
	.contactReal .title{transform: translateY(0);}
	/*projet */
	.projet-title{padding:0 1em;}
	.projet-title{min-height: 380px;}
	.projet-title > div:nth-of-type(2){padding:0.75em 2em 0.75em 2.5em; min-height: 250px;}
	.projet-title h1{font-size: 26px;}
	.projet-title h2{font-size: 18px; margin:0;}
	.projet-title p{font-size: 14px;}
	/* contact */
	#formulaire-de-contact{padding:0 4em;}
	#formulaire-de-contact .container{padding:5em 0.5em;}
}


@media screen and (max-width: 575px){
	/* first section */
	.firstSection p{font-size: 15px; line-height: 1.3;}
	.firstSection, .firstSection > div{padding:1em;}
	.firstSection:before{transform:translateY(5px);width:calc(100% - 2em); height:calc(100% - 170px);}
	.firstSection:after{transform:translateY(5px); width:calc(100% - 2em); height:calc(100% - 170px);}
	.firstSection .firstTitle{font-size: 27px;}
	.summary{height:65px; right:0; bottom:0; width:100%;}
	.summary a{min-width:0; width:calc(100% / 3); height: 100%; padding:0.5em;}
	.summary strong{font-size: 13px; letter-spacing: normal; top:12px;}
	.summary span{bottom:0.75em; left:0.75em; font-size:12px; padding-left:16px;}
	.summary span:before{width:12px; height:8px; background-size:12px;}
	.summary a:hover strong{top:12px;}
	.summary i{top:8px; right:2px; font-size: 24px;}
	.summary a:first-of-type i{top:6px;}
	/* sections */
	[class^="s-txt-"]{padding:6em 1em;}
	[class^="s-txt-"] .container{padding:0 1em;}
	[class^="s-txt-"] .title{margin-bottom: 2.5em; font-size: 20px; padding-left: 45px; transform: translateX(-60px);}
	[class^="s-txt-"] .title br{display: none;}
	[class^="s-txt-"] b{font-size: 46px; left:-25px; letter-spacing: 3px;}
	[class^="s-txt-"] p{font-size: 15px;}
	/* confiance */
	#confiance{position: relative; padding:6em 0 4em 0;}
	#confiance .subtitle{font-size: 14px;}
	#confiance .container{padding:0 1em;}
	#confiance .swiper-confiance{margin-top: 3em;}
	/* real */
	.real{margin:0 0.5em 4em 0.5em; max-width:380px; width:100%;}
	.real p{max-width: 300px;}
	.contactReal .title{transform: translateY(0);}
	#contactHome.contactReal .container > div:nth-of-type(1).animate img.real-starter-pack{transform: translateX(15px); width:130%;}
	/* projet */
	.projet-title .btn{position: absolute; bottom:-10px; left:calc(50% - 24px);}
	.projet-view{padding: 5em 0.5em;}
	.projet-mockup img{width:150%; left:8px; position: relative; transform: translateY(50px);}
	.projet-video{display: flex; justify-content: center;}
	.projet-video video{width:120%;}
	.double-page-img img{width:100%; margin-bottom: 2em; box-shadow: 0 0 12px rgba(0,0,0,0.5);}
	.double-page-img img:last-of-type{margin-bottom: 0;}
	.double-page-img .container{box-shadow:none;}
	.logo-tsemerys img{padding: 2em 0;}
	.logo-tsemerys img:last-of-type{padding: 2em;}
	/* contact */
	.pageContact .slide-img-1{background-position: center;}
	.pageContact .play-btn img{top:52%; left:45%;}
	#formulaire-de-contact{padding:0 2em;}
	#formulaire-de-contact .container{padding:3em 0 6em 0;}
	#contactInfosForm{padding:0 2em;}
	#contactInfosForm > div{align-items: flex-start;}
	#contactInfosForm > p{max-width: 100%; left:0; padding:0 20px;}
	#contactInfosForm h2, .missing-infos h2{font-size: 22px;}
	#contactInfosForm > div a{font-size: 17px;}
	#contactInfosForm > form label{font-size: 15px;}
	#contactInfosForm > form input, #contactInfosForm > form textarea{padding-left:0; padding-right: 0;}
	.missing-infos{padding:1em 2em 5em 2em;}
}


@media screen and (max-width: 359px){
	/* first section */
	.firstSection .firstTitle{font-size: 24px;}
	[class^="s-txt-"] .container{padding:0 0.5em;}
	/* real */
	.real{margin:0 0em 4em 0em; max-width:380px; width:100%;}
}