body {
    /* background-color: #dfdfdf; */
    /* background-color: #e7e9e7; */
    /* background-color: #e9ecef; */
    background-color: white;
    margin: 0;
    padding: 0;
    /* color: #807CFD; */
    /* color: #283d63; */
    color: rgb(26, 26, 26);
    scroll-behavior:smooth;
}




body::-webkit-scrollbar {
    display: none;
}
p::selection {
    background-color: #032559;
    color: whitesmoke;
}
span::selection{
    background-color: #032559;
    color: whitesmoke;
}
::-webkit-scrollbar {
    display: none;
}
::-webkit-scrollbar-thumb {
  margin-bottom: 5vh;
  /* box-shadow:inset 0px 0px 2vh 0.3vh #C2F3B0; */
  /* box-shadow: inset 0px 0px 2vh 0.3vh #032559;
  background: linear-gradient(to right, #032559 2%, white 70%); */
  /* box-shadow: inset 8px 0px 1vh 0.2vh #e0e0e0;
  background: linear-gradient(to right, #001b44 20%, white 70%); */
  box-shadow: rgb(225 213 220) 8px 3px 1.5vh 1vh inset;
  background: linear-gradient(to right, rgb(169 70 135) 8%, white 80%);
  border-radius:50vh;
  display:inline-block;
  padding:1.2vh 1.2vh;
  text-decoration:none;
}
::-webkit-scrollbar-thumb:hover {
    box-shadow: rgb(224 224 224) 0px 3px 1vh 0.5vh inset;
    background: linear-gradient(to right, rgb(130, 157, 199) 8%, white 80%); 
    /* box-shadow: inset 0px 0px 2vh 0.3vh #032559;
    background: linear-gradient(to left, #032559 2%, white 70%); */
    
    cursor: pointer;        
}
@font-face {
    font-family: thunderSB;
    src: url("font/Thunder-SemiBoldLC.otf") ;
}
@font-face {
    font-family: thunder;
    src: url("font/Thunder-LC.otf") ;
}
@font-face {
    font-family: workSans;
    src: url("font/WorkSans-Regular.ttf") ;
}
@font-face {
    font-family: workSansSB;
    src: url("font/WorkSans-SemiBold.ttf") ;
}
@font-face {
    font-family: workSansLightIt;
    src: url("font/WorkSans-Black.ttf") ;
}
@font-face {
    font-family: homo;
    src: url("font/Homoneta-Regular.otf") ;
}
@font-face {
    font-family: homoIT;
    src: url("font/Homoneta-Italic.otf") ;
}
@font-face {
    font-family: NotoSansreg;
    src: url("font/NotoSans_Condensed-Regular.ttf") ;
}
@font-face {
    font-family: OutfitReg;
    src: url("font/Outfit-Regular.ttf") ;
}
@font-face {
    font-family: OutfitThin;
    src: url("font/Outfit-Thin.ttf") ;
}
@font-face {
    font-family: PromptThin;
    src: url("font/Prompt-Thin.ttf") ;
}

p {
    font-family: worksans;
    font-size: 14px;
}
h2 {
    font-family: workSans;
    font-size: 16px;
    line-height: 125%;
}



a {
    text-decoration: none;
    color: inherit;
    font-family: worksans;
}
a:hover {
color: blue;
}

#projet-carreau {
    display: block;

}
.projet-carreau-div {
    display: block;

}

.section-main {
    display: block;
    /* animation: animOpac 0.4s; */
	/* -webkit-animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
}

/* ----------------------------------------------
 * Generated by Animista on 2022-5-13 8:24:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }

  
@keyframes animOpac {
    0% {
        opacity: 0.7;
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-landing {
    /* display: none; */
    /* animation: animOpac 0.2s; */
}
.wrap {
    display: flex;
    height: 100vh;
    
}
.right {
    margin-left: 10px;
    width: 23vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu {
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 20px;
    scroll-behavior: smooth;
    /* background-color: #dfdfdf; 
    height: 33.333vh;
    overflow-y: scroll; */
    border-radius: 10px;
    height: auto;
    scrollbar-color: #e9ecef #001b44;
    /* margin-left: -10px; */
    /* border-bottom : 2px solid #807CFD; */
    /* NB */
    /* border-bottom : 2px solid black; */
    /* border: 3px solid #C2F3B0; */
    margin-top: 10px;
    margin-bottom: 5px;
    /* border-top: 2px solid #807CFD; */
    padding-left: 5px;
}
.menu h2 {
    cursor: pointer;
}
.menu span:hover{
    border-radius: 5px;
    /* background-color: #283d63;
    background-color: rgb(233, 178, 214);
    width: auto;
    color: white;
       padding-left: 5px;
    padding-right: 5px;
    padding-top: 5PX;
    padding-bottom: 5PX; 
    text-decoration: underline;*/
    color: blue;
    margin-left: 10px;
}
 

.me h2{
    font-size: 22px;
    font-family: notosansreg;
    font-weight: 100;
    color: blue;
    margin-top: 0px;
}
h1  {
    margin: 0;
    font-family: notosansreg;
    text-transform: uppercase;
    font-size: 22px;
    color: blue;

}


#accueil:hover {
 /*background-color :  #16350f;  */
}
/* 
.menu::-webkit-scrollbar-thumb {
    box-shadow: inset 0px 0px 2vh 0.3vh #032559;
    background: linear-gradient(to right, #032559 2%, white 70%);
    border-radius:50vh;
    display:inline-block;
    padding:1.2vh 1.2vh;
    text-decoration:none;
  }
.menu::-webkit-scrollbar-thumb:hover {
      box-shadow:inset 0px 0px 2vh 0.3vh whitesmoke;
      background:linear-gradient(to right, whitesmoke 2%,#032559 80%);
      cursor: pointer;        
      -webkit-animation: color 2s infinite;
  } */

.span-titre {
    width: fit-content;
   /*   border-radius: 5px;
   background-color: #283d63; 
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5PX;
    padding-bottom: 5PX;*/
    margin-left: 10px;
color: red;    /* text-decoration: underline; */
}
.titres a{
font-size: inherit;
font-family: inherit;
}
.description {
width: 40vw;
}
.description::-webkit-scrollbar {
    display: none;
}

.footer {
    position: absolute;
    left: 50%;
    margin-right: -50%;
    bottom: 0;
    transform: translate(-50%, 0);
}
.footer p{
    font-family: 'worksans';
    font-size: 9px;
    }

.main {
    width: 78vw;
    max-height: 96vh;
    padding: 20px;
    padding-top: 10px;
    overflow-y: scroll;
    display: none;
    scrollbar-color: #001b44 #e9ecef ;
    scrollbar-width: auto;
}
@keyframes mainAnim {
    0% {
        opacity: 0.9;
        transform: scale(0.99);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.main img {
    width: 100%;
    /* margin-top: 10px; */
    height: auto;
    margin-bottom: 10px;
}
.hovscale{
    z-index: 2000;
    transform: scale(1.15) !important;
    animation: scaleHov 1s !important;
}
@keyframes scaleHov {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}
.main video {
    width: 100%;
    /* margin-top: 10px; */
    margin-bottom: 10px;
    height: auto;
}
.main iframe {
    width: 99%;
    height: 95%;
    /* border: 4px solid #e9ecef; */
    margin-bottom: 10px;

}
.main img, iframe, video {
    /* animation: mainAnim 0.4s ease; */
    -webkit-animation: puff-in-center 0.2s ease-in-out both;
    animation: puff-in-center 0.2s ease-in-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-5-13 8:25:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(0.99);
              transform: scale(0.99);
      -webkit-filter: blur(1px);
              filter: blur(1px);
      opacity: 0.9;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(0.99);
              transform: scale(0.99);
      -webkit-filter: blur(1px);
              filter: blur(1px);
      opacity: 0.9;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
#p5{
    /* width: 50%; */
    border: none;
    height: auto;
}
#iframe-deeplove{
    width: 99%;
    height: 65%;
}
#projet-ffioul {
    /* display: block; */
}
.projet-ffioul-div {
    /* display: block !important; */
}

#double-page-flex {
    display: flex;
    max-height: 100%;
    width: 100%;
}
.double-page {
    overflow-y: scroll;
    /* max-height: 96vh; */
    padding-right:0;
    width: 50vw;
}
.double-page.main {
    /* width: 100vw; */
}
.double-page:first-child {
    margin-right: 10px;

}
.double-page::-webkit-scrollbar {
    width: 4vw;
    display: none;
}

.double-page::-webkit-scrollbar-thumb {
    margin-bottom: 5vh;
    /* NB */
    box-shadow: rgb(225 213 220) 8px 3px 1.5vh 1vh inset;
    background: linear-gradient(to right, rgb(169 70 135) 8%, white 80%);
  
    border-radius:50vh;
    display:inline-block;
    padding:1.2vh 1.2vh;
}
.double-page .wrap::-webkit-scrollbar {
    width: 0;
}
.double-page::-webkit-scrollbar-thumb:hover {
   box-shadow: rgb(224 224 224) 0px 3px 1vh 0.5vh inset;
    background: linear-gradient(to right, rgb(130, 157, 199) 8%, white 80%); 

    cursor: pointer;       
}

#projet-landing{
    display: flex;
    /* color: whitesmoke; */
    /* mix-blend-mode: exclusion; */
    font-family: thunderSB;
    text-justify: distribute-all-lines;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
    justify-content: center;
}
#projet-landing-titre {
    margin-left: -15%;
    /* color: #efd3a0; */
    color: white;
    mix-blend-mode: exclusion;
    z-index: 2;
    font-size: 22px;
}

#projet-landing span {
    border: none;
    /* color: #283d63; */
    color: #16350f;
    padding-top: 1PX;
    padding-bottom: 1PX;    
    font-size: 22px;
    /* background-color: black; */
    }
    
#projet-landing span:hover {
    text-decoration: underline;
    }
    #projet-landing span:active {
        color: black;
        }
#projet-landing h2:hover {
    width: fit-content;
    border-radius: 5px;
    /* background-color: #efd3a0; */
    font-weight: bolder;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1PX;
    padding-bottom:1PX;
    cursor: pointer;
    /* margin: 0; */
    /* filter: invert(1); */
}
.btn-landing-hover {
    width: fit-content;
    border-radius: 5px;
    /* background-color: #efd3a0; */
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1PX;
    padding-bottom: 1PX;
    cursor: pointer;
    /* margin: 1px; */
    /* filter: invert(1); */
}
.btn-landing-hover:hover {
background-color: inherit;
}
#contact-content {
    /* display: none; */
    /* color: #ffffff; */
   /*   padding-left: 5px;
    z-index: -10;
    margin: 0;
    line-height: 130%;
    font-size: 16px;
    /* transform: translate(-10%); */
}
.contact-color {
    cursor:pointer;
    /* color:#efd3a0 !important; */
    color: white !important;
    animation: animContact 0.5s ease-in;
}
#btn-accueil {
    display: flex;
    flex-direction: row;
}
@keyframes animContact {
    0% {
        opacity: 0;
        transform: translate(-10%);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
#projet-landing h2 {
    margin-right: 10px;
    width: fit-content;
    border-radius: 5px;
    background-color: none;
    color: inherit;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1PX;
    padding-bottom: 1PX;
    cursor: pointer;
}
#projet-landing h1 {
    margin: 0;
    font-weight: BOLD;
    font-family: workSans;
        margin-bottom: -20px;
}
#projet-landing h3{
    font-size: 30px;
    margin: 10PX;
    margin-left: 0;
    font-family: workSans;
    font-weight: 100;
}
#projet-landing video {
    width: 50%;
    margin-left: -5%;
    mix-blend-mode: exclusion;
    /* filter: sepia(1); */
}
.video-landing-desktop {
}
#projet-landing .video-landing {
    width: 65%;
    margin-left: 5%;
    /* mix-blend-mode: exclusion; */
    /* filter: sepia(1); */
}
.video-landing {
    display: none;
}

#projet-monstre iframe{
width: 400px;
height: 400px;
}
video {
    display: block;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select:none;
    /* position: absolute; */
    /* ::selection: none;  */
}
.double {
    display: flex;
}
.double-double {
    display:flex; flex-direction:column; flex-wrap:wrap; 
    margin-left: 1%;
}
.double-double img {
    width: 96% !important;
    height: auto;
    position: relative;
}

.triple {
    display: flex;
}
.triple img{
    width: 32.6%;
    height: auto;
}
.triple video{
    width: 32.6%;
    height: auto;
}
.triple img:first-child{
margin-right: 1%;
}
.triple img:nth-child(2) {
    margin-right: 1%;
    }
.double img{
    width: 49.5%;
}
.double div{
    width: 49.5%;
    height: auto;
}
.double iframe {
    border: 0px ;
}
.double img:first-child{
    margin-right: 1%;
    }
.double video:first-child{
margin-right: 1%;
}
.triple video:first-child{
    margin-right: 1%;
    }
    .triple video:nth-child(2) {
        margin-right: 1%;
        }
    .double video{
        width: 49.5%;
        height: auto;
    }
#noFull::-webkit-media-controls-fullscreen-button
{
        display: none !important;
}
    .double video:first-child{
    margin-right: 1%;
    }
/* .scene {
    display: flex;
    justify-content: center;
    /* display: flex;
justify-content:space-around;
    position: relative;
    height: 100vh;
  margin-top: 20px;
padding: 10px;
    &--active {
      position: fixed;
    }
    &--ended {
      position: absolute;
      bottom: 0;
      top: auto;
    } */
  /* } */
/* .scroll-video {
    width: 100vw;
}
.scroll-video__video {
position: fixed ;
align-items:center;
justify-content:center;
  width: 30%;
  min-height: 90%;
  z-index:-1;
	}  */
h4 {
    font-size: 14px;
    /* font-weight: 100; */
    font-family: workSans;
    letter-spacing: 1px;
    margin-top: 10px;
}
.outil {
    /* background-color: #032559; */
    border-radius: 10px;
    padding: 4px;
    /* padding-bottom: 0px; */
    border: 1px solid;
    /* color: #DB90EC; */
    color: rgb(233, 178, 214);
    margin-right: 6.666px;
    display: none;
    /* border: 2px solid #032559; */
    /* box-shadow:inset -10px 0px 3vh 0.3vh #032559; */
    /* background:linear-gradient(to top, #032559 1%, whitesmoke 50%); */
}
.outils h4 {
    margin-bottom: 7px;
    margin-top: 7px;
}
#cat {
    /* color: #032559; */
    color: black;
    background-color: white !important;
    box-shadow: none;
    background: none;
    /* border: 1px solid #032559; */
    border: 1px solid black;
}
.outils, .categories {
    
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* padding-right: 15px; */
}
/* MOBILE */
@media screen and (max-width: 1170px)  {
    .wrap ::-webkit-scrollbar {
        /* display: none; */
            }
            .main ::-webkit-scrollbar {
                display: block;
                    }
        
}