:root{--color-black:#1B1532;--color-white:#ffffff;--color-lightgray:#f2f2fa;--color-red:#EA543D;--color-purple:#3D2F88;--color-green:#70C0A2;--color-yellow:#F28E21}*{box-sizing:border-box}button{border:none}html{scroll-behavior:smooth}body{margin:0;color:var(--color-black);background-color:var(--color-white)}h2{margin-top:0}a{text-decoration:none;color:inherit}img{max-width:100%;width:100%;height:auto;display:block}ul.nolist{list-style:none;padding:0;margin:0}.button{font-family:azo-sans-uber,sans-serif;font-weight:100;font-size:18px;font-size:clamp(18px, calc(18px + (30 - 18) * ((100vw - 460px) / (1260 - 460))), 30px);letter-spacing:2px;padding:20px 25px;background-color:var(--color-white);color:var(--color-black);display:inline-block;margin-inline:auto;border:1px solid var(--color-black);box-shadow:-5px -5px 0 rgb(0 0 0 / .15);margin-top:40px;transition:all 0.1s ease-out;overflow:hidden;&::before,&::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:inherit;opacity:0;z-index:1;pointer-events:none;animation-timing-function:steps(1,end)}&::before{color:#f0f;mix-blend-mode:screen}&::after{color:cyan;mix-blend-mode:multiply}span{color:var(--color-black);position:relative;z-index:2}&:hover{animation:glitch-translate-base 0.3s infinite alternate;box-shadow:-5px -5px 0 rgb(255 0 255 / .2),5px 5px 0 rgb(0 255 255 / .2),-10px 10px 0 rgb(0 0 0 / .15);&::before{opacity:1;animation:glitch-translate-r 0.3s infinite alternate}&::after{opacity:1;animation:glitch-translate-g 0.3s infinite alternate}span{opacity:.8;filter:blur(.5px);animation:glitch-translate-base 0.3s infinite alternate}}}a.button:hover,a.button:focus{text-decoration:none!important}@keyframes glitch-translate-r{0%{transform:translate(0)}33%{transform:translate(2px,-2px)}66%{transform:translate(-2px,2px)}100%{transform:translate(1px,1px)}}@keyframes glitch-translate-g{0%{transform:translate(0)}25%{transform:translate(-3px,3px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(1px,-2px)}}@keyframes glitch-translate-base{0%{transform:translate(0)}50%{transform:translate(1px,-1px)}100%{transform:translate(-1px,1px)}}.txt-right{text-align:right}section>.title{font-family:azo-sans-uber,sans-serif;font-weight:100;letter-spacing:2px}.helvspaced{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;line-height:1.3em;strong{font-weight:900}&.txt-lg{letter-spacing:6px;font-size:clamp(26px, calc(26px + (44 - 26) * ((100vw - 460px) / (1260 - 460))), 44px)}&.txt-md{font-size:clamp(18px, calc(18px + (28 - 18) * ((100vw - 460px) / (1260 - 460))), 26px);letter-spacing:4px}&.caps{text-transform:uppercase}}.slashlist{list-style:none;padding:0;margin:0;li{position:relative;padding-left:20px;margin-bottom:15px;&:before{content:'';position:absolute;top:6px;left:0;width:4px;height:14px;transform:skew(-21deg);@media all and (min-width:768px){width:6px;height:20px}}}}header{height:100svh;display:flex;justify-content:center;position:relative;.content{padding:0 30px;height:100svh;display:flex;flex-direction:column;align-items:center;@media all and (min-width:768px){justify-content:center}}.main-logo{display:block;@media all and (max-width:767px){padding-top:125px}}.main-logo,.slogan{max-width:780px;margin-inline:auto}.slogan{@media all and (max-width :640px){margin-top:20px}}h1{margin-top:40px}.contact{position:absolute;top:0;right:0;z-index:10;background-color:var(--color-red);display:flex;justify-content:flex-end;align-items:center;padding:30px 40px 30px 20px;width:90px;min-width:80px;min-height:83px;@media all and (min-width:640px){&:after{display:block;content:"";background-color:var(--color-yellow);width:calc(21vw);height:83px;transform:skew(-21deg);position:absolute;right:calc(100% + 16px);top:0}}&:before{content:'';position:absolute;top:-3px;right:calc(100% - 1px);width:0;height:0;border-bottom:86px solid var(--color-red);border-left:33px solid #fff0}svg{width:30px}}.scrolldown{position:absolute;bottom:-360px;right:20px;width:60px;height:130px;bottom:0;svg{max-height:100%;}@media all and (min-width:768px){bottom:0}}.slashes.purple-green{position:absolute;top:60svh;right:31vw;width:812px;height:1125px;background:url(../img/purple-green-slashes.svg) no-repeat center center;background-size:cover;background-position:top right;z-index:-1;@media all and (min-width:640px){width:152%;height:calc(152% * 1.385);left:-100%;top:40svh}@media all and (min-width:1260px){top:30svh}}}.main-logo{.ouat .letter{fill:#fff0;stroke:#fff0;stroke-width:1px;stroke-dasharray:100;stroke-dashoffset:100;transform-origin:center bottom;transform:scale(.97);animation:drawOuat 2s ease-out forwards;&.l1{animation-delay:1.4s}&.l2{animation-delay:1.2s}&.l3{animation-delay:1.4s}&.l4{animation-delay:1.3s}}.studio .letter{fill:#fff0;animation:fadeInStudio 1.2s ease-in-out forwards;&.l1{animation-delay:.6s}&.l2{animation-delay:.55s}&.l3{animation-delay:.7s}&.l4{animation-delay:.75s}&.l5{animation-delay:.8s}&.l6{animation-delay:.85s}}.slash{fill:var(--color-black);opacity:0;transform:translate(-42px,114px);transform-origin:bottom left;animation:slashIn .3s ease-out forwards;animation-delay:3.2s}}.header{.slogan{opacity:0;transform:translateY(-10px);transform-origin:bottom left;animation:fadeIn .6s ease-out forwards;animation-delay:3.4s}.slashes.purple-green{transform:translateX(-100%);opacity:0;animation:fadeInBigSlashes .8s ease-out forwards;animation-delay:3.5s}.contact{transform:translateX(100%);opacity:0;transform-origin:top right;animation:fadeInBigSlashes .8s ease-out forwards;animation-delay:3.5s}}.scrolldown{.scroll-svg path{stroke:var(--color-black);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.shaft{stroke-dasharray:120;stroke-dashoffset:120;animation:drawShaft .8s ease-out forwards;animation-delay:3.5s}.arrow-left,.arrow-right{stroke-dasharray:20;stroke-dashoffset:20;animation:drawHead .3s ease-in-out forwards;animation-delay:4s}}@keyframes drawOuat{0%{stroke-dashoffset:400;fill:#fff0;transform:scale(.97)}20%{stroke:var(--color-black);fill:#fff0;transform:scale(1)}70%{stroke:var(--color-black);fill:var(--color-black);opacity:1}100%{stroke-dashoffset:0;fill:var(--color-black);stroke:#fff0;opacity:1;transform:scale(1)}}@keyframes fadeInStudio{0%{fill:#fff0}20%{fill:var(--color-green)}40%{fill:var(--color-yellow)}60%{fill:var(--color-red)}80%{fill:var(--color-purple)}100%{fill:var(--color-black)}}@keyframes slashIn{20%{opacity:1}60%{fill:var(--color-black)}100%{fill:var(--color-red);opacity:1;transform:scaleY(1)}}@keyframes fadeInBigSlashes{0%{opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes fadeIn{to{opacity:1;transform:none}}@keyframes drawShaft{to{stroke-dashoffset:0}}@keyframes drawHead{to{stroke-dashoffset:0}}main{padding:0 clamp(30px, calc(30px + (60 - 30) * ((100vw - 460px) / (1260 - 460))), 60px);overflow:hidden}.slashes{background-size:cover}.steps.swiper{margin-top:60px;padding:60px 40px 20px 0;margin-right:-30px;.swiper-nav{position:absolute;top:30px;right:40px;display:flex;gap:12px;.swiper-button-next,.swiper-button-prev{position:initial;background:#fff0;padding:0}}.swiper-nav{svg path{fill:var(--color-white);@media all and (min-width:640px){fill:var(--color-black)}}}}.card{&.inactive{transition-property:width,transform,opacity!important;transition-duration:.5s!important;transform-origin:left center;width:0!important;margin:0!important;opacity:0;img{width:0;opacity:0;transition:transform .2s,opacity .3s}.txt-container{opacity:0}}.txt-container{position:relative}.title{font-family:azo-sans-uber,sans-serif;font-weight:100;font-size:36px;margin-bottom:0;padding-left:15px;line-height:1.1em;margin-top:-110px;color:var(--color-white);text-shadow:-5px -5px 0 var(--color-black)}.slgn{padding-left:15px;margin-top:5px}.txt-container{position:relative;z-index:2}img,.txt-container{transition:transform .3s ease-in-out}}.mission .card{cursor:pointer;&:hover{.txt-container{transform:translateY(-12px)}img{transform:scale(1.2)}}}.glitch-container{position:relative;display:inline-block;overflow:hidden;width:100%}.glitch-container.glitch-active:not(.clicked){&::before,&::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;z-index:1;pointer-events:none;animation-timing-function:steps(1,end)}&.brand{&::before,&::after{background-image:url(../img/identite-de-marque.webp)}}&.digit{&::before,&::after{background-image:url(../img/conception-numerique.webp)}}&.prod{&::before,&::after{background-image:url(../img/production-image.webp)}}&.events{&::before,&::after{background-image:url(../img/evenements.webp)}}&::before{filter:hue-rotate(270deg) saturate(150%);mix-blend-mode:saturation;animation:glitch-translate 0.3s infinite alternate}&::after{filter:hue-rotate(90deg) saturate(150%);mix-blend-mode:soft-light;animation:glitch-translate-skew 0.3s infinite alternate}img{filter:blur(5px);animation:glitch-translate 0.3s infinite alternate}}@keyframes glitch-translate{0%{transform:translate(0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-2px,2px)}75%{transform:translate(1px,1px)}100%{transform:translate(-1px,1px)}}@keyframes glitch-translate-skew{0%{transform:translate(0) skew(0)}20%{transform:translate(-1px,1px) skew(-2deg)}40%{transform:translate(2px,-2px) skew(0)}60%{transform:translate(-1px,2px) skew(2deg)}80%{transform:translate(1px,-1px) skew(0)}100%{transform:translate(-1px,1px) skew(-1deg)}}.section{padding-top:120px;>p{max-width:1200px}.chapter{margin:0;letter-spacing:4px;font-size:clamp(15px, calc(15px + (36 - 15) * ((100vw - 460px) / (1260 - 460))), 36px)}>.title{line-height:.9em;font-size:clamp(68px, calc(68px + (200 - 68) * ((100vw - 460px) / (1260 - 460))), 200px);margin-bottom:clamp(.53em, calc(.53em + (.83 - .53) * ((100vw - 460px) / (1260 - 460))), .83em)}}.mission .colored{position:relative;.slashes{position:absolute;top:-40px;left:-538px;width:1150px;height:1700px;background-image:url(../img/yellow-slashes.svg);background-position:top right;z-index:-1;@media all and (min-width:640px){width:170%;height:calc(170% * 1.385);left:-125%;top:-90px}}}.project{position:relative;.slashes{position:absolute;bottom:-30px;right:-334px;width:805px;height:1450px;background-image:url(../img/red-slashes.svg);background-position:top right;z-index:-1;@media all and (min-width:640px){width:170%;height:calc(170% * 1.385);left:-130%;top:0}}}.theend{padding-top:30px;padding-bottom:90px;margin-top:120px;position:relative;color:var(--color-white);a{color:var(--color-white)}.button{color:var(--color-black)}.slashes{position:absolute;top:0;right:-200px;width:2200px;height:2250px;background-image:url(../img/purple-slashes.svg);z-index:-1;@media all and (min-width:1024px){width:300%;height:calc(300% * 1.385);left:auto;right:-240px;top:0}}}.ovrly{background-color:var(--color-white);padding:clamp(25px, calc(25px + (40 - 25) * ((100vw - 460px) / (1260 - 460))), 40px);margin:20px;position:fixed;top:0;right:0;width:calc(100vw - 40px);height:calc(100lvh - 40px);z-index:10;overflow:scroll;box-shadow:0 0 0 30px rgb(0 0 0 / .7);opacity:0;transform:translateX(100vw);transition:all 0.4s ease-in-out;@media all and (min-width:768px){margin:0;box-shadow:none;transform-origin:center left;top:auto;right:auto;width:auto;height:auto}.title{font-size:clamp(22px, calc(22px + (36 - 22) * ((100vw - 460px) / (1260 - 460))), 36px)}&.visible{opacity:1;transform:translateX(0)}&.contact-form-wrapper{transition:transform .4s ease,box-shadow .6s ease;@media all and (min-width:768px){width:50%;height:100lvh;top:0;right:0;box-shadow:0 0 0 0 rgb(0 0 0 / .7);&.visible{box-shadow:0 -50vw 0 50vw rgb(0 0 0 / .7)}}}&.form-sent{background-color:var(--color-green)}&.mission{background-position:calc(100% + 20px) bottom;background-size:225px 349px;background-repeat:no-repeat;display:flex;flex-direction:column;gap:20px;@media all and (min-width:768px){transform:scale(.95);&.visible{position:absolute;transform:scale(1)}}&.yellow{background-image:url(../img/corner-yellow.svg);.slashlist li:before{background-color:var(--color-yellow)}}&.green{background-image:url(../img/corner-green.svg);.slashlist li:before{background-color:var(--color-green)}}&.red{background-image:url(../img/corner-red.svg);.slashlist li:before{background-color:var(--color-red)}}&.purple{background-image:url(../img/corner-purple.svg);.slashlist li:before{background-color:var(--color-purple)}}.button{margin-left:0;margin-top:auto}}}.profiles{display:flex;padding:clamp(10px, calc(10px + (80 - 10) * ((100vw - 460px) / (1260 - 460))), 80px);gap:clamp(40px, calc(40px + (80 - 40) * ((100vw - 460px) / (1260 - 460))), 80px);margin-top:40px;margin-bottom:40px;.profile{flex:1;max-width:280px;img{border-radius:50%;background-color:var(--color-lightgray)}.title{font-family:azo-sans-uber,sans-serif;position:absolute;left:-5px;font-size:clamp(20px, calc(20px + (32 - 20) * ((100vw - 460px) / (1260 - 460))), 32px);margin:0;text-shadow:-3px -3px 0 var(--color-lightgray);color:var(--color-red)}}}.profile{position:relative}.profile.mel .title{top:5px;color:var(--color-yellow)}.profile.ben .title{bottom:15px}input,textarea{width:100%;border:none;padding:14px;font-size:12px;background-color:var(--color-lightgray);&::placeholder{color:rgb(0 0 0 / .4);font-style:italic}}#contact-form{.close-btn{padding:10px 18px;position:absolute;top:-30px;right:8px}}.contact-form{display:flex;flex-direction:column;flex-wrap:wrap;gap:20px;@media all and (min-width:768px){flex-direction:row;gap:40px;justify-content:flex-start;margin-top:40px}}form label{display:flex;align-items:center;font-size:14px;margin-bottom:4px;&.helvspaced{font-weight:900}&:before{display:block;content:"";height:14px;width:4px;transform:skew(-21deg);margin-right:5px}}form .field{&.has-error{input,textarea{background-color:rgb(234 84 61 / .3)}}@media all and (min-width:768px){width:calc(50% - 40px);&.message{width:100%}}}form .required{color:var(--color-red);margin-left:2px;margin-top:-2px}form .field:nth-of-type(4n+1) label:before{background-color:var(--color-red)}form .field:nth-of-type(4n+2) label:before{background-color:var(--color-yellow)}form .field:nth-of-type(4n+3) label:before{background-color:var(--color-green)}form .field:nth-of-type(4n+4) label:before{background-color:var(--color-purple)}form .button{margin-top:5px;margin-inline:0}ul.contacts{margin-top:60px;li{margin-bottom:20px}a{position:relative;&:after{display:block;content:'';position:absolute;top:-5px;left:-20px;background-color:rgb(255 255 255 / .3);width:calc(100% + 40px);height:calc(100% + 10px);transform:skew(-23deg) scaleX(0);transform-origin:center left;transition:transform .3s ease-out}&:hover{color:var(--color-white);text-decoration:none;&::after{transform:skew(-23deg) scaleX(1);}}}}ul.socials{display:flex;gap:15px;margin-top:40px;.social-link{display:block;width:50px;height:50px;&.linkedin{background:url(../img/logo-round-linkedin.svg) no-repeat center center;background-size:contain}&.insta{background:url(../img/logo-round-instagram.svg) no-repeat center center;background-size:contain}}}