@font-face {
    font-family: 'Visby';
    src: url('/fonts/VisbyRegular.woff') format('woff'),
         url('/fonts/VisbyRegular.otf') format('opentype');
}
@font-face {
    font-family: 'VisbyLight';
    src: url('/fonts/VisbyLight.woff') format('woff'),
         url('/fonts/VisbyLight.otf') format('opentype');
}
@font-face {
  font-family: 'VisbyLightItalic';
  src: url('/fonts/VisbyLightItalic.woff') format('woff'),
       url('/fonts/VisbyLightItalic.otf') format('opentype');
}
@font-face {
    font-family: 'VisbyThin';
    src: url('/fonts/VisbyThin.woff') format('woff'),
         url('/fonts/VisbyThin.otf') format('opentype');
}
@font-face {
  font-family: 'VisbyMedium';
  src: url('/fonts/VisbyMedium.woff') format('woff'),
       url('/fonts/VisbyMedium.otf') format('opentype');
}




*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #fafafa;
}

a {
  text-decoration: none
}




#transition-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
.transition {
  position: absolute;
  width: 100%;
  height: 50%;
  background-color: #fafafa;
}
.transition-top {
  top: 0;
  left: 0;
}
.transition-bottom {
  bottom: 0;
  left: 0;
}






.cta_formulaire {
  position: absolute;
  top: 4vh;
  right: 4vh;
  padding: 3vh 4vh 2.6vh 4vh;
  font-family: 'VisbyMedium';
  color: #141414;
  text-transform: uppercase;
  border: 0.211vh solid #141414;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.9vh;
  line-height: 0;
  z-index: 2;
}
.cta_formulaire:hover {
  background-color: #141414;
  color: #fff;
  transition: ease-out 0.3s;
}
.cta_formulaire:not(:hover){
  transition: ease-out 0.3s;
}

@media only screen and (max-width: 700px){
  .cta_formulaire {
    display: none;
  }}


  
nav, footer {
  position: fixed;
  width: 100%;
  justify-content: space-between;
  text-align: center;
  color: #141414;
  text-transform: uppercase;
}
nav {
  font-family: 'VisbyLight';
  font-size: 6vh;
  text-transform: none;
  padding: 4vh 0px;
}
footer {
  bottom: 0;
  font-family: 'Visby';
  font-size: 2.5vh;
  text-transform: none;
  line-height: 3vh;
  padding: 3vh 7vw;
}
@media (max-width: 1200px) {
  footer {
    font-size: 2vh;
    line-height: 2.5vh;
    }
}
@media (max-width: 800px) {
  footer {
    font-size: 1.7vh;
    line-height: 2.1vh;
    }
}
@media (min-height: 500px) and (max-height: 700px) {
  footer {
    padding: 4vh 13vw;
    }
}
@media (min-height: 0px) and (max-height: 500px) {
  footer {
    padding: 4vh 15vw;
    }
}
  
.footer-text {
  display: none;
}
#footer-text-1 {
  display: block;
}

.nav-title {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap; 
    height: 1em;
}
.nav-title span {
    display: inline-block;
    overflow: hidden;
    transform: translateY(100%);
    clip-path: inset(0 0 0 0);
}

.footer-text {
  opacity: 0; 
  animation: fadeIn 1.5s ease forwards; 
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




.link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 3vh;
  padding: 0vh 3vh 0vh 3vh;
}

.cta_portfolio,
.cta_mail {
  padding: 3vh 4vh 2.6vh 4vh;
  font-family: 'VisbyMedium';
  color: #141414;
  text-transform: uppercase;
  border: 0.22vh solid #141414;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.9vh;
  line-height: 0;
  z-index: 2;
}
.cta_portfolio:hover,
.cta_mail:hover {
  background-color: #141414;
  color: #fff;
  transition: ease-out 0.3s;
}
.cta_portfolio:not(:hover),
.cta_mail:not(:hover) {
  transition: ease-out 0.3s;
}










.slider-wrapper {
  width: max-content;
  padding: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 7vh;
  gap: 1vh;
  transform: translateX(100vw);
  animation: slideIn 2s ease;
}
@keyframes slideIn {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(0); 
  }
}
.slide {
  width: 100vh;
  height: auto;
}
.slide2 {
  width: 90vh;
  height: 60vh;
}
.slide3 {
  width: 60vh;
  height: 60vh;
}
.slide4 {
  width: 150vh;
  height: 60vh;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video {
  width: 100vh;
  height: 60vh;
}




.modal {
  display: none; 
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  background-color: #fafafa98; 
}
.modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; 
}
.close {
  position: absolute;
  top: 2%;
  right: 27vh;
  color: #141414;
  font-family: 'VisbyThin';
  font-size: 10vh;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: #fafafa;
  text-decoration: none;
  cursor: pointer;
  transition: ease-out 0.3s;
}
.close:not(:hover){
  transition: ease-out 2s;
}




.marker-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  height: 100vh;
}
.marker {
  position: relative;
  width: 0.18vh;
  height: 100%;
  background: #141414;
  animation: slideIn2 2s ease;
}
@keyframes slideIn2 {
  from {
    transform: translateY(-100vh);
  }
  to {
    transform: translateY(0); 
  }
}




/* Menu burger */

.wrapperburger {
  width: 100vw;
  height: 100vh;
  top: 0%;
  position: absolute;
  overflow: hidden;
}

.slide-in {
  transform: translate3d(0, 0, 0) !important;
}

.menu-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  align-items: center;
  transform: translate3d(0, -100%, 0);
  transition: all 0.9s ease;
  z-index: 10;
  background-color: #fafafa;
}
.menu-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transform: translate3d(0, 100%, 0);
  transition: all 0.9s ease;
  z-index: 10;
  background-color: #fafafa;
}

.onglet-top {
  font-family: 'VisbyLight';
  text-transform: uppercase;
  text-decoration: none;
  color: #141414;
  font-size: 4.5vh;
  text-align: center;
  overflow: hidden;
  position: relative; 
  white-space: nowrap;
}
.onglet-bottom {
  font-family: 'VisbyLight';
  text-transform: uppercase;
  text-decoration: none;
  color: #141414;
  font-size: 4.5vh;
  text-align: center;
  overflow: hidden;
  position: relative; 
  white-space: nowrap;
}


.onglet-top:hover,
.onglet-bottom:hover {
  color: #CCCCCC;
  transition: ease-out 0.3s;
}
.onglet-top:not(:hover),
.onglet-bottom:not(:hover) {
  transition: ease-out 2s;
}


.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.menu-links a {
  display: block;
  white-space: nowrap;
  text-align: center;
}





.logo_menu_wrapper {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.logo_menu {
  width: 12vh;
  margin-top: 5.5vh;
  text-align: center;
}

.mentions {
  width: 100%;
  position: absolute;
  bottom: 5%;
  font-size: 1.9vh;
  font-family: 'Visby';
  color: #141414;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo_mentions {
  width: 5.5vh;
  text-align: center;
}




.navburger {
  position: relative;
  z-index: 10;
  top: 5vh;
  left: 4vh;
  --color: #141414;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: multiply;
}

.navburger svg {
  height: 4vh;
  fill: none;
  stroke: var(--color);
  stroke-width: 0.45vh;
}

.navburger svg use:nth-of-type(1) {
  opacity: 1;
  stroke-dashoffset: 221;
  stroke-dasharray: 46 249;
  transition: stroke-dashoffset .12s linear .2s, stroke-dasharray .12s linear .2s, opacity 0s linear .2s;  
}

.navburger svg use:nth-of-type(2) {
  -webkit-animation: stroke-animation-reverse 1.2s ease-out forwards;
  animation: stroke-animation-reverse 1.2s ease-out forwards;
}

.navburger input {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

.navburger input:checked + svg use:nth-of-type(1) {
  stroke-dashoffset: 175;
  stroke-dasharray: 0 295;
  opacity: 0;
  -webkit-transition: stroke-dashoffset .07s linear .07s, stroke-dasharray .07s linear .07s, opacity 0s linear .14s;
  transition: stroke-dashoffset .07s linear .07s, stroke-dasharray .07s linear .07s, opacity 0s linear .14s;  
}

.navburger input:checked + svg use:nth-of-type(2) {
  -webkit-animation: stroke-animation 1.2s ease-out forwards;
  animation: stroke-animation 1.2s ease-out forwards;
}

@keyframes stroke-animation {
  0% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  50% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  65% {
    stroke-dashoffset: 59;
    stroke-dasharray: 59 236;
  }
  100% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
}

@keyframes stroke-animation-reverse {
  0% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  50% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
  65% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  100% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
}

@-webkit-keyframes stroke-animation {
  0% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  50% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  65% {
    stroke-dashoffset: 59;
    stroke-dasharray: 59 236;
  }
  100% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
}

@-webkit-keyframes stroke-animation-reverse {
  0% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  50% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
  65% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  100% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
}