@charset "UTF-8";
/* CSS Document */
@font-face {
	font-family: 'Silka'; 
	src: url('../fonts/Silka-Regular.woff') format('woff');
	font-weight: 400;
}
@font-face {
	font-family: 'Silka'; 
	src: url('../fonts/Silka-Light.woff') format('woff');
	font-weight: 300;
}
@font-face {
	font-family: 'Silka'; 
	src: url('../fonts/Silka-Medium.woff') format('woff');
	font-weight: 500;
}
@font-face {
	font-family: 'Silka'; 
	src: url('../fonts/Silka-SemiBold.woff') format('woff');
	font-weight: 600;
}
@font-face {
	font-family: 'Silka'; 
	src: url('../fonts/Silka-Bold.woff') format('woff');
	font-weight: 700;
}


* {
	margin:0;
	padding:0;
} 
*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
html {
	font-size: 62.5%;
	height: 100%;
}
body {
	min-height: 100%;
	font-family: 'Silka', sans-serif;
	font-size: 1.8rem;
	font-weight: 400;
	color: #0F0F0F;
	background-color: #FAFAFA;
	-webkit-text-size-adjust: 100%;
}
body.bk {
    background-color: #0F0F0F;
}
body.sp {
    overflow: auto;
}
.h100 {
    height: 100%;
    overflow: hidden;
}
.layout-open{
    touch-action: none;
}

img{
	border-style:none;
}
ul {
	list-style-type:none;
}
a {
	color: #0F0F0F;
	text-decoration:none;
	outline:none;
	display: block;
}
a:hover,
.nav-header:hover {
	color: #444444;
}
br {
	letter-spacing: normal;
}
iframe {
	border: none;
}
fieldset {
	border: none;
}
.text-br {
	display:inline-block;
}
span.br:before {
    content: '\A';
    white-space: pre;
}
h1 {
	font-size: 2.0rem;
	font-weight: 600;
	color: rgba(255,255,255,0);
}
h2 {
	font-size: clamp(3.0rem, 6vw, 4.0rem);
	font-weight: 600;
	margin-bottom: 8px;
}
h3 {
	font-size: clamp(4.6rem, 7vw, 6.0rem);
	font-weight: 600;
	letter-spacing: 0.02em;
    line-height: 1em;
	margin-bottom: 10px;
}
h4 {
	font-size: 2.6rem;
	font-weight: 400;
}
h5 {
	font-size: 2.0rem;
	font-weight: 300;
	letter-spacing: 0.05em;
}
p {
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.4em;
}

.bold {
	font-weight: 600;
}



header {
	width:100%;
	height: 80px;
	min-height: 1px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	position:fixed;
	top: 0px;
	z-index:1000;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.sp:not(.itemid-101) header {
    height: 60px;
    background-color: #FAFAFA;
}
header .logo {
	height: 100%;
	opacity: 0;
	-webkit-transform: translateY(-80px) rotate(60deg);
	    -ms-transform: translateY(-80px) rotate(60deg);
	        transform: translateY(-80px) rotate(60deg);
	position: relative;
	z-index: 999;
}
header .logo.on {
	-webkit-transform: translateY(0) rotate(0);
	    -ms-transform: translateY(0) rotate(0);
	        transform: translateY(0) rotate(0);
	opacity: 1;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
header .logo img {
	width: 90px;
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 1;
}
.sp header .logo img,
.snap-off header .logo img{
    left: 10px;
    top: 15px;
}
header .logo img:nth-child(1) {
	opacity: 0;
	-webkit-transform: translateY(-80px) rotate(60deg);
	    -ms-transform: translateY(-80px) rotate(60deg);
	        transform: translateY(-80px) rotate(60deg);
}
.bk header .logo img:nth-child(2) {
	opacity: 0;
}
.bk header .logo img:nth-child(1) {
	-webkit-transform: translateY(0) rotate(0);
	    -ms-transform: translateY(0) rotate(0);
	        transform: translateY(0) rotate(0);
	opacity: 1;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	-webkit-transition-delay: 0.5s;
	     -o-transition-delay: 0.5s;
	        transition-delay: 0.5s;
}


.menu-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 100%;
    top: 0;
    -webkit-transition-timing-function: cubic-bezier(10,2,3,1);
         -o-transition-timing-function: cubic-bezier(10,2,3,1);
            transition-timing-function: cubic-bezier(10,2,3,1);
    -webkit-transform: translateX(100vw);
        -ms-transform: translateX(100vw);
            transform: translateX(100vw);
    z-index: 0;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
    overflow-y: hidden;
}
.snap-off .menu-wrap.active {
    padding: 50px 0;
    overflow-y: scroll;
    align-content: flex-start;
}

#mainmenu ul {
	max-width: 300px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 auto;
}
#mainmenu ul > li {
    width: 100%;
	padding: 15px 0;
}
#mainmenu ul > li a {
	font-size: 2.0rem;
	color: #0F0F0F;
	display: inline-block;
}
#mainmenu ul > li:hover a {
	color: #DDDDDD !important;
}

.menu-wrap.active {
    left: 0;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
	background-color: #FAFAFA;
}

/* GENERAL STYLES */
.burger,
.close {
	width: 40px;
    height: 40px;
    position: fixed;
	top: 20px;
	right: 20px;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 20px;
	z-index: 999;
}
.close {
    z-index: 1001;
}
.burger .bar {
    padding: 0;
    width: 30px;
    height: 3px;
    background-color: #0F0F0F;
    display: block;
    border-radius: 4px;
    -webkit-transition: all 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.4s;
    transition: all 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out 0.4s;
    -o-transition: all 0.4s ease-in-out, transform 0.4s ease-in-out 0.4s;
    transition: all 0.4s ease-in-out, transform 0.4s ease-in-out 0.4s;
    transition: all 0.4s ease-in-out, transform 0.4s ease-in-out 0.4s, -webkit-transform 0.4s ease-in-out 0.4s;
    position: absolute;
}
.bk .burger .bar {
	background-color: #FAFAFA;
}
.burger .bar1 {
    top: 7.5px;
	left: 4px;
}
.burger .bar2 {
    width: 1px;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
	top: 18px;
    left: 20px;
}
.burger .bar3 {
    width: 1px;
    top: 18px;
    left: 20px;
}
.burger .bar4 {
    top: 17.5px;
	left: 4px;
}
.burger .bar5 {
    top: 27.5px;
	left: 4px;
}

.menu-wrap.active ~ .burger {
	height: 40px;
	border: 1px solid #0F0F0F;
	border-radius: 20px;
}
.bk .menu-wrap.active ~ .burger,
.close {
	border-color: #FAFAFA;
}
.menu-wrap.active ~ .burger > .bar {
	background-color: #0F0F0F;
}
.bk .menu-wrap.active ~ .burger > .bar {
	background-color: #FAFAFA;
}
.menu-wrap.active ~ .burger > .bar1,
.bk .menu-wrap.active ~ .burger > .bar1 {
    top: 13.5px;
    background-color: transparent;
}

.menu-wrap.active ~ .burger > .bar2{
    width: 24px;
	height: 2px;
    left: 7px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.menu-wrap.active ~ .burger > .bar3{
    width: 24px;
	height: 2px;
    left: 7px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.menu-wrap.active ~ .burger > .bar4,
.bk .menu-wrap.active ~ .burger > .bar4 {
    background-color: transparent;
}

.menu-wrap.active ~ .burger > .bar5,
.bk .menu-wrap.active ~ .burger > .bar5 {
    top: 15px;
    background-color: transparent; 
}

.close .bar {
    width: 24px;
	height: 2px;
    background-color: #FAFAFA;
    border-radius: 4px;
    display: block;
    position: absolute;
    left: 7px;
    top: 18px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
.close .bar2 {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.sp .burger, 
.sp .close,
.snap-off .burger, 
.snap-off .close {
    top: 10px;
    right: 10px;
}

/* Contact Icons */
.contact-wrap {
	width: 40px;
	height: 40px;
	background: url("../images/icon_contact.png") no-repeat center center;
	background-size: contain;
	position: fixed;
	right: 20px;
	bottom: 20px;
	cursor: crosshair;
	z-index: 999;
}
.sp .contact-wrap,
.snap-off .contact-wrap{
	right: 15px;
	bottom: 10px;
}
.contact-wrap ul {
	width: 100%;
	height: 0;
	position: absolute;
	bottom: 0;
	padding-bottom: 0;
	overflow: hidden;
}
.contact-wrap:hover ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.contact-wrap ul li {
	overflow: hidden;
	padding: 5px 0;
}
.contact-wrap ul li a {
	width: 40px;
	height: 40px;
	color: transparent;
	background: no-repeat center center;
	background-size: contain;
	border: 1px solid #0F0F0F;
	border-radius: 100%;
	display: block;
	cursor: crosshair;
}
.contact-wrap ul li:nth-child(1) a {
	background-image: url("../images/icon_mail.png");
}
.contact-wrap ul li:nth-child(2) a {
	background-image: url("../images/icon_mob.png");
}
.contact-wrap ul li:nth-child(3) a {
	background-image: url("../images/icon_wapp.png");
}
.contact-wrap:hover {
	background-size: 0%;
}
.contact-wrap:hover ul {
	height: 180px;
	padding-bottom: 40px;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.bk .contact-wrap {
	background-image: url("../images/icon_contact_wh.png");
}
.bk .contact-wrap ul li:nth-child(1) a {
	background-image: url("../images/icon_mail_wh.png");
}
.bk .contact-wrap ul li:nth-child(2) a {
	background-image: url("../images/icon_mob_wh.png");
}
.bk .contact-wrap ul li:nth-child(3) a {
	background-image: url("../images/icon_wapp_wh.png");
}
.contact-wrap.off {
	display: none;
}

.contact-clone ul li {
	padding: 5px !important;
}
.contact-clone ul li a {
	font-size: 1.6rem !important;
	color: #FAFAFA;
	display: block;
}
.contact-clone ul li:nth-child(3) a {
	width: 60px;
    height: 60px;
	color: transparent;
	background: url("../images/icon_wapp_wh.png") no-repeat -12px center;
	background-size: contain;
}
#mainmenu .contact-clone {
	margin-top: 80px;
}
.snap-off .menu-wrap.active #mainmenu .contact-clone {
    margin-top: 30px;
}
#mainmenu .contact-clone ul li:nth-child(3) a {
	width: 60px;
    height: 60px;
	color: transparent !important;
    background-image: url("../images/icon_wapp.png");
	background-position: center center;
	margin: 0 auto;
}


.bk .menu-wrap {
	background-color: #0F0F0F;
}
.bk #mainmenu ul > li a {
	color: #FAFAFA;
}
.bk #mainmenu .contact-clone ul li a {
	color: #FAFAFA;
}
.bk #mainmenu .contact-clone ul li:nth-child(3) a {
	background-image: url("../images/icon_wapp_wh.png");
}

.wrapper {
	width: 100%;
    height: fit-content;
	position: relative;
}
.itemid-101 .wrapper {
    height: 100vh;
	height: 100svh;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.sp:not(.snap-off) .wrapper {
    -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
	overflow-y: auto;
    overflow-x: hidden;
}
section {
    width: 100%;
    height: fit-content;
    background-color: #FAFAFA;
	position: relative;
    padding: 100px;
    display: block;
}
section.page {
	width: 100%;
	height: 100%;
	padding: 0px 100px;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
    overflow: hidden;
}
.sp .page {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.page.no-snap {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 100px 20px 200px;
}
.snap-off .page.no-snap {
    min-height: 100svh;
    padding-bottom: 100px;
}
.snap-off #concept5.no-snap {
    padding-top: 250px;
    padding-bottom: 250px;
}
.container {
	width: 100%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 0 15px;
	position: relative;
	text-align: left;
}

.container h3 + p,
.container .text-box + p {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
	max-width: 700px;
    margin-top: 15px;
}

#accueil .container {
	text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.logo-wrap {
    width: 100%;
    position: relative;
}
.logo-top,
.box-bk {
	width: 100%;
	height: 170px;
	background: no-repeat center top;
	background-size: contain;
    position: relative;
}
.logo-top {
    color: transparent;
	background-image: url("../images/logo_base_typo.png");
    position: relative;
    z-index: 2;
}
.box-bk {
    background-image: url("../images/logo_base_bk.png");
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}
.loaded #accueil.page-active .box-bk {
    opacity: 1;
    -webkit-animation: logo-top 3.5s forwards;
            animation: logo-top 3.5s forwards;
}
@-webkit-keyframes logo-top {
	0% { -webkit-transform: translateY(-60vh); transform: translateY(-60vh); opacity: 0; }
    1% { opacity: 1; }
	40% { -webkit-transform: translateY(60px); transform: translateY(60px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes logo-top {
	0% { -webkit-transform: translateY(-60vh); transform: translateY(-60vh); opacity: 0; }
    1% { opacity: 1; }
	40% { -webkit-transform: translateY(60px); transform: translateY(60px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes logo-top2 {
	0% { -webkit-transform: translateY(-60vh); transform: translateY(-60vh); opacity: 0; }
    1% { opacity: 1; }
	40% { -webkit-transform: translateY(35px); transform: translateY(35px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes logo-top2 {
	0% { -webkit-transform: translateY(-60vh); transform: translateY(-60vh); opacity: 0; }
    1% { opacity: 1; }
	40% { -webkit-transform: translateY(35px); transform: translateY(35px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Animation Typing */
#accueil .text-box {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    padding: 60px 0 40px;
}
#accueil h2 {
	width: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}
#accueil .cursol {
    width: 0px;
    height: 48px;
	border-right: 1px solid #0F0F0F;
    margin-bottom: 8px;
    margin-left: -1px;
    opacity: 0;
}
.loaded #accueil .cursol {
    opacity: 1;
    -webkit-transition-delay: 2.0s;
         -o-transition-delay: 2.0s;
            transition-delay: 2.0s;
    -webkit-animation: cursol2 0.8s infinite;
            animation: cursol2 0.8s infinite;
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
}
.loaded #accueil h2 {
	-webkit-animation: typing 2s steps(20, end) forwards, cursol .5s step-end infinite alternate;
	        animation: typing 2s steps(20, end) forwards, cursol .5s step-end infinite alternate;
    -webkit-animation-delay: 3.0s;
            animation-delay: 3.0s;
}
#accueil.end h2 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
@-webkit-keyframes typing {
	0% { width: 0%; opacity: 1; border-right: 1px solid #0F0F0F}
	25% { width: 194px; padding-right: 5px;}
	50% { width: 194px; }
	100% { width: 494px; ; opacity: 1; padding-right: 5px; border-right: 1px solid #0F0F0F}
}
@keyframes typing {
	0% { width: 0%; opacity: 1; border-right: 1px solid #0F0F0F}
	25% { width: 194px; padding-right: 5px;}
	50% { width: 194px; }
	100% { width: 494px; ; opacity: 1; padding-right: 5px; border-right: 1px solid #0F0F0F}
}
@-webkit-keyframes typing2 {
      0% { width: 0%; opacity: 1; border-right: 1px solid #0F0F0F}
     25% { width: 39%; padding-right: 5px;}
     50% { width: 39%; }
    100% { width: 100%; ; opacity: 1; padding-right: 5px; border-right: 1px solid #0F0F0F}
}
@keyframes typing2 {
      0% { width: 0%; opacity: 1; border-right: 1px solid #0F0F0F}
     25% { width: 39%; padding-right: 5px;}
     50% { width: 39%; }
    100% { width: 100%; ; opacity: 1; padding-right: 5px; border-right: 1px solid #0F0F0F}
}
@-webkit-keyframes cursol {
  0%{ border-color: transparent; }
  50%{ border-color: #0F0F0F; }
  100%{ border-color: transparent; }
}
@keyframes cursol {
  0%{ border-color: transparent; }
  50%{ border-color: #0F0F0F; }
  100%{ border-color: transparent; }
}
@-webkit-keyframes cursol2 {
  0%{ border-color: transparent; }
  50%{ border-color: transparent; }
  60%{ border-color: #0F0F0F; }
  90%{ border-color: #0F0F0F; }
  100%{ border-color: transparent; }
}
@keyframes cursol2 {
  0%{ border-color: transparent; }
  50%{ border-color: transparent; }
  60%{ border-color: #0F0F0F; }
  90%{ border-color: #0F0F0F; }
  100%{ border-color: transparent; }
}

/* Animation H5 + Play */
#accueil h5 {
    width: 100%;
    padding: 10px 0 60px;
    opacity: 0;
}
#accueil a.play_video {
	width: 70px;
	height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	margin: 0 auto;
    opacity: 0;
}
#accueil a.play_video div {
	width: 70px;
	height: 70px;
	background: url("../images/btn_play.png") no-repeat center center #0F0F0F;
	background-size: 70%;
	border-radius: 35px;
}
#accueil a.play_video span {
	font-size: 1.2rem;
}
.loaded #accueil h5,
.loaded #accueil a.play_video {
	opacity: 1;
    -webkit-transition: opacity 1.0s;
    -o-transition: opacity 1.0s;
    transition: opacity 1.0s;
    -webkit-transition-delay: 5.5s;
         -o-transition-delay: 5.5s;
            transition-delay: 5.5s;
}
#accueil.end h5,
#accueil.end a.play_video {
    opacity: 1;
}

.video {
    width: 100%;
    height: 0;
    background-color: #0F0F0F;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 1000;
    opacity: 0;
    overflow-y: hidden;
}
.video.play {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    opacity: 1;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
.video video {
    width: 100%;
    max-width: 1000px;
}

#concept1 p,
#concept2 p,
#concept3 p,
#concept4 p,
#concept5 p {
	opacity: 0;
}

/* Animation Freehand */
#concept1 .text-box {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#concept1 h3 {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	white-space: nowrap
}
#concept1 .svg1 {
	position: relative;
	opacity: 0;
}
#concept1.is-show .svg1 {
	opacity: 1;
	-webkit-transition-delay: 1s;
	     -o-transition-delay: 1s;
	        transition-delay: 1s;
}
#concept1.end .svg1 {
	opacity: 1;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
#concept1 #text {
	-webkit-mask:url(#mask-ani);
	        mask:url(#mask-ani);
	fill: #0F0F0F;
}
#concept1 .svg1 svg {
	height: 115%;
	position: absolute;
	top: -16px;
	left: 15px;
}
#concept1 #mask-line {
	fill: none;
    stroke: #FFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7px;
	stroke-dasharray:1000px;
}
#concept1.is-show #mask-line {
	-webkit-animation:h-written 4s;
	        animation:h-written 4s;
}
#concept1.end #mask-line {
	-webkit-animation:h-written 0s;
	        animation:h-written 0s;
}
#concept1.is-show p {
	opacity: 1;
	-webkit-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
	-webkit-transition-delay: 3s;
	     -o-transition-delay: 3s;
	        transition-delay: 3s;
}
#concept1.end p {
	opacity: 1;
	-webkit-transition: opacity 0s;
	-o-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
@-webkit-keyframes h-written {
0% { stroke-dashoffset:1000px; }
15% { stroke-dashoffset:1000px; }
100% { stroke-dashoffset:0px; }

}
@keyframes h-written {
0% { stroke-dashoffset:1000px; }
15% { stroke-dashoffset:1000px; }
100% { stroke-dashoffset:0px; }

}

/* Animation Libérer */
#concept2 h3,
#concept3 h3,
#concept4 h3 {
	display: inline-block;
}
#concept2 .text-box div {
	display: inline-block;
}
#concept2 .text-box div:nth-child(2) {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	position: absolute;
}
#concept2 h3.l-0 {
	opacity: 0;
}
#concept2.is-show .l-1  {
	-webkit-animation: liverer1 12s ease-in-out forwards;
	        animation: liverer1 12s ease-in-out forwards;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept2.is-show h3.l-2  {
	-webkit-animation: liverer2 12s ease-in-out forwards;
	        animation: liverer2 12s ease-in-out forwards;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept2.is-show h3.l-3  {
	-webkit-animation: liverer3 12s ease-in-out forwards;
	        animation: liverer3 12s ease-in-out forwards;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept2.is-show h3.l-4  {
	-webkit-animation: liverer4 12s ease-in-out forwards;
	        animation: liverer4 12s ease-in-out forwards;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept2.is-show h3.l-5  {
	-webkit-animation: liverer5 12s ease-in-out forwards;
	        animation: liverer5 12s ease-in-out forwards;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept2.is-show h3.l-5  {
	-webkit-animation: liverer5 12s ease-in-out forwards;
	        animation: liverer5 12s ease-in-out forwards;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept2.is-show h3.l-0  {
	-webkit-animation: liverer0 1.5s forwards;
	        animation: liverer0 1.5s forwards;
	-webkit-animation-delay: 3.5s;
	        animation-delay: 3.5s;
}
#concept2.is-show p {
	opacity: 1;
	-webkit-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
	-webkit-transition-delay: 3.5s;
	     -o-transition-delay: 3.5s;
	        transition-delay: 3.5s;
}
#concept2.end h3.l-1,
#concept2.end h3.l-2,
#concept2.end h3.l-3,
#concept2.end h3.l-4,
#concept2.end h3.l-5 {
    display: none;
    -webkit-animation: none;
            animation: none;
}
#concept2.end .text-box div:nth-child(2) {
	position: relative;
}
#concept2.end h3.l-0 {
    opacity: 1;
    -webkit-animation: none;
            animation: none;
}
#concept2.end p {
	opacity: 1;
	-webkit-transition: opacity 0s;
	-o-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
@-webkit-keyframes liverer1 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(-100vw,-100vh); transform:translate(-100vw,-100vh); opacity: 0; }
}
@keyframes liverer1 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(-100vw,-100vh); transform:translate(-100vw,-100vh); opacity: 0; }
}
@-webkit-keyframes liverer2 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(30vw,-100vh); transform:translate(30vw,-100vh); opacity: 0; }
}
@keyframes liverer2 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(30vw,-100vh); transform:translate(30vw,-100vh); opacity: 0; }
}
@-webkit-keyframes liverer3 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(80vw,-20vh); transform:translate(80vw,-20vh); opacity: 0; }
}
@keyframes liverer3 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(80vw,-20vh); transform:translate(80vw,-20vh); opacity: 0; }
}
@-webkit-keyframes liverer4 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	15% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(-40vw,130vh); transform:translate(-40vw,130vh); opacity: 0; }
}
@keyframes liverer4 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	15% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(-40vw,130vh); transform:translate(-40vw,130vh); opacity: 0; }
}
@-webkit-keyframes liverer5 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(100vw,60vh); transform:translate(100vw,60vh); opacity: 0; }
}
@keyframes liverer5 {
	0% { -webkit-transform:translate(0,0); transform:translate(0,0); }
	20% { opacity: 1; }
	30% { opacity: 0; }
	100% { -webkit-transform:translate(100vw,60vh); transform:translate(100vw,60vh); opacity: 0; }
}
@-webkit-keyframes liverer0 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes liverer0 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* Animation O */
#concept3 .text-box div.text-br {
	display: inline;
}
#concept3 h3.l-1  {
	opacity: 0;
	-webkit-transform:translate(0,-60px);
	    -ms-transform:translate(0,-60px);
	        transform:translate(0,-60px);
}
#concept3 h3.l-2  {
	opacity: 0;
	-webkit-transform:translate(0,-100px);
	    -ms-transform:translate(0,-100px);
	        transform:translate(0,-100px);
}
#concept3.is-show h3.l-1  {
	-webkit-animation: downO1 0.8s ease-in-out forwards;
	        animation: downO1 0.8s ease-in-out forwards;
	-webkit-animation-delay: 1.5s;
	        animation-delay: 1.5s;
}
#concept3.is-show h3.l-2  {
	-webkit-animation: downO2 0.8s ease-in-out forwards;
	        animation: downO2 0.8s ease-in-out forwards;
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
}
#concept3.is-show p {
	opacity: 1;
	-webkit-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
	-webkit-transition-delay: 2.5s;
	     -o-transition-delay: 2.5s;
	        transition-delay: 2.5s;
}
#concept3.end h3.l-1,
#concept3.end h3.l-2 {
	opacity: 1;
	-webkit-transform:translate(0,0);
	    -ms-transform:translate(0,0);
	        transform:translate(0,0);
}
#concept3.end p {
	opacity: 1;
	-webkit-transition: opacity 0s;
	-o-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
@-webkit-keyframes downO1 {
	0% { -webkit-transform:translate(0,-160px); transform:translate(0,-160px); opacity: 0; }
	80% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	90% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1; }
}
@keyframes downO1 {
	0% { -webkit-transform:translate(0,-160px); transform:translate(0,-160px); opacity: 0; }
	80% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	90% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1; }
}
@-webkit-keyframes downO2 {
	0% { -webkit-transform:translate(0,-200px); transform:translate(0,-200px); opacity: 0; }
	80% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	90% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1; }
}
@keyframes downO2 {
	0% { -webkit-transform:translate(0,-200px); transform:translate(0,-200px); opacity: 0; }
	80% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	90% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 0.5; }
	100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1; }
}
@-webkit-keyframes o-color {
	0% { opacity: 0.5; }
	100% { opacity: 1; }
}
@keyframes o-color {
	0% { opacity: 0.5; }
	100% { opacity: 1; }
}

/* Animation LetterSpacing */
#concept4.is-show h3  {
	-webkit-animation: space 1.5s forwards;
	        animation: space 1.5s forwards;
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
}
#concept4.is-show p {
	opacity: 1;
	-webkit-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
	-webkit-transition-delay: 2.5s;
	     -o-transition-delay: 2.5s;
	        transition-delay: 2.5s;
}
#concept4.end h3  {
    letter-spacing: -0.1em;
	-webkit-animation: none;
	        animation: none;
}
#concept4.end p {
	opacity: 1;
	-webkit-transition: opacity 0s;
	-o-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
@-webkit-keyframes space {
	0% { letter-spacing: 0.02em; }
	100% { letter-spacing: -0.1em; }
}
@keyframes space {
	0% { letter-spacing: 0.02em; }
	100% { letter-spacing: -0.1em; }
}

/* Animation 360 */
#concept5 .text-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
	position: relative;
}
#concept5 .text-box h3 {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
    white-space: nowrap;
}
#concept5 .svg2 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
	position: absolute;
    left: 310px;
	opacity: 0;
}
#concept5.is-show .svg2 {
    opacity: 1;
}
#concept5 .svg2 svg {
	width: 600px;
	min-width: 500px;
}
#concept5 #circle {
	-webkit-mask:url(#mask-ani2);
	        mask:url(#mask-ani2);
	fill: #0F0F0F;
}
#concept5 .cls-1 {
		font-family: Silka-Regular, Silka;
        font-size: 11px;
        letter-spacing: .05em;
     	fill: #0d0d0d;
      }
#concept5 .cls-10 {
		fill: none;
        stroke: #0d0d0d;
        stroke-width: 0.6px;
		stroke-miterlimit: 10;
      }
#concept5 .cls-11 {
        fill: none;
        stroke: #0d0d0d;
        stroke-width: 100px;
        stroke-miterlimit: 10;
        stroke-linecap: round;
      }
#concept5.is-show #mask-line2 {
	fill: none;
    stroke: #FFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 65px;
	stroke-dasharray:1500px;
	-webkit-animation:h-written2 5s;
	        animation:h-written2 5s;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept5.is-show p {
	opacity: 1;
	-webkit-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
	-webkit-transition-delay: 3s;
	     -o-transition-delay: 3s;
	        transition-delay: 3s;
}
#concept5.end .svg2 {
    opacity: 1;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    -webkit-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
#concept5.end #mask-line2 {
	fill: none;
    stroke: #FFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 65px;
	stroke-dasharray:1500px;
	-webkit-animation:h-written2 0s;
	        animation:h-written2 0s;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
#concept5.end p {
	opacity: 1;
	-webkit-transition: opacity 0s;
	-o-transition: opacity 0s;
	transition: opacity 0s;
	-webkit-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
@-webkit-keyframes h-written2 {
    0% { stroke-dashoffset:1500px; }
    15% { stroke-dashoffset:1500px; }
    100% { stroke-dashoffset:0px; }
}
@keyframes h-written2 {
    0% { stroke-dashoffset:1500px; }
    15% { stroke-dashoffset:1500px; }
    100% { stroke-dashoffset:0px; }
}

.snap-off #concept1 p,
.snap-off #concept2 p,
.snap-off #concept3 p,
.snap-off #concept4 p {
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
/* page en noir */
section.noir {
	background-color: #0F0F0F;
}
section.noir h3 {
    font-size: clamp(2.8rem, 8vw, 4.0rem);
	color: #FAFAFA;
}
section.noir p{
	color: #FAFAFA;
}


/* page propos */
#propos .text-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 30px;
}
#propos .text-box > div {
    width: 100%;
    opacity: 0;
    -webkit-transform: translateX(80px);
        -ms-transform: translateX(80px);
            transform: translateX(80px);
}
#propos.is-show .text-box > div {
	opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
#propos.is-show .text-box > div:nth-child(2) {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    -webkit-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
#propos.is-show .text-box > div:nth-child(3) {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    -webkit-transition-delay: 1.5s;
         -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
}
#propos.end .text-box > div {
	opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
#propos.end .text-box > div:nth-child(2),
#propos.end .text-box > div:nth-child(3) {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
#propos h3 {
	margin-bottom: 50px;
}
#propos h5 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #FAFAFA;
    margin-bottom: 15px;
}
#propos p {
    font-size: 1.4rem;
	margin-bottom: 15px;
}
#propos p b {
    font-weight: 600;
}


/* page clients */
#clients h3 {
	text-align: center;
	margin-bottom: 80px;
}
#clients .list-wrap {
	width: 100%;
	max-width: 640px;
	height: fit-content;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 50px;
	row-gap: 30px;
    opacity: 0;
    margin: 0 auto;
    -webkit-transform: translateY(60px);
            transform: translateY(60px);
}
#clients.is-show .list-wrap {
	opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: all 1.5s;
            transition: all 1.5s;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}
#clients.end .list-wrap {
	opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: all 0s;
            transition: all 0s;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}
#clients .list-wrap > img {
	height: 52px;
}

/* page références */
#references h3 {
	text-align: center;
	margin-bottom: 30px;
}
#references h5 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #FAFAFA;
    text-align: center;
    margin-bottom: 30px;
}
#references .list-wrap {
	width: 100%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
    min-height: 215px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-column-gap: 25px;
	   -moz-column-gap: 25px;
	        column-gap: 25px;
	row-gap: 20px;
    opacity: 0;
    margin: 0 auto;
    -webkit-transform: translateY(60px);
        -ms-transform: translateY(60px);
            transform: translateY(60px);
}
#references.is-show .list-wrap {
	opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
#references.end .list-wrap {
	opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
    -webkit-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
#references .list-wrap > div img,
.tool-tip img {
	height: 52px;
}
#references .tool-tip {
    width: 0;
	min-height: 50px;
	border: 1px solid #FAFAFA;
	padding: 0px 15px;
	margin: 0 auto 10px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	opacity: 0;
    overflow: hidden;
}
#references.page-active .tool-tip {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
    overflow: visible;
    -webkit-transition-delay: 0.8s;
         -o-transition-delay: 0.8s;
            transition-delay: 0.8s;
}
#references.page-active .tool-tip.on {
	opacity: 0.5;
}
#references .tool-tip.on > div:nth-child(2) {
	border-left: 1px solid #FAFAFA;
	margin-left: 10px;
	padding-left: 10px;
}
#references .tool-tip h5 {
	font-size: 1.4rem;
	font-weight: 600;
    white-space: nowrap;
	color: #FAFAFA;
    text-align: left;
    margin: 0;
}
#references .tool-tip p {
	font-size: 1.0rem;
	font-weight: 300;
	font-style: italic;
    white-space: nowrap;
}
#references.no-snap h3 {
    margin-bottom: 50px;
}
#references.no-snap .tool-tip {
    display: none;
}


/* page contact */
#contact {
    height: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow-y: hidden;
    padding-bottom: 50px;
}
#contact.no-snap {
    height: 100svh;
    min-height: 500px;
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 50px;
}
#contact .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
#contact .text-box {
  padding-top: 100px;
}
#contact h3 {
	margin-bottom: 20px;
}



/* Scroll btn */
.mouse{
	width: 28px;
	height: 48px;
	position: fixed;
	left: calc(50% - 14px);
	bottom: 30px;	
	background: #FAFAFA -webkit-gradient(linear,
                                      left top, left bottom,
                                      from(transparent),
                                      color-stop(50%, transparent),
                                      color-stop(50%, #0F0F0F),
                                      to(#0F0F0F));	
	background: #FAFAFA -o-linear-gradient(transparent 0%,
                                      transparent 50%,
                                      #0F0F0F 50%,
                                      #0F0F0F 100%);	
	background: #FAFAFA linear-gradient(transparent 0%,
                                      transparent 50%,
                                      #0F0F0F 50%,
                                      #0F0F0F 100%);
	background-size: 100% 200%;
	border-radius: 100px;
	opacity: 0;
}
.mouse.on {
	opacity: 1;
	-webkit-animation: colorSlide 6s linear infinite,
             nudgeMouse 6s ease-out infinite;
	        animation: colorSlide 6s linear infinite,
             nudgeMouse 6s ease-out infinite;
}
.mouse.off {
	display: none;
}
.mouse:before,
.mouse:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.mouse:before{
	width: 24px;
	height: 44px;
	background-color: #FAFAFA;
	border-radius: 100px;
}
.mouse:after{
	background-color: #0F0F0F;
	width: 4px;
	height: 4px;
	border-radius: 100%;
	opacity: 0;
}
.mouse.on:after {
	-webkit-animation: trackBallSlide 6s linear infinite;
	        animation: trackBallSlide 6s linear infinite;
}
@-webkit-keyframes colorSlide{
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #E0E0E0;
  }
  29.99% {
    background-color: #0F0F0F;
    background-position: 0% 0%;
  }
  30% {
    background-color: #E0E0E0;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #E0E0E0;
  }
  59% {
    background-color: #0F0F0F;
    background-position: 0% 0%;
  }
  60% {
    background-color: #E0E0E0;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #E0E0E0;
  }
  90%, 100% {
    background-color: #0F0F0F;
  }
}
@keyframes colorSlide{
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #E0E0E0;
  }
  29.99% {
    background-color: #0F0F0F;
    background-position: 0% 0%;
  }
  30% {
    background-color: #E0E0E0;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #E0E0E0;
  }
  59% {
    background-color: #0F0F0F;
    background-position: 0% 0%;
  }
  60% {
    background-color: #E0E0E0;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #E0E0E0;
  }
  90%, 100% {
    background-color: #0F0F0F;
  }
}
@-webkit-keyframes trackBallSlide{
  0%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  6%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  14%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  15%, 19%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-12px);
            transform: scale(0.4) translateY(-12px);
  }
  28%, 29.99%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  30%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  36%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  44%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  45%, 49%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-12px);
            transform: scale(0.4) translateY(-12px);
  }
  58%, 59.99%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  60%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(-12px);
            transform: scale(0.9) translateY(-12px);
  }
  66%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  74%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  75%, 79%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-12px);
            transform: scale(0.4) translateY(-12px);
  }
  88%, 100%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
}
@keyframes trackBallSlide{
  0%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  6%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  14%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  15%, 19%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-12px);
            transform: scale(0.4) translateY(-12px);
  }
  28%, 29.99%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  30%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  36%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  44%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  45%, 49%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-12px);
            transform: scale(0.4) translateY(-12px);
  }
  58%, 59.99%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
  60%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(-12px);
            transform: scale(0.9) translateY(-12px);
  }
  66%{
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
            transform: scale(0.9) translateY(5px);
  }
  74%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
            transform: scale(0.4) translateY(40px);
  }
  75%, 79%{
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-12px);
            transform: scale(0.4) translateY(-12px);
  }
  88%, 100%{
    opacity: 1;
    -webkit-transform: scale(1) translateY(-12px);
            transform: scale(1) translateY(-12px);
  }
}
@-webkit-keyframes nudgeMouse{
  0%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  30%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  60%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  90%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes nudgeMouse{
  0%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  30%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  60%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80%{
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  90%{
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* Scroll btn en noir */
.bk .mouse {
	background: #0F0F0F -webkit-gradient(linear,
                                      left top, left bottom,
                                      from(transparent),
                                      color-stop(50%, transparent),
                                      color-stop(50%, #FAFAFA),
                                      to(#FAFAFA));
	background: #0F0F0F -o-linear-gradient(transparent 0%,
                                      transparent 50%,
                                      #FAFAFA 50%,
                                      #FAFAFA 100%);
	background: #0F0F0F linear-gradient(transparent 0%,
                                      transparent 50%,
                                      #FAFAFA 50%,
                                      #FAFAFA 100%);
	background-size: 100% 200%;
	border-radius: 100px;
}
.bk .mouse:before{
	background-color: #0F0F0F;
}
.bk .mouse:after{
	background-color: #FAFAFA;
}
.bk .mouse.on {
	-webkit-animation: colorSlideBK 6s linear infinite,
             nudgeMouse 6s ease-out infinite;
	        animation: colorSlideBK 6s linear infinite,
             nudgeMouse 6s ease-out infinite;
}
.bk .mouse.on:after{
	background-color: #FAFAFA;
}
@-webkit-keyframes colorSlideBK {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #444444;
  }
  29.99% {
    background-color: #FAFAFA;
    background-position: 0% 0%;
  }
  30% {
    background-color: #444444;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #444444;
  }
  59% {
    background-color: #FAFAFA;
    background-position: 0% 0%;
  }
  60% {
    background-color: #444444;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #444444;
  }
  90%, 100% {
    background-color: #FAFAFA;
  }
}
@keyframes colorSlideBK {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #444444;
  }
  29.99% {
    background-color: #FAFAFA;
    background-position: 0% 0%;
  }
  30% {
    background-color: #444444;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #444444;
  }
  59% {
    background-color: #FAFAFA;
    background-position: 0% 0%;
  }
  60% {
    background-color: #444444;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #444444;
  }
  90%, 100% {
    background-color: #FAFAFA;
  }
}



footer {
    width: 100%;
    padding: 0 15px 30px;
    position: relative;
}
footer p.credit {
	font-size: 1.3rem;
    text-align: center;
}
footer p.credit a {
    display: inline-block;
}
footer p.credit a:hover {
    color: rgba(0,0,0,0,5);
}
.itemid-101 footer {
    position: absolute;
    left: 0;
    bottom: 0;
}
.itemid-101 footer p.credit,
.itemid-101 footer p.credit a {
    color: #FAFAFA;
}


.ml h2 {
    font-size: clamp(3.0rem, 6vw, 3.0rem);
    margin-bottom: 20px;
}
.ml h5 {
    font-size: 1.8rem;
    font-weight: 500;
    padding: 15px 0 5px;
}
.ml p {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.5em;
    margin-bottom: 10px;
}
.ml a {
    display: inline;
}

@media screen and (max-width: 1200px) {
	#concept5 .svg2 svg {
		width: 50vw;
	}
}
@media screen and (max-width: 1000px) {
    section {
        padding: 100px 50px;
    }
    section.page {
		padding: 0px 50px;
	}
	#concept2 h3.l-0 {
		left: 28vw;
	}
    #concept5 .svg2 {
        left: 320px;
    }
    #references .list-wrap {
        min-height: 288px;
    }
}
@media screen and (max-width: 900px) {
	#concept3 .text-box > h3 {
		margin-bottom: 0;
	}
	#concept3 .text-box div.text-br {
		display: block;
	}
    #concept5 .svg2 {
        left: inherit;
        right: -50px;
    }
    #references .list-wrap {
        min-height: 365px;

    }
}

@media screen and (max-width: 768px) {
	
}

@media screen and (max-width: 600px) {
    section {
        padding: 80px 0;
    }
    section.page {
		padding: 0;
	}
	section h3 {
		font-size: clamp(2.8rem, 9vw, 4.6rem);
		text-align: center;
		margin: 0 auto;
	}
	.container .text-box,
	section p {
		width: 100%;
		font-size: 1.4rem;
		text-align: center;
		margin: 0 auto;
	}
    section p {
        margin-top: 30px;
    }
    #accueil .container {
        padding-top: 5vw;
    }
    .logo-top, 
    .box-bk {
        height: 30vw;
        max-height: 130px;
    }
    .loaded #accueil.page-active .box-bk {
        -webkit-animation: logo-top2 3.5s;
                animation: logo-top2 3.5s;
    }
    #accueil .text-box {
        width: 100%;
        max-width: 100%;
        padding-top: 10vw;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: relative;
    }
    #accueil h2 {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
	    font-size: clamp(2.0rem, 7vw, 3.0rem);
        opacity: 0;
        padding-left: 0;
        margin-bottom: 0;
    }
    #accueil h5 {
	    font-size: 1.5rem;
        padding-top: 2vw;
        padding-bottom: 12vw;
    }
    #accueil  a.play_video {
        height: 80px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    #accueil a.play_video div {
        width: 50px;
        height: 50px;
        background-size: 70%;
        border-radius: 25px;
    }
    
    .loaded #accueil h2,
    .loaded #accueil h5, 
    .loaded #accueil a.play_video {
        -webkit-animation: none;
                animation: none;
        opacity: 1;
        -webkit-transition: opacity 1.0s;
        -o-transition: opacity 1.0s;
        transition: opacity 1.0s;
        -webkit-transition-delay: 2.8s;
             -o-transition-delay: 2.8s;
                transition-delay: 2.8s;
    }
    #accueil .cursol {
        display: none;
    }
    
    #concept1 p,
    #concept2 p,
    #concept3 p,
    #concept4 p {
        opacity: 1;
        -webkit-transition: opacity 2s;
        -o-transition: opacity 2s;
        transition: opacity 2s;
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;
    }
    
	#concept1 .text-box {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-column-gap: 10px;
           -moz-column-gap: 10px;
                column-gap: 10px;
	}
    #concept1 h3 {
        margin: 0;
    }
    #concept1 p {
		margin-top: 10px;
	}
    #concept1.is-show .svg1 {
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;
    }
    #concept1 .svg1 svg {
        height: 13vw;
        max-height: 64px;
        position: inherit;
        left: inherit;
        top: -2px;
    }
    
    #concept3.is-show h3.l-1 {
        -webkit-animation-delay: 0.5s;
                animation-delay: 0.5s;
    }
    #concept3.is-show h3.l-2 {
        -webkit-animation-delay: 0s;
                animation-delay: 0s;
    }

	#concept4 h3 {
		display: block;
	}
    #concept4.is-show h3 {
        -webkit-animation-delay: 0s;
                animation-delay: 0s;
    }
    
	#concept5 .container .text-box, 
	#concept5 .container .text-box + p {
		max-width: 480px;
		padding: 0 50px;
		position: static;
	}
    #concept5 .svg2 {
        right: inherit;
        left: calc(50% - 250px);
    }
	#concept5 .svg2 svg {
		width: 100vw;
		min-width: inherit;
		max-width: 500px;
	}
    
    #propos h3 {
        text-align: center;
    }
    #propos .text-box > div {
        opacity: 1;
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        -webkit-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s;
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;
    }
    #references .list-wrap {
        min-height: 442px;
        opacity: 1;
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
        -webkit-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s;
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;
    }
    
    #contact h3 {
        margin-bottom: 30px;
    }
    #contact .contact-clone ul li{
        text-align: center;
    }
    .contact-clone ul li:nth-child(3) a {
        display: inline-block;
        background-position: center center;
    }
    
    
    .ml h2 {
       text-align: center; 
    }
    .ml h5,
    .ml p {
        text-align: left;
        margin: 0;
    }
	    
}

@media screen and (max-width: 480px) {
    
    #concept4 p .text-br {
        display: inline;
    }
    
	#concept5 .container .text-box {
		width: 96%;
		padding: 0;
	}
	#concept5 .container .text-box + p {
		width: 80%;
		padding: 0;
	}
    #concept5 .svg2 {
        left: 0;
    }
	#concept5 .svg2 svg {
		width: 100vw;
	}
    
    #references .list-wrap {
        min-height: 442px;
        -webkit-column-gap: 15px;
           -moz-column-gap: 15px;
                column-gap: 15px;
        row-gap: 10px;
        padding: 0 10px;
    }
    #references .list-wrap > div,
    #references .list-wrap > div img {
        height: 42px;
    }
    
    footer .credit p {
        font-size: 1.2rem;
    }
    
    .mouse {
        bottom: 20px;
    }
    .contact-wrap {
        display: none;
    }
}
    
@media screen and (max-height: 500px) {
    .snap-off #accueil {
        padding-top: 0;
        padding-bottom: 0;
    }
    .snap-off #accueil .container {
        padding-top: 0;
    }
    .snap-off .logo-top, 
    .snap-off .box-bk {
        height: 30vw;
        max-height: 130px;
    }
    .snap-off #accueil .text-box {
        width: 100%;
        max-width: 100%;
        padding-top: 30px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: relative;
    }
    .snap-off #accueil h2 {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
	    font-size: clamp(2.0rem, 7vw, 3.0rem);
        opacity: 0;
        padding-left: 0;
        margin-bottom: 0;
    }
    
    .snap-off #accueil h5 {
	    font-size: 1.5rem;
        padding-top: 10px;
        padding-bottom: 30px;
    }
    .snap-off #accueil .cursol {
        display: none;
    }
    .snap-off #accueil a.play_video {
        height: 80px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .snap-off #accueil a.play_video div {
        width: 50px;
        height: 50px;
        background-size: 70%;
        border-radius: 25px;
    }
    .snap-off #accueil.page-active .box-bk {
        -webkit-animation: logo-top2 3.5s;
                animation: logo-top2 3.5s;
    }
    .snap-off.loaded #accueil h2,
    .snap-off.loaded #accueil h5, 
    .snap-off.loaded #accueil a.play_video {
        opacity: 1;
        -webkit-animation: none !important;
                animation: none !important;
        -webkit-transition: opacity 1.0s;
        -o-transition: opacity 1.0s;
        transition: opacity 1.0s;
        -webkit-transition-delay: 2s;
             -o-transition-delay: 2s;
                transition-delay: 2s;
    }
    .contact-wrap {
        display: none;
    }
}
@media screen and (max-height: 400px) {
    .snap-off #accueil {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}


/* 
.seers-cmp-btn,
.seers-cmp-default-style-btn,
.seers-cmp-cookie-policy-default-banner .seers-cmp-cookie-policy-default-banner-content .seers-cmp-cookie-policy-default-banner-body-text .seers-cmp-policy-banner-text-links .seers-cmp-btn.seers-cmp-default-style-btn {
    font-family: 'Silka', sans-serif !important;
    background: #0F0F0F !important;
}
.seers-cmp-cookie-policy-default-banner .seers-cmp-default-banner-close,
span.seers-cmp-cookie-policy-always-active {
    font-family: 'Silka', sans-serif !important;
    color: #0F0F0F !important;
}
.seers-cmp-cookie-policy-accordion-tab-label::before,
.seers-cmp-cookie-policy-accordion-tab-label::after {
    background: #0F0F0F !important;
}
*/