/* ============================================================================



---------------- ORGANISATION CSS :



CHAPITRE 1 - IMPORTS
CHAPITRE 2 - CONSTRUCTION
CHAPITRE 3 - ZONE 1
CHAPITRE 4 - ZONE 2
CHAPITRE 5 - ZONE 3
CHAPITRE 6 - ZONE 4
CHAPITRE 7 - RESPONSIVE


=============================================================================== */



/* ============================================================================

--- 1 - IMPORTS - FELIX 

=============================================================================== */



@font-face {
    font-family: 'lineto';
    src: url('../fonts/lineto/lineto-circular-book.eot?') format('eot'),
    ;
    }
    
    @font-face {
    font-family: 'lineto';
    font-weight:bold;
    src: url('../fonts/lineto/lineto-circular-bold.eot?') format('eot'),
         ;
    }
    
    @font-face {
      font-family: 'austin';
      src: url("../fonts/austin/austin-lightitalic.woff");
      font-weight:italic;
    }
    
    
    @font-face {
      font-family: 'web';
      src: url("../fonts/web/web.woff");
      font-weight: bold;
    }
    
    
    @font-face {
      font-family: 'cigra';
      src: url("../fonts/cigra/Cigra Free Demo.woff");
      font-weight:normal;
    }
    
    @font-face {
      font-family: 'glysa';
      src: url("../fonts/Glysa/Glysa-trial.woff");
      font-weight:normal;
    }
    
    @font-face {
      font-family: 'aremia';
      src: url("../fonts/aremia/Aremia-Regular-trial.woff");
      font-weight:normal;
    }
    
    @font-face {
        font-family: 'windsor';
        src: url("../fonts/windsor/WindsorBT-Light.woff");
        font-weight:normal;
      }
      
    
    @font-face {
      font-family: 'GrifinitoL';
      src: url("../fonts/GrifinitoL/GrifinitoL.woff");
      font-weight:normal;
    }
    
    @font-face {
        font-family: 'gaia';
        src: url("../fonts/gaia/Gaia-Display_1.woff");
        font-weight:normal;
      }
    
      @font-face {
        font-family: 'grandslang';
        src: url("../fonts/grandslang/GrandSlang-B-Side.woff2");
        font-weight:normal;
      }
    
    
      @font-face {
      font-family: 'belle';
      src: url("../fonts/Belle/BelledeMai-Regular.woff");
      font-weight:normal;
    }
    
    @font-face {
      font-family: 'belle2';
      src: url("../fonts/Belle/BelledeMaiItalic-Regular.woff");
      font-weight:normal;
    }
    
    @font-face {
      font-family: 'alienor';
      src: url("../fonts/alieonor/AlienorDisplayTrial-Regular.woff");
      font-weight:normal;
    }
    @font-face {
      font-family: 'decay';
      src: url("../fonts/decay/Decay-Trial-Variable.woff");
      font-weight:normal;
    }
    
    
    @font-face {
      font-family: 'ampersan';
      src: url("../fonts/Ampersan/Ampersand-Regular.woff");
      font-weight:normal;
    }
    
    
    @font-face {
      font-family: 'silk';
      src: url("../fonts/silk/AnyConv.com__Silk Serif Medium.woff");
      font-weight:normal;
    }
    
    
    @font-face {
      font-family: 'taiyo';
      src: url("../fonts/taiyo/AnyConv.com__Taiyo-Serif-Medium-Trial.woff");
      font-weight:normal;
    }
    
    @font-face {
        font-family: 'grifinitol';
        src: url("../fonts/GrifinitoL/GrifinitoL.woff");
        font-weight:normal;
      }
    
    
      @font-face {
        font-family: 'canela';
        src: url("../fonts/Canela/Canela-Regular.woff");
        font-weight:normal;
      }
    
    
    
      @font-face {
        font-family: 'saol';
        src: url("../fonts/Saol/SaolDisplay-Light.woff2");
        font-weight:normal;
      }
    
    
      @font-face {
        font-family: 'beirutbold';
        src: url("../fonts/Beirut/beirutdisplay-black-webfont.woff2");
        font-weight:normal;
      }
    
      @font-face {
        font-family: 'beirut';
        src: url("../fonts/Beirut/beiruttext-regular-webfont.woff2");
        font-weight:normal;
      }
    
      @font-face {
        font-family: 'NewYork';
        src: url("../fonts/NewYork/NewYork.woff2");
        font-weight:normal;
      }




     @font-face {
        font-family: 'PPFragment';
        src: url("../fonts/PPFragment/PPFragment-SansLight.woff2");
        font-weight:normal;
      }
    

           @font-face {
        font-family: 'PPFragmentserif';
        src: url("../fonts/PPFragment/PPFragment-SerifLight.woff2");
        font-weight:normal;
      }
    

           @font-face {
        font-family: 'PPFragmentserifitalic';
        src: url("../fonts/PPFragment/PPFragment-SerifLightItalic.woff2");
        font-weight:normal;
      }
    
    

    
      @font-face {
        font-family: 'SuisseWorksBold';
        src: url("../fonts/SuisseWorksBold/Suisse\ Works\ Bold.woff2");
        font-weight:normal;
      }
    
      @font-face {
        font-family: 'PP Neue Montreal';
        src: url("../fonts/PP Neue Montreal/PP Neue Montreal-Book.woff2");
        font-weight:normal;
      }
    
      @font-face {
        font-family: 'PPEiko';
        src: url("../fonts/PPEiko/PPEiko-Regular.woff2");
        font-weight:normal;
      }
    
    
      @font-face {
        font-family: 'Solenoidal';
        src: url("../fonts/Solenoidal/Solenoidal.woff2");
        font-weight:normal;
      }
    
    
      @font-face {
        font-family: 'Domaine';
        src: url("../fonts/Domaine/FreightBig-Book.woff");
        font-weight:normal;
      }
    
    

      @font-face {
        font-family: 'Test';
        src: url("../fonts/test.woff2");
        font-weight:normal;
      }
    


      
      @font-face {
        font-family: 'PPAcma';
        src: url("../fonts/PPAcma/Acma\ Light.woff2");
        font-weight:lighter;
      }
    

            
      @font-face {
        font-family: 'PPAcmasemi';
        src: url("../fonts/PPAcma/Acma\ Semibold.woff2");
      }
     
    
    
    /* ============================================================================
    
    @font-face {
    font-family: 'lineto';
    src: url('../fonts/NeueMachina/NeueMachina-Regular.eot?') format('eot'),
         url('../fonts/NeueMachina/NeueMachina-Regular.woff') format('woff');
    }
    
    @font-face {
    font-family: 'lineto';
    font-weight:bold;
    src: url('../fonts/NeueMachina/NeueMachina-Ultrabold.eot?') format('eot'),
         url('../fonts/NeueMachina/NeueMachina-Ultrabold.woff') format('woff');
    }
    
    
    
    
    --- 2 - CONSTRUCTION - FELIX LE CREATIF
    
    =============================================================================== */
    
    .logotype {
        width:auto;
       margin-top: 10px;
      position: sticky;
      top: 53%;
      left: 50%;
      transform: translate(-50%, -50%);
      
    }
    
    


body {
  color: #d1e6ca;
  background-color: #284766;
  font-family:"PPAcma" !important;
  font-weight: 400;
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.45;
}

.Hero {
  display: flex;
  align-items: center;
  justify-content: center;
   font-family: 'PPAcma';
  min-height: 100vh;
}

.heading-xl {
  font-size: 2.5rem;
  line-height: 1.1;
}

.Hero__image {
    position: fixed;
    opacity: 0;
    width: 20vw;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}


.Hero__text {
  font-family:"PPAcma" !important;
  text-align: center;
}





    
    
    
    .profile_name {
        font-size: 70px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 90%;
    }
    
    #information{
        width:100%;
        
        
        }
    

        .accordion {
            color: #ffffff;
            cursor: pointer;
            padding: 12px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 42px;
            transition: 0.4s;
            border-radius: 0%;
            height: 10vh;
            padding-left: 1%;
            padding-right: 3%;
            letter-spacing: 1px;
        }
        






          
        .accordion:hover {
            background-color: #1b1b1b;
          }
          
          .active{
            background-color: #131313;
          }
          






          section.studies {
            width: 100%;
            padding-top: 2rem;
          }
          
          section.studies .study {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #282828;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-delay: 0.1s;
          }
          
          section.studies .study#final-study {
            border-bottom: 1px solid var(--colors-primary);
          }
          
          section.studies .study > div {
            padding: 1rem;
          }
          
          section.studies .study .study-category {
            flex: 2;
            text-transform: uppercase;
            font-size: 23px;
          }
          
          section.studies .study .study-icon {
            flex: 2;
          }
          
          section.studies .study .study-icon .study-icon-img {
            width: 146px;
            height: 100px;
            background: var(--colors-primary);
            border-radius: 1rem;
          }
          


          .study-icon-imgfull {
    width: 8%;
    padding-bottom: 3%;
    background: var(--colors-primary);
    border-radius: 1rem;
      }






          section.studies .study .study-name {
            flex: 10;
            font-size: 2rem;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-delay: 0.2s;
            padding-left: 1%;
          }

        .study:hover {
              padding-left: 2%;
          }



         .study-name3 {
            flex: 10;
            font-size: 5rem;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-delay: 0.2s;
            padding-left: 1%;
          }




.member {
  position: relative;
  list-style: none;
  border-top: 1px solid #111111;
}
.member:last-of-type {
  border-bottom: 1px solid #111111;
}

.member-link {
  padding: 1%;
    padding-top: 2%;
    padding-bottom: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.member-link:focus {
  outline-offset: -1px;
}

.member-photo {
  position: absolute;
width: 30%;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.member-name {
     font-size: 54px;
    font-weight: 300;
  transition: 0.35s ease-out;
  
}

.member:hover .member-name {
 padding-left: 2%;
}

.member-role {

  transition: 0.35s ease-out;
}

.member:hover .member-role {
 
  transform: translateX(10px);
}

@media (max-width: 1023px) {
  h1 {
    margin: 0 35px 35px;
    font-size: 15px;
  }

  .member-link {
    padding: 35px 35px;
  }

  .member-name {
    font-size: 35px;
  }

  .member-role {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  h1 {
    margin: 0 10px 20px;
    font-size: 14px;
  }

  .member-link {
    padding: 20px 10px;
  }

  .member-name {
    font-size: 25px;
  }

  .member-role {
    font-size: 15px;
  }
}

#projets {
 
        padding-left: 3%;


 }

          .study-name2 {
            flex: 10;
            font-size: 9rem;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-delay: 0.2s;
            padding-left: 1%;
          }
         
          
          section.studies .study .study-year {
            flex: 1;
            font-size: 27px;
          }
          
          @media (max-width: 900px) {
            section.studies .study .study-category {
              font-size: 0.75rem;
            }
          
            section.studies .study .study-year {
              display: none;
            }
          
            section.studies .study .study-icon .study-icon-img {
              width: 40px;
              height: 40px;
              border-radius: 0.5rem;
            }
          
            section.studies .study .study-name {
              font-size: 2rem;
            }
          }
          
          #project-1 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }

          #project-1bis {
            background: url("https://assets.codepen.io/16327/Revised+Flair.png") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-2 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-3 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-4 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-5 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-6 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-7 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          
          #project-8 {
            background: url("https://thisispam.com/.netlify/images?w=640&fm=avif&url=%2Fworks%2Fgoodmoods%2Fsite-goodmoods-shopify-mobilier-7.jpg") no-repeat 50% 50%;
            background-size: cover;
          }
          



          .panel {
            padding: 0 18px;
            padding-right: 57%;
            background-color: rgb(19 19 19);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            border-top: 1px solid #282828;
          }
          
          .accordion:after {
            content: '+'; 
            font-size: 13px;
            color: #777;
            float: right;
            margin-left: 5px;
            font-size: 36px;
          }
          
          .active:after {
            content: "-";
          }

    
          .flair {
            overflow: hidden;
            opacity: 0;
            width: 10%;
          }


          .zoneflex {
      height: 7vh;
    
      display: flex
  ;
      align-items: center;
     justify-content: center; */


        
          }


          .nav-menu {

      
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            border: 1px solid var(--colour--neutral-extra-light);
          
            mix-blend-mode: normal;
            border-radius: 200px;
            justify-content: flex-start;
            align-self: auto;
            align-items: center;
            padding: 0%;
            font-size: 20px;
            display: flex;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-delay: 1s;


        }


        .w-nav-menu {
    position: relative;
    left: 0%;
    right: 3%;
    top: 2%;
    padding-top: 3%;
    z-index: 4500;
    font-weight: normal;
        }




.scroller {
}



section.description {
  background-color: #efeae6;
}

footer {
  height: 75vh;
  width: 100vw;
  background-color: #284766;
  overflow: hidden;
}

section.footer-container {
  height: 75vh;
  color: #f0f0f0;
  background-color: #284766;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-row {
  height: 33.3%;
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.footer-row.center {
  background-color: #262626;
  justify-content: space-around;
}

.logo {
  width: 400px;
  height: 80px;
  background-color: #f0f0f0;
  border-radius: 3px;
}

.items {
  width: 50vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  border-radius: 3px;
}

.circles {
  width: 50vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 50%;
}

.foot {
  height: 20px;
  width: 80vw;
  background-color: #efeae6;
  border-radius: 3px;
}

h1 {
  font-size: 30px;
  color: #27261d;
}

h2 {
  font-size: 20px;
  color: #333;
  font-style: italic;
}

/*! locomotive-scroll v4.0.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

[data-scroll-direction="horizontal"] [data-scroll-container] {
  white-space: nowrap;
  height: 100vh;
  display: inline-block;
  white-space: nowrap;
}

[data-scroll-direction="horizontal"] [data-scroll-section] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 100%;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
  width: 100%;
  height: 10px;
  top: auto;
  bottom: 0;
  transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
  transform: scaleY(1.3);
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
  right: auto;
  bottom: 0;
}


       
        .tickimage {
            float: right;
            position: fixed;
            left: 39%;
            bottom: 5%;
            z-index: 2;
        }
        .nav-button {
            height: var(--spacing--m);
            font-family: var(--font-family--figtree);
            color: var(--colour--neutral);
            font-size: var(--text--s);
            -webkit-text-fill-color: inherit;
            background-color: #3898ec00;
            background-clip: border-box;
            border-radius: 200px;
            justify-content: center;
            align-items: center;
            padding: 4px;
            display: flex;
        }
        
        .w-nav-link {
            vertical-align: top;
            color: #222;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            padding: 20px;
            text-decoration: none;
            display: inline-block;
        
        }







.hover_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hover_card:hover .hover_image {
  opacity: 1;
}





        .w-nav-link:hover {
            vertical-align: top;
            /* color: #222; */
            text-align: center;
            margin-left: auto;
            margin-right: auto;
         
            padding-right: 17px;
            padding-inline-start: 17px;
            margin: 4px;
            text-decoration: none;
        
            background-color: black;
            transition-property: all;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-delay: 30ms;
        }
        
        .nav-button {
            /* padding: 27px; */
            height: 5vh;
            /* font-family: var(--font-family--figtree); */
            color: var(--colour--neutral);
            font-size: var(--text--s);
            -webkit-text-fill-color: inherit;
            background-color: #3898ec00;
            background-clip: border-box;
            border-radius: 200px;
            justify-content: center;
            align-items: center;
            /* padding: 0 1.5rem; */
            display: flex
        ;
        }
 

       

.member .image-stack {
  position: relative;
  width: 100%;
  height: auto;
}

.member .image-stack img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Image de base visible */
.member .image-stack img:nth-child(1) {
  opacity: 1;
  transition-delay: 0s;
}

/* Au hover → apparition progressive */
.member:hover .image-stack img:nth-child(2) {
  opacity: 1;
  transition-delay: 0.6s;
}
.member:hover .image-stack img:nth-child(3) {
  opacity: 1;
  transition-delay: 1.2s;
}





.logo a,
.item a {
  color: #fff;
  text-decoration: none;
  font-family: "Neue Montreal";
  font-size: 14px;
}

#btn {
  /* background: rgb(60, 60, 252); */
  background: #fff;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin-left: 4rem;
}

#btn a {
  color: #000;
}

i {
  font-size: 20px;
}


.menu2 {

}

.pill {
    position: absolute;
    top: 20%;
    left: 65%;
    /* bottom: 86px; */
    /* transform
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
Learn more

Don't show
: translate(0%, -50%); */
    width: 300px;
    height: 300px;
}

.pill img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: z-index 0.5s, opacity 0.5s;
  opacity: 0;
}

.pill img[data-id="1"] {
  z-index: 10;
  opacity: 1;
}

.links {
    padding: 0rem 8rem;
    padding-top: 10rem;
     padding-bottom: 4rem;
    height: 100%;
    overflow: hidden;
}

.menu2 a {
  text-decoration: none;
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 5rem;
    font-weight: 100;
  color: rgb(80, 80, 80);
  transition: all 0.3d ease-in-out;
}

.menu2 a:hover {
  color: #fff;
}




        .w-nav-link {
    vertical-align: top;
    color: #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding-right: 17px;
    padding-inline-start: 17px;
    margin: 5px;
    text-decoration: none;

    font-size: 20px !important;
    letter-spacing: 0px;
   
}


.w-nav-link:hover {
    vertical-align: top;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding-right: 17px;
    padding-inline-start: 17px;
    margin: 5px;
    text-decoration: none;

    font-size: 20px !important;;
    
background-color: #000000;

   
}

.ScrollSmoother-wrapper {

z-index: 0 !important;
}





.w-nav-linkactiv {
    vertical-align: top;
    color: #111111;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding-right: 17px;
    padding-inline-start: 17px;
    margin:0px;
    text-decoration: none;

    font-size: 20px !important;;
    border: solid 1px;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: var(--theme-ui-colors-black-90, #111111);
   
}

.w-nav-linkactiv:hover {
    vertical-align: top;
    color: #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
 
    padding-right: 17px;
    padding-inline-start: 17px;
    margin: 0px;
    text-decoration: none;

    
background-color: #d1e6ca;

   
}





.w-nav-linkwhiteactiv {
    vertical-align: top;
        text-transform: none;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding-right: 17px;
    padding-inline-start: 17px;
    margin: 0px;
    text-decoration: none;

    font-size: 20px !important;;
    border: solid 1px;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: var(--theme-ui-colors-black-90, #ffffff);
   
}

.w-nav-linkwhiteactiv:hover {
    vertical-align: top;
    color: #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
 
    padding-right: 17px;
    padding-inline-start: 17px;
    margin: 0px;
    text-decoration: none;

    
background-color: #d1e6ca;

   
}



.accroche {
    font-family: 'PPAcma';
    background-color: transparent;
    font-size: 86px;
    letter-spacing: 1px;
    color: #ffffff;
    line-height: 1.2;
    padding-left: 1%;
    padding-right: 7%;
}



a {
    font-family: 'PP Neue Montreal', sans-serif;
    background-color: transparent;
    letter-spacing: 1px;
    color: #ffffff;
}


img {

    object-fit: cover;
  }
  
  .container {
    position: relative;
    
   overflow: hidden;
    width: 100vw;
    height: 100vh;

  }
  
 .revealers {
    position: fixed;
    overflow: hidden;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
     flex-direction: column;
     z-index: 3;
     opacity:1;
     transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 1s;
         z-index: 200000000000000000000000000000000000000000000 !important;

  }



  .about-content {
    position: absolute;
   z-index: 500;
    text-align: left;
    /* align-items: center; */
    padding-right: 8%;
    padding-left: 6%;
    bottom: 71%;
  }
  


  
  .revealer {
    flex: 1;
    width: 100%;
    background-color: #d1e6ca;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 200000000000000000000000000000000000000000000 !important;
 
  }
  
  .images {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform;
  }
  
  .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 100%;
    height: 100%;
    visibility: visible;
    will-change: transform;
    opacity: 0;
  }
  
  .img:first-child {
    opacity: 1;
  }
  
  .images.stacked-container {
    position: fixed;
    left: 2em;
    bottom: 2em;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1em;
    transform: none;
    will-change: transform;
  }
  
  .img.stacked {
    position: relative;
    width: 150px;
    height: 100px;
    transform: none;
    top: auto;
    left: auto;
    opacity: 1;
    will-change: transform;
  }


  .menu {
    padding-left: 49%;

    padding-bottom: 51px;


  }

  .menudicover {
    padding-left: 1%;
    padding-bottom: 51px;

}

  
  .menu__item {
    display: inline-block;
        padding-bottom: 3%;
  }
  
  .menu__item-image_wrapper {
    position: fixed;
    bottom: 15%;
    left: 1%;
    /* transform: translate(-50%, -50%); */
    width: 400px;
    height: 400px;
    pointer-events: none;
    opacity: 0;
  }

    
   .tickform {
    width: 115px;
  }
  


  .menu__item-image_inner .menu__item-image {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .menu__item-text {
    position: relative;
    /* font-weight: 100; */
    font-size: 54px;
    line-height: 1.3;
    opacity: 1;
    transition: opacity 350ms ease;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    font-family: 'PP Neue Montreal', sans-serif;
    letter-spacing: 2px;
  }
  
   .menu__item-text:hover {
 padding-left: 2%;
  }
 
 




  .menu__item:hover .menu__item-text {
    color: #363636;
  }
  
  .menu__item:hover .menu__item-image_wrapper {
    z-index: 300000;
    opacity: 1;
  }


  .menu__item-image_wrapper2 {
    position: fixed;
    bottom: 2%;
    right: 1%;
    /* transform: translate(-50%, -50%); */
    width: 550px;
    height: 350px;
    pointer-events: none;
    opacity: 0;
}


  
.menu__item-image_inner2 .menu__item-image2 {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .menu__item:hover .menu__item-text {
    color: #363636;
  }
  
  .menu__item:hover .menu__item-image_wrapper2 {
    z-index: 300000;
    opacity: 1;
  }


  .cursor02 {

  width: 10%;
position: absolute;
    left: 0;
    top: 0;

    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;

}







  .items-container {



}




  #mot {

    transition: transform 1s ease, opacity 1s ease; /* Pour l'animation de la rotation et de l'opacité */
  }
  
  .rotate {
    opacity: 0; /* Rendre l'élément transparent pendant la rotation */
  }

  
  .motscles {
    position: fixed;
    background-color: #ffff;
    box-sizing: border-box;
    margin-right: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    min-width: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    text-align: center;
    line-height: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-size: inherit;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;

}

  .cursor__wrapper {
    z-index: 5;
    pointer-events: none;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
}

.cursor__button {
    position: fixed;
    background-color: #ffff;
    color: var(--color--black);
    width: 7vw;
    border-radius: 45rem;
    justify-content: flex-start;
    align-items: center;
    padding: .6875rem 3rem .6875rem .875rem;
    display: flex;

}


.cursor__arrow {
    width: 1.5rem;
    margin-left: 1rem;
    margin-right: .5rem;
}
  
  .hero-content {
    position: relative;
    width: 100%;
    height: 100%;
    
  }
  
  .site-logo {
    position: absolute;
    top: 2em;
    left: 2em;
    display: flex;
  }
  
  .site-logo {
    display: flex;
    gap: 1em;
  }
  
  .site-logo h1 {
    color: #000000;
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 5vw;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  
  .site-logo h1 sup {
    position: absolute;
    top: -0.125em;
    font-size: 2rem;
  }
  
  .nav {
    position: absolute;
    right: 0;
    width: 50%;
    padding: 2em;
    display: flex;
    justify-content: flex-end;
    gap: 1em;
  }
  
  .nav .nav-item {
    position: relative;
  }
  
  .nav .nav-item p {
    position: relative;
    font-size: 16px;
    font-weight: 500;
  }
  
  .team-img {
    position: absolute;
    right: 2em;
    bottom: 2em;
    width: 40%;
    height: 50%;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  
  .team-img img {
    filter: saturate(0);
  }
  
  .site-info {
    position: absolute;
    bottom: 2em;
    left: 2em;
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .site-info .row {
    display: flex;
    gap: 2em;
  }
  
  .site-info .row .col {
    flex: 1;
  }
  
  .site-info h2 {
    font-size: 25px;
    font-weight: 500;
    line-height: 1.25;
  }
  
  .site-info p {
    text-transform: uppercase;
    font-family: "Apercu Mono Pro";
    font-size: 11px;
    font-weight: 500;
    color: #000000;
  }
  
  .site-info .row:nth-child(2) .col:nth-child(2) {
    display: flex;
  }
  
  .address,
  .socials {
    flex: 1;
  }
  
  .address p,
  .socials p {
    line-height: 1.25;
  }
  
  .word,
  .nav-item,
  .line {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  
  .word h1,
  .nav-item p,
  .site-info h2 .line span,
  .line p {
    position: relative;
    will-change: transform;
  }
  
  .site-info h2 .line span {
    display: block;
    transform: translateY(100%);
  }
  
  .word h1,
  .nav-item p,
  .line p {
    transform: translateY(100%);
  }
  








    
    
    .logotypee {
    top: 15px;
        left: 15px;
        width: 11%;
        position:sticky;
        color: rgb(0, 0, 0);
     
        z-index: 1;
    }
    
    
    @media (max-width: 1023px) and (min-width: 768px)
    .bio {
        margin-left: 1.33rem;
    }
    @media (min-height: 768px)
    .bio {
        margin-top: 4rem;
    }
    .bio {
     line-height: 1.15;
    margin-left: 11rem;
    margin-top: 2rem;
    width: 35%;
    }
    
    @media (max-width: 1023px) and (min-width: 768px)
    .bio-links {
        padding: 0 1.33rem;
    }
    .bio-links {
        vertical-align: top;
        height: auto;
        width: 100%;
        align-content: center;
        margin: auto;
    }
    
    
    
    .bio2 {
       
    width: 30%;
    float: right;
    margin-right: 11rem;
    }
    
    .contact {
        width: 28%;
        float: left;
    }
    
    .social {
        width: 22%;
        float: left;
    }
    
    .select {
        float: right;
        margin-right: .5rem;
        margin-top: -2.8rem;
    }
    
    .bio p {
        width: 68%;
        line-height: 1.5;
        font-size: 1.75rem;
        letter-spacing: -.038rem;
        margin-left: 31%;
        padding-right: 6.33rem;
    }
    
    
    header {
        top: 0;
        z-index: 1;
        position: -webkit-sticky;
        position: sticky;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    
    header.shadow:after {
        width: 100%;
        -webkit-transform: rotate(0) translateZ(-1em);
        transform: rotate(0) translateZ(-1em)
    }
    
    header:after {
        z-index: -1;
    
        content: "";
        bottom: 17px;
        right: 5px;
        left: auto;
        width: 100%;
        top: 0;
        -webkit-transform: rotate(.5deg) translateZ(-1em);
        transform: rotate(.5deg) translateZ(-1em)
    }
    
    @media (min-width: 600px) {
        header:after {
            width:65%
        }
    }
    
    
    
    
    
    .s-container {
        width: 100%;
        padding-left: 6.66667vw;
        padding-left: calc((100vw - var(--scrollbar-width))/15*1);
        padding-right: 6.66667vw;
        padding-right: calc((100vw - var(--scrollbar-width))/15*1);
    }
    .s-center-content, .s-center-long-text {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }
    .s-center-content {
        text-align: center;
    }
    
    
    .s-spacer--2 {
        height: 0.667vw;
        
    }
    .s-spacer {
        display: block;
    }
    
    
    .s-labels--big {
        flex-wrap: wrap;
        max-width: 21.5em;
        margin: -.225em -.115em;
    }
    .s-labels {
        margin: 0 -fluid-value(2.5px,320px,4.5px,1920px);
    }
    .s-labels {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-flow: row;
            flex-wrap: nowrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        margin: 0 -2.5px;
    }
    .s-labels--big, .s-text-type-2 {
        font-size: calc(28px + 38*(100vw - 320px)/1600);
    }
    .s-labels--big, .s-text-type-2 {
        font-size: 28px;
        line-height: 1.2;
        max-width: 21.5em;
    }
    .s-text-type-4 {
        font-size: 4rem;
        line-height: 5.39rem;
        max-width: 100%;
        text-align: left;
        padding-top: 0%;
        padding-left: 8%;
        padding-right: 8%;
        padding-bottom: 2%;
       letter-spacing: -0.111rem;
       text-indent: 50px;
    }
    
    .s-container {
        width: 100%;
        padding-left: 6.66667vw;
        padding-left: calc((100vw - var(--scrollbar-width))/15*1);
        padding-right: 6.66667vw;
        padding-right: calc((100vw - var(--scrollbar-width))/15*1);
    }
    .s-center-content, .s-center-long-text {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }
    .s-center-content {
        text-align: center;
    }
    
    .s-color--black {
        color: #000000;
    }
    
    .manifest {
      
        padding-bottom: 6%;
        padding: 8px;
        margin: 1.5%;
        margin-bottom: 5%;
        margin-top: 10%;
        background-color:#d1e6ca;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0% 0%;
        background-attachment: fixed;
    }
    rgb(140 156 161)
    rgb(88, 136, 108);
    .manif {
        padding-bottom: 6%;
        margin: 2%;
        background-color: #d1e6ca ;
        background-size: cover;
    }
    


    td {
        border:  2px solid #333;
        height:  80px;
        width:  80px;
        text-align:  center;
        vertical-align:  middle;
        font-family:  "Comic Sans MS", cursive, sans-serif;
        font-size:  50px;
        cursor: pointer;
    }
    
    table {
        border-collapse: collapse;
        position: absolute;
        left:50%;
        margin-left: -155px;
        top: 50px;
    }
    
    
    
    .endgame {
      display: none;
      width: 150px;
      top: 100px;
      background-color: rgba(205,133,63, 0.8);
      position: absolute;
      left: 50%;
      margin-left: -100px;
      padding-top: 50px;
      padding-bottom: 50px;
      text-align: center;
      border-radius: 5px;
      color: white;
      font-size: 2em;
    }



    .hover-image-container {
  position: relative;
  width: 100%;
  height: auto;
}

.hover-image-container img {
  top: 0;
  left: 0;
  transition: opacity 0.7s ease;
  width: 100%;
  height: auto;
}

.default-img {

  opacity: 1;
  z-index: 1;
}

.hover-img {
  position:absolute;
  opacity: 0;
  z-index: 2;
}

.hover-image-container:hover .default-img {
 
}

.hover-image-container:hover .hover-img {
  opacity: 1;
}

    
    .s-sticky-title-container {
        position: relative;
    }
    article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block;
    }
    *, ::after, ::before {
        box-sizing: inherit;
        padding: 0;
        margin: 0;
    }
    .s-sticky-title-container__title {
        position: -webkit-sticky;
        z-index: -11;
        position: sticky;
        top: calc(50vh - 12.29167vw);
        top: calc(var(--vh, 1vh)*50 - 12.29167vw);
    }
    
    .s-overflow-title-container {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        overflow: hidden;
    }
    .s-text-type-1 {
        letter-spacing: 2px;
        font-size: 6.4vw;
        line-height: 1;
        margin-top: 0.25em;
        padding-left: 8%;
        padding-right: 8%;
        /* white-space: nowrap; */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family: 'PP Neue Montreal', sans-serif;
        text-align: center;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    
    }
    
    
    
    .s-text-type-1bis {
        display: flex;
        float:left;
        letter-spacing: 2px;
        padding-bottom: 5%;
        font-size: 4.5vw;
        line-height:2vw;
        padding-top: 0%;
        padding-left: 1%;
        padding-right: 8%;
        /* white-space: nowrap; */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family:'PP Neue Montreal', sans-serif;
        text-align: l;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    }




    .s-text-type-55 {
   
   
        letter-spacing: 2px;
        padding-bottom: 5%;
        font-size: 5vw;
        line-height: 0.95;
        padding-top: 0%;
        padding-left: 1%;
        padding-right: 8%;
        /* white-space: nowrap; */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family:'PP Neue Montreal', sans-serif;
        text-align: l;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    }
    
    
    
    .flechebutton {
        margin-left: 1%;
        width: 11%;
        padding: 1%;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    
    }
    
    .flechebutton:hover {
        margin-left: 5%;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    
    }
    
    
    
    
    .s-text-type-5 {
        font-size: 2.2vw;
        line-height: 1;
        margin-top: 0.25em;
        padding-left: 5%;
        padding-right: 5%;
        /* white-space: nowrap; */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-family: 'PP Neue Montreal', sans-serif;
        text-align: center;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    
    }
    
    
    .metier {
        font-size: 5.5vw;
      
        /* font-family: PP Neue Montreal; */
        font-family: "PP Neue Montreal", sans-serif;
        position:-webkit-sticky; 
        position:sticky; 
        top:0;
    
    }


    .metier2 {
        font-size: 1.5vw;
        /* font-family: PP Neue Montreal; */
          font-family: "PPAcma";
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    
    
    
     /*
    .s-text-type-1:hover {
        letter-spacing: 0.6rem;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
        
        }
     */
      
    
    .s-container--small {
        width: 100%;
        padding-left: 13.33333vw;
        padding-left: calc((100vw - var(--scrollbar-width))/15*2);
        padding-right: 13.33333vw;
        padding-right: calc((100vw - var(--scrollbar-width))/15*2);
    }
    
    
    .picture {
        width: 100%;
        z-index: 10;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0%;
        padding-top: 12px;
        display: flex;
        justify-content: left;
        -webkit-animation: zoom 20s;
        animation: zoom 20s;
    }
    
    
    .picture:hover{
    
        border-radius: 0px;
        transition: all cubic-bezier(.4,0,1,1) 300ms;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
    
        
    }
    
    
    
    
    
    
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
            padding-right: 0px;
            padding-left: 0px;
            padding-left: 0%;
            padding-right: 0%;
            margin-bottom: 70px;
    }
    
    .cards_item {
        width: 50%;
        position: relative;
        left: 0%;
        display: block;
        padding-right: 3%;
    }
    .cards_item {
        width: 50%;
    }
    
    
    .cards_item {
        display: flex;
      
    }
    
    
    .cards_itemS {
        width: 50%;
        position: relative;
        left: 0%;
        display: block;
        padding-left:3%;
    }
    .cards_itemS {
        width: 60%;
    }
    
    
    .cards_itemS {
        display: flex;
      
    }
    
    
    .cards_item17 {
        width: 86%;
        position: relative;
        left: 0%;
        display: block;
    }
    .cards_item17 {
        width: 86%;
    }
    .cards_item17 {
        display: flex;
      
    }
    


    .cards_item18 {
        width: 78%;
        position: relative;
        left: 0%;
        display: block;
    }
    .cards_item18 {
        width: 70%;
    }
    .cards_item18 {
        display: flex;
      
    }
    

.cards_item21 {
    width: 100%;
}

    
    .cards_item3 {
        width: 50%;
        position: relative;
        left: 0%;
        display: block;
    }
    .cards_item3 {
        width: 33%;
        padding: 0.5%;
    }
    .cards_item3 {
        display: flex;
      
    }
    
    
    .cards_itemfull {
        width: 100%;
        position: relative;
        left: 0%;
        display: block;
    }
    .cards_itemfull {
        width: 100%;
        padding: 3%;
    }

       .cards_itemfullwork {
        width: 100%;
        padding-right: 10%;
      
    }

    
    .cards_itemfull {
        display: flex;
      
    }


        .cards_itemfull3 {
        width: 100%;
        padding: 1%;
        padding-left: 16%;
    }
    
    .cards-projets {
        margin-left: 0%;
        display: flex;
        padding: 1%;
    
    }

    .cards-projets2 {
        margin-left: 0%;
        display: flex;
        padding: 1%;
    
    }

       .cards-projets3 {
        margin-left: 15%;
        display: flex;
        padding: 1%;
    
    }
    
    
    .cards_item70 {
        width: 33%;
        position: relative;
        left: 0%;
        display: block;
    }
    .cards_item70 {
        width: 33%;
    }
    .cards_item70 {
        display: flex;
      
    }

    .cards_item20 {
        width: 71%;
    
    }

    

    
    
    .card_image {
    
        border-radius: 0px;
        }
    
    .card_image:hover {
    
        border-radius: 212px;
        }
    
    
    .card_text {
    
      padding-right: 0px;
          text-align: center;
    }
    
    
    .tri_text {
        margin: 13px 0px 50px;
        padding-right: 12%;
        text-align: left;
        font-size: 16px;
        line-height: 1.3;
      }
      
    
    
    
    
    
    
    
    
    .s-labels--big, .s-text-type-2 {
        font-size: calc(28px + 38*(100vw - 320px)/1600);
    }
    .s-labels--big, .s-text-type-2 {
          max-width: 100%;
          padding-left: 8%;
          padding-right: 5%;
          padding-bottom: 2%;
          padding-top: 8%;
          font-size: 7vw;
          line-height: 7vw;
          /* font-family: PP Neue Montreal; */
          font-family: "PPAcma";
    
    }

.s-text-type-22 {
      max-width: 100%;
    padding-left: 10%;
    padding-right: 15%;
    padding-bottom: 5%;
    font-size: 7vw;
    text-align: center;
    line-height: 7vw;

    font-family: Degular;
}



.head {
   padding-top: 17%;

}

 

.contactdirect {
background-color: #dad7d0;
  }

 .s-text-type-21 {
    position: absolute;
    /* max-width: 100%; */
    /* padding-left: 1%; */
    /* padding-right: 5%; */
    left: 15%;
    margin-top: 15%;
    text-align: center;
    padding-bottom: 5%;
    padding-top: 8%;
    font-size: 7vw;
    line-height: 7vw;
    /* font-family: PP Neue Montreal; */
    font-family: "PPAcma";
}

 .s-text-type-24 {
    max-width: 100%;
    padding-left: 1%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-top: 0%;
    font-size: 7vw;
    text-align: center;
    line-height: 7vw;
  font-family: "Degular", sans-serif;
 }


.nav-calltoaction {

height: 6%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border: 1px solid;
    border-color: #d1e6ca;
    border-radius: 200px;
    justify-content: center;
    /* padding-left: 19%; */
    /* align-self: auto; */
    /* align-items: center; */
    margin-left: 40%;
    margin-right: 40%;
    /* text-align: center; */
    font-size: 20px;
    display: flex
;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-delay: 1s;

 }



 .s-text-type-26 {
    max-width: 100%;
    padding-left: 1%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-top: 2%;
    font-size: 8vw;
    line-height: 7vw;
    /* font-family: PP Neue Montreal; */
    font-family: "PP Neue Montreal", sans-serif;
 }

    
    .s-labels--big, .s-text-type-40 {
        max-width: 100%;
        text-align: left;
        padding-left: 9.5%;
        padding-right: 90px;
        padding-top: 3%;
        padding-bottom: 0%;
        font-size: 7vw;
        line-height: 7vw;
        font-family: 'PP Neue Montreal', sans-serif;
    
    }
    
    .s-labels--big, .s-text-type-20 {
        max-width: 100%;
        text-align: center;
    
        font-size: 2.8rem;
        line-height: 6.39rem;;
      
        font-family: 'PP Neue Montreal', sans-serif;
    
    }
    
    
    .s-text-markup.s-labels--big a, .s-text-type-2.s-text-markup a {
        position: relative;
        display: inline-block;
    }
    .s-text-markup a:first-child {
        z-index: 5;
    }
    
    .works-single__highlight {
        padding: 0 3.862%;
    }
    .works-single__highlight {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 33.33333%;
    padding: 2%;
    padding-bottom: 7%;
    }
    
    .rte--small {
        font-size: .64rem;
        line-height: 1.5em;
    }
    
    .works-single__highlights {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: 2%;
        margin-right: 2%;
    }
    
    .num {
      font-size: 15px;
    display: grid;
    
    }
    
    :root {
        --bgColor: #d1e6ca ;
        --txtColor: hsl(0, 100%, 5%);
        --btnColor: hsl(0, 100%, 98%);
        --btnFocus: hsl(0, 100%, 95%);
      }
    
    .nav {
        position: fixed;
        z-index: 3;
        top: 10px;
        left: 20px;
        cursor: pointer;
        text-align: right;
    }

    
    .nav {
        font-size: 24px;
        letter-spacing: -0.04rem;
        font-family: 'PP Neue Montreal', sans-serif;
        text-transform: lowercase;
    }







   /* 
    
    #nav{
        position: fixed;
        left: 0;
        right: 0;
        opacity: 1;
        height: 60px;
        z-index: 10000;
        animation-name: magic;
        animation-duration: 0.5s;
        }

        @keyframes magic {
            from {
               
                opacity: 0;
            }
            to {
               
                opacity: 1;
            }
        }
  
      #nav.hidden {
        opacity: 0;
        transition: all 10s;
        -webkit-transition: all 10s;

     }

     
*/
      







    .logo {
        padding: 0.5%;
        /* padding-bottom: 2%; */
        width:100%;
        height: auto;
        left: 11px;
        z-index: 1000;
        position: absolute;
    
    }
    
    
    .logo-green {
        padding-top: 16%;
        position: absolute;
        left: 33%;
        width: 31%;
        z-index: 10000;
        stroke-width: var(--width);
    }
    


    .ProjectX {
  
    }


    .back {
        background-color: #0f0f0f;
        overflow: hidden;
         }
     


         background-color: #d8d8d0;

    
    .Amorse {
    overflow: hidden;
    /* height: 100vh; */
    width: 100%;
    position: absolute;
    
    }
    
    
    .box{
        overflow: hidden;
        position: absolute;
      }
      
      .box {
        position: absolute;
        width: 20vw;
        height: 20vw;
        transform: translate(-50%, -50%);
        pointer-events: none;
        @for $i from 1 through 5 {
          &:nth-child(#{$i}) {
            z-index: #{-$i};
          }
        }
      }
      
      .box img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
    
    
      
    
    .slider {
  position: fixed;
    padding-right: 45%;
     line-height: 1.8;
  top: 55%;
  left: 50%;
  padding-left: 4%;
  transform: translate(-50%,-50%);
  width: 95vw;
  overflow: hidden;
  scrollbar-width: none;

  &::-webkit-scrollbar { -webkit-appearance: none; }

  & .slider-track {
    width: max-content;
    display: flex;
    gap: 0.5rem;
    height: 60vmin;
    will-change: transform;
    
    & .card {
      aspect-ratio: 3/2;
      background-size: cover;
      background-position: center;

      &:nth-of-type(1) { background-image: url('https://picsum.photos/id/846/1000/600'); }
      &:nth-of-type(2) { background-image: url('https://picsum.photos/id/861/1000/600'); }
      &:nth-of-type(3) { background-image: url('https://picsum.photos/id/182/1000/600'); }
      &:nth-of-type(4) { background-image: url('https://picsum.photos/id/892/1000/600'); }
      &:nth-of-type(5) { background-image: url('https://picsum.photos/id/95/1000/600'); }
      &:nth-of-type(6) { background-image: url('https://picsum.photos/id/888/1000/600'); }
      &:nth-of-type(7) { background-image: url('https://picsum.photos/id/1033/1000/600'); }
      &:nth-of-type(8) { background-image: url('https://picsum.photos/id/1054/1000/600'); }
      &:nth-of-type(9) { background-image: url('https://picsum.photos/id/1081/1000/600'); }
    }
  }
}




      main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        min-height: 100vh;
        z-index: 0;
      }
      
      .content {
        height: 280px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .content__img {
        max-width: 350px;

        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      
      @media screen and (min-width: 50em) {
        .content {
          height: 100vh;
          overflow: hidden;
          opacity: 1;
        }
      }
      
      .container {
        width: 100vw;
        min-height: 100vh;
        background: var(--colors-background);
      }










      
    

      .hero-cases {
        width: 100%;
        padding: 5em 1em;
        background: var(--color-bg);
      }
      
      .hero-cases h1 {
        margin-bottom: 0.25em;
      }
      
      .case {
        position: relative;
        width: 100%;
        display: flex;
        transition-delay: 0.3s;
        padding: 0.5em 1em;
        cursor: pointer;
        padding-right: 1%;
      }
      
      .case:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: var(--color-text);
        transition: 0.3s;
        z-index: 0;
      }
      
      .case:hover:before {
        height: 100%;
        
      }
      
      .case p {
        position: relative;
        z-index: 1;
        font-size: 28px;
      }
      
      .case:hover p {
        color : #3d3d3d;
      }
      
      .case-name {
        flex: 4;
        padding-left: 1%;
      }
      
      .case-tags {
        flex: 2.21;
      }
      
      .case-date {
        flex: 2;
        text-align: right;
      }



    
      
   
      .trail {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    
        z-index: 1;
      }
      
      .content {
        height: 100vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #efeae6;
}
      
      
      .content__img {

        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      
      
    
      
      header {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      
      header #name {
        font-family: "PP NeueBit";
        font-size: 1.575rem;
      }
    
    
    
    
    
    
    
    
    .card-header {
        animation: logovert 3s
        ease-in-out;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
      }
      
      @keyframes logovert {
        0%{ stroke-width: 6;
            width: 100%;
           }
           65%{ stroke-width: 6;
            width: 100%;
        }
        100%{ stroke-width: 0;
            width: 100%;
        }
    
      }
    
    
    
      
    .main-container {
        padding-top: 30%;
        position: absolute;
        left: 33%;
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .circle {
        width: 100%;
        height: 100%;
       border:9px solid;
       border-radius: 50%;
       position: absolute;
    }
    
    
    .one {
    border-color: #d1e6ca ;
    animation: animate01 10s
    ease-in-out infinite;
    } 
    
    @keyframes animate01 {
        0%{ transform: rotateY(0deg);
            width: 100%;
           }
           50%{ transform: rotateY(180deg);
            width: 100%;
        }
        100%{ transform: rotateY(360deg);
            width: 100%;
        }
    
    }
    
    
    
    .two {
        border-color: #d1e6ca ;
        animation: animate02 8s
        ease-in-out infinite;
        } 
        
        @keyframes animate02 {
            0%{ transform: rotateY(0deg);
                width: 100%;
               }
               50%{ rotate: 90deg;
                transform: rotateY(180deg);
                width: 100%;
            }
            100%{ transform: rotateY(360deg);
                width: 100%;
            }
        
        }
        
    
        
    
        .three {
            border-color: #d1e6ca ;
            animation: animate03 12s
            ease-in-out infinite;
            } 
            
            @keyframes animate03 {
                0%{ 
                    transform: rotateY(0deg);
                    width: 100%;
                   }
                   50%{ rotate: -90deg;
                    transform: rotateY(180deg);
                    width: 100%;
                }
                100%{ transform: rotateY(360deg);
                    width: 100%;
                }
            
            }
            
            
            .logo_anim {
                color: #d1e6ca ;
                position: absolute;
                justify-content: center;
                align-items: center;
                height: 100vh;
                left:33%;
                top: 18%;
                } 
    
    
    
            .square {
                width: 400px;
                height: 400px;
                position: absolute;
                border-radius: 50%;
              border:8px solid;
                transform: rotateY(45deg);
                rotate:45deg;
                animation: rotateAnimation 2s linear infinite;
            }
            
            @keyframes rotateAnimation {
                from {transform: rotateY(45deg);}
                to {transform: rotateY(225deg);}
            }
            
            .square2 {
                width: 400px;
                height: 400px;
            position: absolute;
                border-radius: 50%;
              border:8px solid;
                transform: rotateY(45deg);
                animation: rotateAnimation 4s linear infinite;
            }
            
            @keyframes rotateAnimation {
                from {transform: rotateY(45deg);}
                to {transform: rotateY(225deg);}
            }
            
            
            .square3 {
                width: 400px;
                height: 400px;
                position: absolute;
                border-radius: 50%;
              border:8px solid;
                transform: rotateY(45deg);
                animation: rotateAnimation 6s linear infinite;
            }
            
            @keyframes rotateAnimation {
                from {transform: rotateY(45deg);}
                to {transform: rotateY(225deg);}
            }
    
    
    
            .logo_animpetit {
                color: #ffffff;
                position: fixed;
                justify-content: center;
                align-items: center;
                height: 100vh;
                left: 1%;
                top: 2%;
                z-index: 1000;
                } 
    
    
    
            .squarepetit {
                width: 45px;
                height: 45px;
                position: fixed;
                border-radius: 50%;
              border:2px solid;
                transform: rotateY(45deg);
                rotate:45deg;
                animation: rotateAnimation 2s linear infinite;
                z-index: 10000;
            }
            
            @keyframes rotateAnimation {
                from {transform: rotateY(45deg);}
                to {transform: rotateY(225deg);}
            }
            
            .square2petit {
                width: 45px;
                height: 45px;
            position: absolute;
                border-radius: 50%;
              border:2px solid;
                transform: rotateY(45deg);
                animation: rotateAnimation 4s linear infinite;
            }
            
            @keyframes rotateAnimation {
                from {transform: rotateY(45deg);}
                to {transform: rotateY(225deg);}
            }
            
            
            .square3petit {
                width: 45px;
                height: 45px;
                position: absolute;
                border-radius: 50%;
              border:2px solid;
                transform: rotateY(45deg);
                animation: rotateAnimation 6s linear infinite;
            }
            
            @keyframes rotateAnimation {
                from {transform: rotateY(45deg);}
                to {transform: rotateY(225deg);}
            }
    
    
    
    
    
    
    
    
    .icon-concept {
    
        width: 7%;
    }
    
    .icon-Identity {
    
        width: 37%;
    }
    
    
    .NewLogo {
    
    position: fixed;
    width: 400%;
    bottom: -2%;
    padding-left: 0%;
    z-index: 10000000;
       
        
    }
    
    #expand {
     
        max-width: 25%;
        min-width:5%;
        will-change: width;
      }
    
    
    .NewLogo-Big {
    
        position: relative;
        z-index: 10000;
        width: 91%;
        /* top: 25%; */
        padding-top: 9px;
        /* padding: 3%; */
        left: 4%;
    }
    
    
    
    .video-container,
.img-container {
  position: absolute;
  width: 700px;
  height: 500px;
  transform: translateY(-50%);
  pointer-events: none;
}

.cursor {
  position: absolute;
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  z-index: -1;
}
    

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
 
  }
    
    span {
        
        margin: 1.25em 0;
       text-align: left;
    }
    
    .s-text-markup.s-labels--big a::after, .s-text-type-2.s-text-markup a::after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: currentColor;
       
    }
    
    
    .s-spacer--1 {
        height: calc(100px + 150*(100vw - 320px)/1600);
    }
    .s-spacer--1 {
        height: 100px;
    }
    
    
    .motscles {
        padding-left: 32px;
        padding-right: 32px;
        min-height: 56px;
    }
    .motscles {
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .motscles {
        padding-left: 24px;
        padding-right: 24px;
    }
    .motscles {
        z-index: -1;
        box-sizing: border-box;
        margin-right: 0px;
        margin-bottom: 6px;
        margin-left: 0px;
    min-width: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    text-align: center;
    line-height: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-size: inherit;
    padding-left: 64px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: primary;
    border: 0;
    border-radius: 4px;
    will-change: transform;
    font-weight: 400;
    padding-right: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 15px;
    -webkit-transition: all 300ms cubic-bezier(0.23,1,0.32,1);
    transition: all 300ms cubic-bezier(0.23,1,0.32,1);
    cursor: pointer;
    outline: none;
    background-color: #ffffff;
    color: var(--theme-ui-colors-black-100,#060606);
    border: solid 2px;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: #ffffff;
    min-height: 60px;
    border-radius: 999px;
    padding-right: 24px;
    min-height: 39px;
    font-size: 23px;
    font-family: 'PP Neue Montreal', sans-serif;
    }
    
    
    .container {
        width: 100%;
        margin: 0 auto;
        z-index: 1000;
      }
      
      a{
      text-decoration:none;
      color:#fff;
      }
    
      .main {
        position: relative;
      }
      
      .shuffle-me {
        width: 100%;
        
        
        display: block;
        position: relative;
        float: left;
        width: 26%;
        height: 209px;
      }
    
      .info {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.35);
        padding: 20px;
        text-align: center;
        display: block;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
    
    
      .shuffle-group {
        position: relative;
        width: 100%;
      
      }
    
      .shuffle-group .shuffle-me {
        width: 100%;
        float: left;
      
      }
    
      .shuffle-group .shuffle-me:first-child {
        width: 100%;
        float: left;
      
      }
      .shuffle-group .shuffle-me:first-child h1 {
    font-size: 30px;
      }
    
    
    
    
.controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 100px;
	background: #dceda7;
	border: 4px solid transparent;
	padding-left: 0rem;
	position: relative;
	color: hsl(0 0% 4%);
}

.controls::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 100px;
	pointer-events: none;

}

button {
	width: 40px;
	aspect-ratio: 1;
	padding: 0;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.25s;
}

button:hover {
	background: hsl(0, 0%, 82%);
}

button svg {
	width: 32px;
	fill: currentColor;
    margin-left: 5px;
}

.tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	cursor: pointer;
}

.tabs__indicator {
	position: absolute;
	width: 50%;
	height: 100%;
    background: #1d1d1d;
	border-radius: 100px;
	overflow: hidden;
	transition: translate 0.25s;
	pointer-events: none;
}
.tabs__track {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 200%;
	color: white;
	transition: translate 0.25s;
}

.divider {
	width: 2px;
	height: 24px;
    background: rgb(29 29 29);
	margin-right: 0.5rem;
}

button:focus-visible {
	outline-color: hsl(239 100% 75%);
}
input:focus-visible ~ .tabs__indicator {
	outline: 2px solid hsl(239 100% 95%);
	outline-offset: 2px;
}

label {
    font-size: 1.35rem;
    font-weight: 500;
    text-align: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    /* transition: background 0.25s; */
    border-radius: 100px;
}

label:hover {
    font-size: 1.35rem;
    font-weight: 500;
    text-align: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    /* transition: background 0.25s; */
    border-radius: 100px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}


.bear-link {
	color: currentColor;
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 48px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
	opacity: 1;
}
.bear-link svg {
	width: 75%;
}



input:nth-of-type(2):checked ~ .tabs__indicator {
	translate: 100% 0;
}
input:nth-of-type(2):checked ~ .tabs__indicator .tabs__track {
	translate: -50% 0;
}
    
    
    
    .motscles:hover {
    background-color: #d1e6ca ;
    color: var(--theme-ui-colors-black-100,#000000);
        border: solid 2px;
    
    border-color: var(--theme-ui-colors-black-90,#d1e6ca );
        transition-delay: 1;
    
    }
    
    
    
    .arrivage {
        width: 100%;
    z-index: 10;
        display: flex;
        object-fit: cover;
    }
    
    .s-sticky-title-container {
        position: relative;
    }
    
    .inner-div {
       
        text-align: center;
        text-align: center;
        position: fixed;
        width: 84px;
        padding: 15px;
        right: 328px;
        bottom: 40px;
  
    }
    
    
    .global {
        padding-top: 128px;
    }
    .global {
        box-sizing: border-box;
        margin: 0;
        min-width: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        background-size: cover;
        background-position: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 4%;
    
    
    }
    #f8dfe0 #f7b0b6
    
    
    
      
      
      
      #hex {
        text-transform: uppercase;
      }
      
      button {
        font-family: var(--fonts);
        font-size: 0.75em;
        margin: 0.5em;
        padding: 0.5em 1em;
        min-height: 46px;
        background: var(--btnColor);
        color: var(--txtColor);
        border: 0;
      }
      
      button:active {
        background: var(--btnFocus);
      }
      
      button:focus {
        outline: none;
      }
      
      span.sm {
        user-select: none;
        font-size: 0.5em;
      }
    
    
    
    .css-12n6bt7:hover {
       
        background-color: var(--theme-ui-colors-white-100,#d1e6ca );
       color: var(--theme-ui-colors-black-100,#000000);
        border: solid 2px;
    
    border-color: var(--theme-ui-colors-black-90,#d1e6ca );
        transition-delay: 1;
    }
    
    .legende:hover {
       
        background-color: var(--theme-ui-colors-white-100,#d1e6ca );
       color: var(--theme-ui-colors-black-100,#000000);
        border: solid 2px;
    
    border-color: var(--theme-ui-colors-black-90,#d1e6ca );transition-delay: 1;
    }



    .GradientBlur {
        -webkit-backdrop-filter: blur(26px);
        backdrop-filter: blur(26px);
        height: 15%;
        left: 0;
        -webkit-mask: linear-gradient(#000000, rgba(0, 0, 0, .6) 75%, transparent);
        mask: linear-gradient(#000000, rgba(0, 0, 0, .6) 75%, transparent);
        pointer-events: none !important;
        transform: rotate(180deg);
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 2;
        opacity: 0.8;
    }
    
    
    
    .card-image {
        display: block;
        min-height: 23rem; /* layout hack */
        background: #fff center center no-repeat;
        background-size: cover;
    
    }
    
    .card-image > img {
        display: block;
        width: 100%;
        opacity: 0; /* visually hide the img element */
    }
    
    .card-image.is-loaded {
        filter: none; /* remove the blur on fullres image */
        transition: filter 1s;
    }
    
    
    .card-list {
        display: block;
        margin: 1rem auto;
        padding: 0;
        font-size: 0;
        text-align: center;
        list-style: none;
    }
    
    .card {
        display: inline-block;
        width: 100%;
        font-size: 1rem;
        text-decoration: none;
        overflow: hidden;
            padding-bottom: 10%;
    }
    
    .cardfull {
        display: inline-block;
        width: 100%;
        margin: 0.5%;
        margin-top: 1%;
        font-size: 1rem;
        text-decoration: none;
        overflow: hidden;
    }
    
    
    .cardfullproject {
        display: inline-block;
        width: 100%;
    
        margin: 0%;
    
        font-size: 1rem;
        text-decoration: none;
        overflow: hidden;
    }
    
    
    .card-description {
        display: block;
        padding: 2em 0.5em;
        color: #515151;
        text-decoration: none;
    }
    
    .card-description > h2 {
        margin: 0 0 0.5em;
    }
    
    .card-description > p {
        margin: 0;
    }
    
    .s-text-type-3 {
        font-size: 25px;
        line-height: 1.4;
     margin-left: 15%;
     margin-right: 15%;
     text-align: center;
    }
    
    body, html {
        font-size: calc(7px + 10*(100vw - 309px)/1590);
        
    }
    
    body { background: #221; }
    #slidy-container { 
      width: 100%; overflow: hidden; margin: 0 auto;
     
      
    }
    
    body { background: #221; }
    #slidy-container2 { 
      width: 100%; overflow: hidden; margin: 0 auto;
    }
    
    
    
    
    .arrow {
      height: 50px;
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f9f9f9;
      border-radius: 50%;
      cursor: pointer;
      transition: transform ease-in .1s;
    }
    
    .nextArrow {
      position: absolute;
      top: 50%;
      right: 25px;
      z-index: 999;
      color: #fff;
    }
    
    .backArrow {
      position: absolute;
      top: 50%;
      left: 25px;
      z-index: 999;
      color: #fff;
    }
    
    .fa-arrow-right:before, .fa-arrow-left:before {
      color: #222
    }
    
    #vids {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    #vids a:first-of-type {
      margin-bottom: 5px;
    }
    
    
    
    .header__current span {
        display: inline-block;
        margin: 0 10px 0 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #000000;
    }
    
    
    
    

/* remove the blur on fullres image 
    body{
        opacity: 0;
        transform: translateY(-200px);
        
    }
    body.is-ready{
        opacity: 1;
        transform: translateY(0);
        transition-duration: 1s;

    }
    
    */

    
    
    
    
    
    
    
    
    
    .cUNwwp {
        width: 50vw;
        height: 50vw;
        padding: 0px 18px;
        will-change: opacity;
    }
    
    
    .css-12n6bt7 {
        padding: 16px 24px;
    }
    .css-12n6bt7 {
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        appearance: none;
        text-align: center;
        line-height: inherit;
        text-decoration: none;
        will-change: transform;
        font-weight: 600;
        padding: 16px 32px;
        transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
        cursor: pointer;
        outline: currentcolor none medium;
        background-color: var(--theme-ui-colors-white-100,#FFFFFF);
        color: var(--theme-ui-colors-black-100,#000000);
        border-style: solid;
        border-width: 2px;
        border-image: none 100% / 1 / 0 stretch;
        border-color: var(--theme-ui-colors-white-100,#FFFFFF);
        font-size: 18px;
        display: inline-flex;
        -moz-box-align: center;
        align-items: center;
        border-radius: 999px;
        min-height: 54px;
        max-height: 54px;
        position: fixed;
    right: 25px;
    top: 25px;
        z-index: 1000;
    }
    
    .legende {
    z-index: 21;
    
    padding: 16px 32px;
    cursor: pointer;
    outline: currentcolor none medium;
    background-color: var(--theme-ui-colors-white-100,#FFF0);
    color: var(--theme-ui-colors-black-100,#fff);
    border-style: solid;
    border-width: 2px;
    border-image: none 100% / 1 / 0 stretch;
    border-color: var(--theme-ui-colors-white-100,#FFF);
    font-size: 18px;
    display: inline-flex;
    -moz-box-align: center;
    align-items: center;
    border-radius: 999px;
    min-height: 54px;
    max-height: 54px;
    
    }
    
    .picture2 {
    color: #000000;
    
    position: absolute;
        padding-top: 35px;
    padding-left: 35px;
    }
    
    
    
    
    
    .bluezone {
        background-color: #e9e9e1;
        color: #000000;
        margin: 0px;
    padding: 96px;
        padding-left:5%;
    }
    
    .sliderim {
        
    
        display: table-cell;
    margin: 15px;
        margin: 0px;
        /* padding: 96px; */
        padding-left: 15%;
        padding-right: 25%;
        padding-top: 75px;
    }
    
    
    
    .description {
    
    color: #000000;
    margin: 0px;
    padding: 3%;
    padding-top: 0px;
    }
    
    
    
    .nofollow {
    
    padding-right: 150px;
    }
    
    
    
    #box {
        overflow-y: visible;
        overflow-x: auto;
        white-space: nowrap;
        vertical-align: text-top;
        margin: 0;
        padding: 0;
        clear: both;
        border-spacing: 5px;
    }
    .item {
        display: table-cell;
        min-width: 240px;
        width: 240px;
        font-size: 140px;
        border: 2px solid #d1d1d1;
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        white-space: normal;
        line-height: 1.6;
        vertical-align: top;
        text-align: center;
    }
    
    
    
    .div-block {
        margin-top: 0px;
        margin-left: 0px;
        padding: 100px 40px;
        float: none;
    }
    
    
    #intro {
        height: 100vh;
        -webkit-transition: height 1.6s cubic-bezier(.72,0,.01,1);
        -moz-transition: height 1.6s cubic-bezier(.72,0,.01,1);
        -ms-transition: height 1.6s cubic-bezier(.72,0,.01,1);
        -o-transition: height 1.6s cubic-bezier(.72,0,.01,1);
        transition: height 1.6s cubic-bezier(.72,0,.01,1);
        overflow: hidden;
        display: box;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-box-pack: center;
        -o-box-pack: center;
        box-pack: center;
        -webkit-flex-pack: center;
        -moz-flex-pack: center;
        -ms-flex-pack: center;
        -o-flex-pack: center;
        flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-box-align: center;
        -o-box-align: center;
        box-align: center;
        -webkit-flex-align: center;
        -moz-flex-align: center;
        -ms-flex-align: center;
        -o-flex-align: center;
        flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        cursor: pointer;
        z-index: -1;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
    }
    #intro, #wrapper {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    
    }
    
    
    .block--nomarginbottom {
        margin-bottom: 0 !important;
    }
    .block {
        margin: 50px 0;
        display: flex;
        flex-direction: row;
    }
    
    .block>div {
        width: 33%;
    }
    .block__social {
        overflow: hidden;
    }
    
    .clock {
        border-radius: 100%;
        background: #fff ;
        background-size: 88%;
        height: 20em;
        padding-bottom: 0;
        position: absolute;
        width: 15em;
        height: 15em;
        left: 38%;
        top: 28%;
    }
    
  
        
        a{
        text-decoration:none;
        color:#fff;
        }
    
        .main {
          position: relative;
        }
        
        .shuffle-me {
          width: 25%;
          height: 100%;
          display: block;
          position: relative;
          float: left;
        
    
        }
    
        .info {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.35);
          padding: 20px;
          text-align: center;
          display: block;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
        }
    
    
    
    #winston1 {
    position:fixed;
    width: 37%;
          animation-name: spin;
      animation-duration: 15000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear; 
    
    }
    
    @keyframes spin {
        from {
            transform:rotate(0deg);
        }
        to {
            transform:rotate(360deg);
        }
    }
    
    #winston2 {
    position: fixed;
        width: 28%;
        left: 25%;
        Top: 24%;
    
    }
    
    
    
    
    #winston3 {
     position: fixed;
        width: 28%;
        left: 25%;
        Top: 20%;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    
    }
    
    #winston4 {
       position: fixed;
        width: 47%;
        left: 13%;
        bottom: 10%;
        -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
    
    }
    
    #winston5 {
        position: fixed;
        top: 7%;
        width: 42%;
        right: 0.2%;
              animation: shake 0.5s;
    
      /* When the animation is finished, start again */
      animation-iteration-count: infinite;
    
    }
    
    #winston6 {
                  position: fixed;
        right: -2%;
        width: 23%;
        bottom: 32%;
    
    }
    
    
    
    
    #winston:hover {
          animation: shake 0.5s;
        cursor:move;
        
    
      /* When the animation is finished, start again */
      animation-iteration-count: infinite;
    
    
    }
    
    @keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-3px, 0px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    
    #winston2:hover {
        cursor:move;
    
    
    }
    
    #winston3:hover {
        cursor:move;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    
        }
    
    
    
    #winston4:hover {
        cursor:move;
        -webkit-transform: rotate(-7deg);
      transform: rotate(-7deg);
    
    }
    
    
    
    
    
    
    
    #winston5:hover {
        cursor:move;
              animation: shake 0.0s;
    
      /* When the animation is finished, start again */
      animation-iteration-count: infinite;
    
    
    }
    
    #winston6:hover {
        cursor:move;
              animation: shake 0.5s;
    
      /* When the animation is finished, start again */
      animation-iteration-count: infinite;
    
    
    }
    
    
    
    
    
    
    
    #loading {
            -webkit-animation: rotation 7s infinite linear;
    }
    
    @-webkit-keyframes rotation {
            from {
                    -webkit-transform: rotate(0deg);
            }
            to {
                    -webkit-transform: rotate(359deg);
            }
    }
    
    .clock.simple:after {
      background: #000000;
      border-radius: 50%;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 5%;
      height: 5%;
      z-index: 10;
    }
    
    .minutes-container, .hours-container, .seconds-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .hours {
      background: #000000;
      height: 20%;
      left: 48.75%;
      position: absolute;
      top: 30%;
      transform-origin: 50% 100%;
      width: 2.5%;
    }
    
    .minutes {
      background: #000000;
      height: 40%;
      left: 49%;
      position: absolute;
      top: 10%;
      transform-origin: 50% 100%;
      width: 2%;
    }
    
    .seconds {
      background: #000000;
      height: 45%;
      left: 49.5%;
      position: absolute;
      top: 14%;
      transform-origin: 50% 80%;
      width: 1%;
      z-index: 8;
    }
    
    
    @keyframes rotate {
      100% {
        transform: rotateZ(360deg);
      }
    }
    
    .hours-container {
      animation: rotate 43200s infinite linear;
    }
    .minutes-container {
      animation: rotate 3600s infinite linear;
    }
    .seconds-container {
      animation: rotate 60s infinite linear;
    }
    
    .minutes-container {
      animation: rotate 3600s infinite steps(60);
    }
    .seconds-container {
      animation: rotate 60s infinite steps(60);
    }
    
    .minutes-container {
      transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
    }
    .seconds-container {
      transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
    }
    
        
        
    #information-inner{
        width:100%;
        max-width:1720px;
        display:flex;
        justify-content:space-between;
    }
            
    #information-alpha{
        width:66%;
        margin:-4px 0 0 0;
    }
                
                
    #information-content{
        width:100%;
        max-width:820px;
                    
    }
    
    canvas {
        position: absolute;
       width:100%;
        height:100%;
        z-index: -1;
    }
                
                
    #information-content p{
        font-size:18px;
        color:#FFF;
        font-weight:400;
        margin:0 0 30px 0;
        letter-spacing: 0.7px;
    }
                    
    #information-beta{
        flex:0 0 auto;
        width:40%;
        margin-left:35px;
    }
                    
    #information-beta img{
        width:100%;
        margin-bottom:60px;
    }
    
    a.viewpic {
      position:relative; 
      text-decoration: none; 
    }
    a:hover.viewpic {
      text-decoration: none; 
      background: none;
      
    }
    
    
    
    
    a.viewpic span {display: none;}
    
    a:hover.viewpic span {
      display: inline; 
      position: absolute;  
      top: 50%; 
      left: 25%; 
      z-index: 20; 
      height: 100%;
      padding:2px 4px;
    }
                        
    
    
    body, input, textarea, select {
    font-size: 0px;
        line-height: 0;
        letter-spacing: 0px;
        color: #111111;
        -webkit-font-smoothing: antialiased !important;
        background-color:#60786c;
        /*background-color: #ff6161;#d4ccd7    #5c69ff*/ 
         /* background: linear-gradient(89deg, hsla(141, 54%, 86%, 1) 0%, hsla(333, 73%, 85%, 1) 50%, hsla(211, 58%, 79%, 1) 100%); */
        /* background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); 
        /* background: linear-gradient(90deg, hsla(180, 13%, 58%, 1) 0%, hsla(335, 16%, 61%, 1) 100%); */
        /* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */
        /* background: linear-gradient(180deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%); */
        /* background: linear-gradient(176deg, rgba(251,217,210,1) 0%, rgba(252,51,35,1) 100%); */
        font-family: 'PP Neue Montreal', sans-serif;
        font-weight: 200;
        -webkit-transition: background-color .5s linear;
  -moz-transition: background-color .5s linear;
  -o-transition: background-color .5s linear;
  -ms-transition: background-color .5s linear;
  transition: background-color .5s linear;
    
    }

    
    /* ============================================================================
     background-image: url(http://www.felixedgar.fr/fundofe.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 0% 0%;
     background-attachment: fixed;}
     =============================================================================== */ 
    
    margin: 0 auto;
    }
    .wrapper {
        position: relative;
        width: 1220px;
        margin: 0 auto;
    }
    
    .logotype2 {
    right: 6%;
        bottom: -22px;
    color:#FFF;
    text-align:right;
    
    }
    .logotype3 {
    font-size: 20px;
    left: 1%;
    bottom: 2%;
    color:#FFF;
    position: absolute;
    
    }
    
    
    @media screen and (max-width: 600px)
    #myVideo {
      
        width: 100%;
        -ms-interpolation-mode: bicubic;
        vertical-align: bottom;
        display: zona;
        padding: 15px;
    }
    
    
    @keyframes spin {
      from{
        transform: rotateY(0deg);
        moz-transform: rotateY(0deg); //Firefox
        ms-transform: rotateY(0deg); //Microsoft Browsers
      }
      to{
        transform: rotateY(360deg);
        moz-transform: rotateY(360deg); //Firefox
        ms-transform: rotateY(360deg); //Microsoft Browsers
      }
    }
    @-webkit-keyframes spin{
      from{-webkit-transform: rotateY(0deg);}
      to{-webkit-transform: rotateY(360deg);}
    }
    .imageSpin{
      animation-name: spin;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      -webkit-animation-name: spin;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration: 5s;
        width: 50%;
    padding-top: 46px;
        margin-bottom: 10rem;
    }
    
    
    
    .hero-nav{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        z-index: -1;

        .hero-nav__inner{
          
            height: 0%;
        }
 
        &:before{
            content: "";
            background: rgba(#000000, 0.25);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 0px;
            transition: background 400ms;
            
        }
        &.fixme{
            &:before{
                background: rgba(#000000, 0.65);
                height: 0px;
                opacity: 0;
            }
        }
    }
    .page-content{
        margin: 0 auto;
        line-height: 0;
        position: relative;
        overflow: hidden;
        
    }


    .page-contenthome{
      margin: 0 auto;
      line-height: 0;
      position: relative;
      overflow: hidden;
      background-color: #0f0f0f;
      
  }


section{

}


#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;  /* Empêche le débordement horizontal */
  z-index: -1;       /* Place la vidéo derrière le contenu */
}

#bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  /* Centrer horizontalement */
  width: 100%;                  /* Toujours prendre 100% de la largeur */
  height: 100vh;                /* Toujours prendre 100% de la hauteur */
  object-fit: cover;            /* Assurer que la vidéo couvre toute la zone sans déformation */
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}


    #myVideo {
        width: 100%;
        vertical-align: bottom;
        object-fit: cover;
  height: 100vh;
      max-width: 100%;
      z-index: 0;
      
    }



    .videohome {
        width: 100%;
        vertical-align: bottom;
        object-fit: cover;
  height: 100vh;
      max-width: 100%;
      z-index: 0;
      
    }


    #myVideo2 {
        width: 100vw;
        vertical-align: bottom;
        object-fit: cover;
     
        max-width: 100%;
        z-index: 0;
    }
    





    #myVideoprojets {
        width: 100%;
        vertical-align: bottom;
        object-fit: cover;
        padding: 1%;
      z-index: 0;
      
    }




    /* Frame */
    .frame {
        height: 500px;
        line-height: 250px;
        overflow: hidden;
        margin-top: 5rem;
    margin-bottom: 7rem;
        margin-left: 15rem;
    }
    
    
    .frame ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 7000px;
        font-size: 50px;
    }
    .frame ul li {
        float: left;
        width: 728px;
        height: 100%;
        margin: 0 49px 0 0;
        padding: 0;
        color: #ddd;
        text-align: center;
        cursor:move;
    }
    
    
    /* Scrollbar */
    .scrollbar {
        margin: 0 0 1em 0;
        height: 2px;
        background: #ccc;
        line-height: 0;
    }
    .scrollbar .handle {
        width: 100px;
        height: 100%;
        background: #292a33;
        cursor: pointer;
    }
    .scrollbar .handle .mousearea {
        position: absolute;
        top: -9px;
        left: 0;
        width: 100%;
        height: 20px;
    }
    
    /* Pages */
    .pages {
        list-style: none;
        margin: 20px 0;
        padding: 0;
        text-align: center;
    }
    .pages li {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 4px;
        text-indent: -999px;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    }
    .pages li:hover {
        background: #aaa;
    }
    .pages li.active {
        background: #666;
    }
    
    /* Controls */
    .controls { 
        
        bottom: 2%;
        left: 40%;
        z-index: 2;
    position: fixed;
    margin: 25px 0;
    text-align: center; }
    
    /* One Item Per Frame example*/
    .oneperframe { height: 300px; line-height: 300px; }
    .oneperframe ul li { width: 1140px; }
    .oneperframe ul li.active { background: #333; }
    
    /* Crazy example */
    .crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
    .crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
    .crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }
    
    
    
    
    
    
    @keyframes hideshow {
        0% { opacity: 0; }
        10% { opacity: 0; }
        15% { opacity: 1; }
        100% { opacity: 1; }
      } 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    #ticker {
        
        
        font-size: 225px;
            letter-spacing: -2px;
        color: #e6e6e6;
        white-space: nowrap;
        overflow: hidden;
        position:sticky;
        max-height:1456;
        padding-top: 20px;
        padding-bottom: 0px;
        letter-spacing: 2px;
        font-family: "PPAcma";
    }
     

     
    .video {
        
    z-index:0;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
     
    }
    
    
    .block {
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 40px;
        padding-right: 8%;
        font-family: 'PP Neue Montreal', serif;
        font-size:34px;
    }
    
    .block2 {
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        top: 0;
        padding-left: 0px;
        padding-top:0px;
        padding-right: 58px;
    }
    
    
    
    a, button {
        color: inherit;
        cursor: pointer;
        transition: border .3s;
        outline: 0;
    
        line-height: 1.3;
    }
    button {
        border: none;
        margin: 0;
        padding: 0;
        width: auto;
        overflow: visible;
        background: transparent;
        color: inherit;
        font: inherit;
            font-size: inherit;
        line-height: normal;
        -webkit-font-smoothing: inherit;
        -moz-osx-font-smoothing: inherit;
        -webkit-appearance: none;
        z-index: 33;
        text-align: left;
   
        font-family: 'PP Neue Montreal', sans-serif;
        text-align: left;
    }
    
    
    
    
    
    #ticker2 {
        
        
        font-size: 280px;
         color: #3c3f42;
        white-space: nowrap;
        overflow: hidden;
        bottom: -5%;
        position: fixed;
    
    }
    
    
    #ticker .ticker-wrap {
        animation-duration: 10s;
    }
    
    

    
    
    
    * {
        -moz-osx-font-smoothing: grayscale;
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
    }
  
    
    
    
    
    #ticker .ticker-wrap {
        animation: ticking 1s infinite linear;
    }
    
    #ticker:hover {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
    }
    
    
    
    .indent {
        text-align: left;
        margin-right: 120px;
        margin-top: 48px;
        margin-bottom: -56px;
        
    }
    
    .indent2 {
    
       text-align: left;
       
    }
    
    .page-footer {
        bottom: 0;
        padding: 300px 0px 49px;
    
        position: relative;
        z-index: 1000000000000000;
        width: 100%;
        /* ============================================================================
        background: linear-gradient(rgba(0,0,0,0), black);
         =============================================================================== */
    }
    

    
    
    .footer {
        z-index: 1000000000;
        width: 100%;
    }
    .footer {
        color: #09442F;
        cursor: pointer;
        text-align: right;
    }
    .footer {

        letter-spacing: -0.04rem;
        font-family: 'PP Neue Montreal', sans-serif;
        text-transform: lowercase;
    }
    .footer {
    
        z-index: 3;
        top: 13px;
        left: 20px;
        color: #09442F;
        cursor: pointer;
        text-align: right;
       
    }
    
    .footer {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }
    
    .copyright {
        position: absolute;
        margin-left: 0%;
        
    
    }
    
    #ticker {
        font-size: 225px;
            letter-spacing: -2px;
        color: #e6e6e6;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        max-height: 1456;
        padding-top: 21vh;
        padding-bottom: 13vh;    
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
       font-family: "PPAcma";
    
    
    
    }

    #ticker:hover {
        font-size: 225px;
            letter-spacing: -2px;
        color: #e6e6e6;
        white-space: nowrap;
        overflow: hidden;
        position: sticky;
        max-height: 1456;
        padding-top: 21vh;
        padding-bottom: 13vh;    
        transition-property: all;
        transition-duration: 3ms;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
        transition-delay: 0.2s;
         font-family: "PPAcma";
    
    
    
    }





    
    
    
    
    body.hover-color1 {
        background-color: #ffffff;
        color: #131313;;
      }
    
    
    a:hover {
        color:#d1e6ca;
        text-decoration: none;
         cursor: url(http://www.felixedgar.fr/felix_foto/cursor2.png),auto;
    }
   
    color:#d1e6ca ;
    
    
    .navbar-left {
         z-index:750;
        margin-top:0px;
        top:0px;
        left:0px;
        position:fixed;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 1.2%;
        margin: auto;
        width: 3%;
        padding-left: 1.2%;
    }
    
    @media (max-width: 1024px)
    .footer {
        padding: 40px 0;
    }
    .footer {

        padding-bottom: 1px;
        margin-left: 0px;
        font-size: 26px;
    }
    
    
    
    dl,ol,ul{
        margin-top:0;
            padding-inline-start: 0px;
    }
    
    
    
                            
    html{
        font-family: 'PP Neue Montreal', serif;
        font-weight: 400;
        -ms-text-size-adjust:100%;
        -webkit-text-size-adjust:100%;
        -webkit-tap-highlight-color:transparent;
        font-size:100%;
    }
        
        
        
                
                    
    a{
           font-family: 'PP Neue Montreal', sans-serif;
        background-color:transparent;
        letter-spacing: 1px;
        color:#ffffff;
    }
    
    .nav{
        left: 30%;
        width: 39%;
        z-index: 1;
        position: fixed !important;
        /* bottom: 1%; */
        padding-top: 7px;
        border-radius: 60px;
      
        /* bottom: 1%; */
        top: 90%;
        right: 0px;
        text-align: center;
        text-transform: lowercase;
        background-color: #dceda7;     
    }
    
    .list-inline>li {
        display: inline-block;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    body.intro-hidden #intro {
        height: 0;
    }
    html, body, #loader, #intro {
       
    }
    
    
    
    #intro, #wrapper {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
    }
    #intro, header {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        
        display: -ms-flexbox;
    }
    
    
    #intro{
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
    }
    
    
    
    #intro, header {
        width:100%;
            z-index:0;
       
     
    
    
    }
    
    
    
    
    
    img{
   
        border-radius: 0px;
        -ms-interpolation-mode:bicubic;
        vertical-align:bottom;
            display: zona;
            padding: 0px;
            max-width: 100%;
       
    }
    
    
    img:hover{
    
    
    transition: all cubic-bezier(.4,0,1,1) 300ms;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-delay: 0.2s;
    
        
    }
    
    
    
    main svg {
        width: 100%;
        height: auto;
    }
    
                                                        
                        
        
    @media all and (min-width:768px){.h1,h1{margin-bottom: 0px;
       
        margin-bottom: 0px;
        margin-bottom: 0px;
        font-size: 52px;
        line-height: 1;
        font-weight: 200;
        font-family: 'PPAcmasemi';
        letter-spacing: 0px;
        /* padding-left: 49%; */
    padding-top: 27%;
        padding-bottom: 0.5%;
        text-align: left;
    }
        
        
        .h2, h2 {
        font-size: 30px;
 
            margin-right: 15%;
            font-weight: 600;
            line-height: 1;

        /* margin-left: 75px; */
        /* text-align: center; */
    }
        
        .h3,h3{ 
                  font-size: 52px;
                  font-weight: 300;
        padding-top: 2%;
        letter-spacing: 1px;
        line-height: 1;
        text-align: center;
        font-family: 'Degular', sans-serif;
        }
    }
        
        .h4,h4{font-size:37px}
        
        .h5,h5{font-size:26px;
            color: #000000;}
        
        .h6,h6{font-size:16px}
        
    
   
    
    
        
    .navMobile_items{
        position:absolute;
        top:auto;
        bottom:0;
        width:100%;
        padding-top:56px;
    }
        
    .navMobile_item{
        display:zona;
    }
    
    .navDesktop,.navMobile_item:first-child{
        display:none;
    }
    
    
    .navMobile-is-open .navMobile_items{
        top:0;
        bottom:auto;
        z-index:1;
    }
    
    
    
        
    @media all and (min-width:1010px){
        
    .navDesktop{
        display:zona; 
        margin-left:0%;
    }
        }
        
        
        
    .nav-scrolled{
        z-index:100000;
     background:#0f0f0f;
    
        position:fixed;
        top:0;
        left:0;
        z-index:2;
        width:100%; 
    }
        
 
    
        
    .h1>p{
        line-height:1.3;
    }
        
        
        
    .u-padd-btm-quarter{
    padding-bottom: 35px;
        padding-top: 15px;
        margin-left: 25px;
        margin-right: 25px;
    
    }
        
        
        @media all and (min-width:768px){
            
    .u-sm-padd-double{
        position:relative;
    }
            
    
            }
        
        
        
    @media all and (min-width:1420px){
    
    
            
    .u-lg-pull-horz-double{
        margin-left:-56px;
    }
            
    
            
    .u-lg-pull-btm-double{
        margin-bottom:-56px;
    }
    
    
    
    .u-lg-padd-horz-double{
        padding-right:56px;
    }
    
    
    .u-lg-padd-btm-double{
        padding-bottom:56px;
            
    }
        
    }
            
    
    
    .u-ta-center{
        text-align:center;
    }
    
            
    .u-fw-bold{
        font-weight:700;
    }
    
    
    .u-fw-semi{
        font-weight:600;
    }
    
            
    .u-fw-normal{
        font-weight:400;
    }
    
            
    
    @media (max-width:1024px){
    
    
    img{
        width:100%;
        
        -ms-interpolation-mode:bicubic;
        vertical-align:bottom;
            display: zona;
            
        
    }
    
        
    #intro {
        text-align:center;
      position: inherit;
     max-height: 85vh;
     font-size:30px;
    }
    
    
    body {
        min-height: 100vh;
    
    
    }
    
    .h4, h4 {
            font-size: 39px;
        margin-bottom: 50px;
    }
    
    .g {
        width: 100%;
        min-height: 2px;
    
        padding-left: 8px;
        padding-right: 8px;
        margin-top: 30px;
    }
    
    .h1>p {
        font-size: 31px;
        line-height: 1.3;
    }
    
    .profile_name {
      font-size: 39px;
          position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 90%;
    }
    
    .backgif {
        position: fixed;
        width:150%;
        height:69vh;
        
        z-index: -1;
        background-position: 0% 0%;
        background-attachment: fixed;
    }
    
    
    
    #information {
        width: 100%;
        padding: 0px 0 0 0;
    }
    
    #intro, header {
        width:100%;
        
        background-image: none;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0% 0%;
        background-attachment: fixed;
    }
    
      
      
          #information-inner{
            width:100%;
            max-width:1720px;
            display: inherit;
            justify-content:space-between;
            }
            
            
       #information-beta {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0px;
    }
    
    #information-alpha {
        width: 100%;
        margin: -4px 0 0 0;
    }
    
    
    #about {
    z-index:2000000000;
    }
    

    
.w-nav-linkwhiteactiv {
  display: none;
    vertical-align: top;
        text-transform: none;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding-right: 17px;
    padding-inline-start: 17px;
    margin: 0px;
    text-decoration: none;

    font-size: 20px !important;;
    border: solid 1px;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: var(--theme-ui-colors-black-90, #ffffff);
   
}
    

    
        
         .navbar-left {
         z-index:-1;
        margin-top:0px;
        top:0px;
        position:relative;
        padding-top: 0px;
        padding-right: 30px;
        padding-bottom: 0px;
        padding-left: 6.5%;
        margin: auto;
    }
    
    a.viewpic {
    font-size: 50px;
    line-height: 1.3;
    }
    
    h1 {
    font-size: 31px;
    line-height: 1.3;
    }
    
    h2 {
    font-size: 30px;
    line-height: 1.3;
        color: #fff;
    }
    
    
    .masonry {
        padding: 0px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 100%;
      max-width: 100%;
    }
    
    .masonry img { 
        width: 100%;
      margin: 0;
      opacity: 1;
      transition: .4s opacity;
      padding:17px;
      }
    
    .masonry img:hover {
    
        opacity: 1;
    }
    
    #intro, header {
        width:100%;
        background-image: none;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0% 0%;
        background-attachment: fixed;
    }
    .bg-black{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0% 0%;
        background-attachment: fixed;
    }
    
    
    .footer {
        font-size: 20px;
        letter-spacing: -0.04rem;
        font-family: 'PP Neue Montreal', sans-serif;
        text-transform: lowercase;
        font-weight: 100;
    }


    .w-nav-menu {
        float: right;
        position: fixed;
        left: 11%;
  
        z-index: 4500;
        font-weight: normal;
    }
.s-spacer--1 {
    height: 60px;
}


#myVideo {
    width: 100%;
    vertical-align: bottom;
    object-fit: cover;
height: 100vh;
    max-width: 98%;
    z-index: 0;
}
    
    .photo_gauche
    {
       width: 100%; 
    }
    
    .grid-row, .row2 {
           flex: auto;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 35px;
        /* margin: 10px; */
        /* width: 600%; */
        columns: 1;
        margin-left: -52px;
     
    }
    
    .indent {
       text-align: left;
           margin-right: 12px;
               margin-top: 200px;
    }
    
    /*
    .email-button {
        -webkit-animation: rotation 7s infinite linear;
    }*/
    
    .email-button {
        top: 100px;
        right: 20%;
        width: 63%;
        text-align: center;
        position: fixed;
        /* mix-blend-mode: difference; */
    }
    
    
    
    .indent2 {
       text-align: left;
           margin-right: 12px;
    }
    
    .h2, h2 {
         font-size: 25px;
        /* margin-left: 10px;
    }
    
    .indent>p {
        margin-left: 30px;
        font-size: 25px;
    }
       
    #col {
        column-count: 1;
       margin-left: -40px;
        font-size: 10px;
    }  
    
    
    .grid-row, .row {
        flex: auto;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 35px;
        /* width: 138%; */
        columns: 1; */
        /* column-width: auto; */
        column-count: 1; */
    } 
    
    .photo_gauche {
        float: left;
        width: 83%;
        margin-top: -200px;
        margin-bottom: 100px;
    }
    
    .logotypee {
        top: 0px;
        left: 0px;
        width: 40%;
        position: inherit;
        color: rgb(0, 0, 0);
        z-index: 1;
    }
    
    section.clickhome {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 0vh;
        z-index: 0;
        
    }
    
    .top-button {
        right: 0%;
        width: 49%;
        text-align: center;
        position: absolute;
        /* mix-blend-mode: difference; */
        /* bottom: 15px; */
    }
    


    #myVideo2 {
    width: 100vw;
    vertical-align: bottom;
    object-fit: cover;
    max-width: 100%;
    padding-right: 5%;
    z-index: 0;
}
    
    .nav {
        font-size: 25px;
        letter-spacing: 0rem;
        font-family: 'PP Neue Montreal', sans-serif;
        text-transform: lowercase;
    }
    
    .s-labels--big, .s-text-type-2 {
        max-width: 100%;
        text-align: left;
        padding-top: 0%;
        padding-left: 4%;
        padding-right: 8%;
        padding-bottom: 2%;
        font-size: 3rem;
        line-height: 3.39rem;
        letter-spacing: -0.111rem;
    }
    
    .s-text-type-4 {
        font-size: 2rem;
        line-height: 3.2rem;
        max-width: 100%;
        text-align: left;
        padding-top: 0%;
        padding-left: 4%;
        padding-right: 8%;
        padding-bottom: 2%;
       letter-spacing: -0.111rem;
    }
    
    .works-single__highlights {
        display: -webkit-box;
        display: -ms-flexbox;
        display: block;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: 2%;
        margin-right: 2%;
    }
    
    .works-single__highlight {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 0 6.862%;
    }
    
    .card_text {
        padding-right: 0px;
    }
    
    .h3, h3 {
        font-size: 21px;
        line-height: 1.2;
        text-align: left;
    }
    
    .cards_item {
        display: flex;
    }
    .cards_item {
        width: 100%;
    }
    
    .inner-div {
        margin: 0px 36px;
        text-align: left;
    }
    
    .nav {
        z-index: 1000000000;
        width: 35%;
    }
        
        .block {
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        position: unset;
        top: 0;
        padding: 40px;
        padding-right: 8%;
    }
        
        
        .bio p {
        /* width: 68%; */
        line-height: 1.5;
        font-size: 1.25rem;
        letter-spacing: -.038rem;
        margin-left: 0%;
        padding-right: 0rem; 
    }
    
        
        
    .zona {
     
        display: -webkit-box;
        display: inherit;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        margin: 0px 10px;
    }
    
    .zona>div {
        width: 100%;
    }
       
    
    .h3, h3 {
        font-size: 39px;
        line-height: 1.2;
        text-align: left;
    }
    
    
    
    
    body, input, textarea, select {
        font-size: 0px;
        line-height: 0;
        letter-spacing: 0px;
        color: #ffffff;
        -webkit-font-smoothing: antialiased !important;
    
        font-family: 'PP Neue Montreal', sans-serif;
        font-weight: 400;
    }


.accroche {
    font-family: 'PPAcma';
    background-color: transparent;
    font-size: 50px;
    letter-spacing: 1px;
    color: #ffffff;
    line-height: 1.2;
    padding-left: 1%;
    padding-right: 7%;
}



.s-text-type-1bis {
    display: none
;
    /* float: left; */
    letter-spacing: 2px;
    padding-bottom: 5%;
    font-size: 4.5vw;
    line-height: 2vw;
    padding-top: 0%;
    padding-left: 1%;
    padding-right: 8%;
    /* white-space: nowrap; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'PP Neue Montreal', sans-serif;
    text-align: l;
    transition: all cubic-bezier(.4,0,1,1) 300ms;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-delay: 0.2s;
}




.metier {
    font-size: 12.5vw;
    /* font-family: PP Neue Montreal; */
    font-family: "PP Neue Montreal", sans-serif;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}


.s-text-type-22 {
    max-width: 100%;
    padding-left: 1%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-top: 8%;
    font-size: 8vw;
    line-height: 8vw;
    /* font-family: PP Neue Montreal; */
    font-family: "PPAcma";
}


.s-text-type-24 {
    max-width: 100%;
    padding-left: 1%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-top: 8%;
    font-size: 7vw;
    line-height: 7vw;
    /* font-family: PP Neue Montreal; */
    font-family: "PPAcma";
}


.menu {
    padding-left: 1%;
    padding-bottom: 51px;
}


.menu__item-text {
    position: relative;
    font-weight: 100;
    font-size: 25px;
    line-height: 1.3;
    opacity: 1;
    transition: opacity 350ms ease;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    font-family: 'PP Neue Montreal', sans-serif;
    letter-spacing: 2px;
}
    
    .container {
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: left;
        padding-top: 150px;
        padding-left: 2%;
    }
    .card {
        display: inline-block;
        width: 100%;
        margin: 0.5rem;
        font-size: 1rem;
        text-decoration: none;
        overflow: hidden;
        padding-left: 2px;
        padding-right: 2px;
    }
    
    
    .s-text-type-2 {
        max-width: 100%;
        text-align: left;
        padding-top: 0%;
        padding-left: 4%;
        padding-right: 2%;
        padding-bottom: 2%;
        font-size: 3rem;
        line-height: 4.39rem;
        letter-spacing: -0.111rem;
    }
    
    .inner-div {
        margin: 0px 12px;
        text-align: left;
    }
    
    .works-single__highlight {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 0 2%;
    }
    
    .cards {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
            padding-right: 0px;
            padding-left: 0px;
        padding-right: 0px;
        padding-left: 0px;
        padding-left: 0%;
        padding-right: 0%;
    }


        
    .NewLogo {
    
    position: fixed;
    width: 400%;
    bottom: 1%;
    padding-left: 0%;
    z-index: 10000000;
       
        
    }
    
    
    .cards-projets {
        display: contents;
        padding: 1%;
    
    }


    .cards_itemS {
    width: 50%;
    position: relative;
    left: 0%;
    display: block;
    padding-left: 0%;
}
    

.card_content {
    padding-bottom: 5%;
}


.cards_itemfull {
    width: 100%;
    padding: 0%; 
}


.card_image {
    border-radius: 0px;
    margin-right: 2%;
}

.slider {
  position: fixed;
    padding-right: 0%;
    line-height: 1.2;
  top: 50%;
  left: 50%;
  padding-left: 4%;
  transform: translate(-50%,-50%);
  width: 95vw;
  overflow: hidden;
  scrollbar-width: none;}
    
    .nav {
        font-size: 20px;
        letter-spacing: -0.04rem;
        font-family: 'PP Neue Montreal', sans-serif;
        text-transform: lowercase;
    }
    
    .card {
        display: inline-block;
        width: 100%;
        margin: 1%;
        font-size: 1rem;
        text-decoration: none;
        overflow: hidden;
    }
    
    button {
        border: none;
        margin: 0;
        padding: 0;
        width: auto;
        overflow: visible;
        background: transparent;
        color: inherit;
        font: inherit;
            font-size: inherit;
            line-height: inherit;
            font-family: inherit;
        font-size: inherit;
        line-height: normal;
        -webkit-font-smoothing: inherit;
        -moz-osx-font-smoothing: inherit;
        -webkit-appearance: none;
        z-index: 33;
        text-align: left;
        font-size: 4.7rem;
        line-height: 5.5rem;
        font-family: 'PP Neue Montreal', sans-serif;
        text-align: left;
        padding-bottom: 22px;
    }
    
    
    .motscles {
        box-sizing: border-box;
        margin: 6px;
        margin-top: 6px;
        margin-right: 6px;
        margin-bottom: 6px;
        margin-left: 0px;
        min-width: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: inline-block;
        text-align: center;
        line-height: inherit;
        -webkit-text-decoration: none;
        text-decoration: none;
        font-size: inherit;
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
        background-color: primary;
        border: 0;
        border-radius: 4px;
        will-change: transform;
        font-weight: 400;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 14px;
        padding-bottom: 14px;
        border-radius: 15px;
        -webkit-transition: all 300ms cubic-bezier(0.23,1,0.32,1);
        transition: all 300ms cubic-bezier(0.23,1,0.32,1);
        cursor: pointer;
        outline: none;
        background-color: #6a232300;
        color: var(--theme-ui-colors-black-100,#000000);
        border: solid 2px;
        border-top-color: currentcolor;
        border-right-color: currentcolor;
        border-bottom-color: currentcolor;
        border-left-color: currentcolor;
        border-top-color: currentcolor;
        border-right-color: currentcolor;
        border-bottom-color: currentcolor;
        border-left-color: currentcolor;
        border-color: var(--theme-ui-colors-black-90,#000000);
        min-height: 60px;
        border-radius: 999px;
        padding-left: 24px;
        padding-right: 24px;
        min-height: 48px;
        font-size: 15px;
        font-family: 'PP Neue Montreal', sans-serif;
    }
    
    
    .manifest {
        padding-bottom: 6%;
        background-color: #0000001a;
        background-color: #ffd0bd;
       
        background-size: cover;
    
    }
    
    .manif {
        padding-bottom: 6%;
        margin: 2%;
        background-color: #a2bbab;
        background-size: cover;
    }
    
    
    
    
    .s-text-type-2 {
        max-width: 100%;
        text-align: left;
        padding-top: 0%;
        padding-left: 4%;
        padding-right: 2%;
        padding-bottom: 2%;
        font-size: 2.5rem;
        line-height: 3.2rem;
        letter-spacing: -0.111rem;
    }
    
    
    .s-text-type-2 {
        max-width: 100%;
        text-align: left;
        padding-top: 0%;
        padding-left: 1%;
        padding-right: 2%;
        padding-bottom: 2%;
        font-size: 2.5rem;
        line-height: 3.2rem;
        letter-spacing: -0.111rem;
    }