/* @import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Gasoek+One&family=Great+Vibes&family=Micro+5&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&family=Great+Vibes&family=Micro+5&display=swap');

* {
  font-family: 'Georama', sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  line-height: 1.4;
  letter-spacing: .02em;
  /* border:1px red solid !important; */
}

:root {
  --progress:0vw;
  --transition-cheetah:filter 0.15s;
  --black:#141414;
  --white: #ffffff;
  /* --dark-gray:#444444; */
  --dark-gray:#505050;
/* 
  --glow-filter:drop-shadow(0 0 10px #ffffff25)
                drop-shadow(0 0 50px #ffffff25);
  --glow-filter-disabled:drop-shadow(0 0 10px #ffffff00)
                        drop-shadow(0 0 50px #ffffff00); */

                        
  --glow-filter:drop-shadow(0 0 18px #ffffff20);
  --glow-filter-disabled:drop-shadow(0 0 18px #ffffff00);

  --bg-design-color:#141414;
  --bg-logo-color:#ff6600;
  --bg-logo-color-op0:#ff660000;

  --scroll-affiche:0;

  --font-size-pc:18px;
  --font-size-tel:15px
}



/* #colorLogoForm #choiceOrange {background-color:#ff9c5b;}
#colorLogoForm #choiceRed {background-color:#ff5b5b;}
#colorLogoForm #choicePurple {background-color:#ce7bf5;}
#colorLogoForm #choiceBlue {background-color:#5bb0ff;}
#colorLogoForm #choiceGreen {background-color:#81ff5b;}
#colorLogoForm #choiceYellow {background-color:#ffe65b;}
#colorLogoForm #choiceGrey {background-color:#cacaca;} */

html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}


::-webkit-scrollbar{
  width: 0px;
  display: block;
}
/* 
::-webkit-scrollbar-track{
  background:var(--black);
}

::-webkit-scrollbar-thumb{
  background:var(--dark-gray);
  border-radius: 50px;
  filter: var(--glow-filter-disabled);
  transition: background 0.4s ease, filter 0.4s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--white);
  filter:var(--glow-filter);
} */

html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  max-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--black);
  color: var(--white) ;
  overflow-x: hidden;
  cursor:none !important;
  opacity: 1;
  transition: opacity 0.5s linear;
}

body.loading {
  overflow: hidden !important;
  height: 100%;
}

body.fade-out {
  opacity: 0;
  transition: opacity 0.3s linear;
}



.title {
  position: relative;
  width: 98vw;
  /* margin: calc(2vw + 2vh) 0; */
  z-index: 31;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: perspective(calc(8vw + 8vh)) rotateY(5deg) scaleX(1.2);
}

h1 {
  width: 100vw;
  position: relative;
  text-align: left;
  /* font-size: 148px; */
  font-size: calc(7vw + 3vh);
  font-weight: 450;
  color: var(--white);
  filter: var(--glow-filter);
  margin: 0 0 0 calc(4vw);
  padding: 10px;
}

h1 .letterTitle {
  visibility: hidden;
  width: 1ch;
  animation-delay: calc(var(--i) * 0.08s);
  animation-name: typeWriting;
  animation-fill-mode: forwards;
  animation-play-state:paused;
  margin: 0 0 0 calc(-1.5vw + -1vh);
}

h1 .tiretTitle {
  position: relative;
  left: 0;
  display: inline-block;
  opacity: 1;
  animation: moveTiret calc(var(--letter-count) * 0.08s) steps(var(--letter-count)) forwards, clignoteTiret 0.8s infinite;
  visibility: visible;
  animation-play-state:paused,running;
}

.title.enabled .letterTitle {
  animation-play-state:running;
}

.title.enabled .tiretTitle {
  animation-play-state:running,running;
}

@keyframes typeWriting {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

@keyframes moveTiret {
  from {
    transform: translateX(calc(var(--letter-count) * -1ch - 60px));
  }
  to {
    transform: translateX(0);
  }
}

@media screen and (max-width: 800px) {
  @keyframes moveTiret {
    from {
      transform: translateX(calc(var(--letter-count) * -1ch - 20px));
    }
    to {
      transform: translateX(0);
    }
  }
}

@keyframes clignoteTiret {
  0% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100%{
    visibility: hidden;
  }
}


.topNavGeneral {
  position: absolute;
  width: max-content;
  height: max-content;
  overflow: visible;
  top: 0;
  left: 0;
  z-index: 50 !important;
}

.topNavContainer  {
  width: max-content;
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  top: 0;
  left: 0;
  z-index: 40;
  height: max-content;
  pointer-events: all;
}

.topNavGeneral .topNavContainer a {
  position: relative; 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  color: var(--white);
  background-color: transparent;
  font-weight: 300;
  font-size: 1rem;
  overflow: hidden;
  transition:0.15s ease;
}

.topNavGeneral .topNavContainer a:hover {
  color:var(--black);
}

.topNavGeneral .topNavContainer  a::after {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--white);
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: -1;
  transform: translateY(100%);
}

.topNavGeneral .topNavContainer a:hover::after {
  transform: translateY(0%);
}

.topNavBg {
  display: none;
}

.closeOpenBtn {
  display: none;
}

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

  .topNavGeneral .topNavContainer {
    position: fixed;
    flex-direction: column;
    top: 50px;
    right: 0;
    left: auto;
    pointer-events: none !important;
    z-index: 140 !important;
  }

  .topNavGeneral .topNavContainer a {
    transform: translateX(100%);
    transition: transform 0.15s ease calc(0.1s * var(--i) + 0.2s);
    padding: 20px;
    z-index: 140 !important;
  }

  .topNavGeneral.active .topNavContainer a::after , .topNavGeneral .topNavContainer a::after  {
    z-index: 132 !important;
    transform: translateX(101%) !important;
  }

  .topNavGeneral.active .topNavContainer a:hover::after {
    transform: translateX(0%) !important;
  }
  
  .topNavGeneral.active .topNavContainer a {
    transform: translate(0%);
  }

  .closeOpenBtn {
    position:fixed;
    top: 0;
    right: 0;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    z-index: 140 !important;
  }

  .closeOpenBtn div {
    width: 18px;
    height: 1.5px;
    border-radius: 10px;
    margin: 0;
    background-color: var(--white);
  }

  .topNavGeneral .closeOpenBtn .one, .topNavGeneral .closeOpenBtn .two, .topNavGeneral .closeOpenBtn .three{
    transition: transform 0.15s ease;
    transform-origin: 50% 50%;
  }

  .topNavGeneral.active .closeOpenBtn .one {
    transform: translateY(5.5px) rotate(45deg) ;
  }

  .topNavGeneral.active .closeOpenBtn .three {
    transform: translateY(-5.5px) rotate(-45deg) ;
  }

  .topNavGeneral.active .closeOpenBtn .two {
    transform: scaleX(0) ;
  }

  .topNavGeneral .topNavBg {
    display: block ;
    position: fixed;
    width: 300px;
    height:  80vh;
    top: 0;
    right: 0;
    transform: translate(50%,-25%);
    z-index: 120 !important;
    opacity: 0;
    overflow: visible;
    background-color: var(--black);
    filter: blur(50px);
    border-radius: 0 0 100% 100%;
    transition:opacity 0.2s linear;
    pointer-events: none !important;
  }

  
  .topNavGeneral.active .topNavContainer {
    pointer-events:all !important;
  }

  .topNavGeneral.active .topNavBg {
    pointer-events:all !important;
    opacity: 1;
  }
}


.title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0.2vw); 
  mask-image: linear-gradient(to right, transparent 0%, black 40%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
  overflow: hidden;
}

.section {
  width: 100vw;
  margin: calc(4vw + 2vh) 0;
}

.loader-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow:hidden !important;
}

.loading .loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--black);
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow:hidden !important;
  visibility: visible;
  /* mix-blend-mode:luminosity; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  animation-delay: 2s;
  animation-duration: 0.25s;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-direction:normal;
  animation-play-state:paused;
}

.loading .loader-wrapper img {
  width: 200px;
  height: auto;
  filter:var(--glow-filter-disabled);
  z-index: 150;

  animation-delay: 0s;
  animation-duration: 2s;
  animation-name: logoLoaderLoad;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-direction:normal;
  animation-play-state:paused;
}

.loading .loader-wrapper.loaded, .loading .loader-wrapper.loaded img {
  animation-play-state:running;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% { 
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logoLoaderLoad {
  0% {
    opacity: 0;
    transform: scale(2) rotate(-90deg);
    visibility: visible;
    filter:var(--glow-filter-disabled);
  }
  30% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    visibility: visible;
    filter:var(--glow-filter-disabled);
  }
  50%{
    opacity: 1;
    transform: scale(1) rotate(0deg);
    visibility: visible;
    filter:var(--glow-filter-disabled);
  }
  70% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    visibility: visible;
    filter:var(--glow-filter);
  }
  99% { 
    opacity: 0;
    transform: scale(1) rotate(0deg);
    visibility: visible;
    filter:var(--glow-filter);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0deg);
    visibility: hidden;
    filter:var(--glow-filter);
  }
}

.cursor {
  display: block;
  position: fixed;
  width: 26px;
  height: 26px;
  border-radius: 50px;
  top:-100px;
  left: 400px;
  background-color: var(--white);
  filter:drop-shadow(0 0 18px #14141480)
          drop-shadow(0 0 18px #ffffff20);
  pointer-events: none;
  transform: translate(-50%,-50%);
  z-index: 100;
  transition: all 0 ease;
  /* mix-blend-mode:difference; */
  transition: width 0.5s ease, height 0.5s ease ; /* Modification de la durée de transition */

  animation-duration: 10s;
  animation-name: tourneCursor;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction:normal;
  animation-play-state: paused;
}

.cursor.clicCompteur {
  mix-blend-mode: difference;
  filter:drop-shadow(0 0 18px #14141400)
          drop-shadow(0 0 18px #ffffff20);
}

.cursor.click {
  width: 46px;
  height: 46px;
  /* mix-blend-mode:normal; */
  transform: translate(-50%,-50%);
  animation-play-state: running;
}

.cursor.small {
  width: 10px;
  height: 10px;
}

@keyframes tourneCursor {
  from {
    transform: translate(-50%,-50%) rotateZ(0deg);
  }
  to { 
    transform: translate(-50%,-50%) rotateZ(360deg);
  }
}

.cursor .seeMore {
  position: absolute;
  text-align: center;
  width: 15px;
  top:-50%;
  left: 50%;
  color: var(--white);
  font-weight: 800;
  font-size: 1px;
  /* transform-origin: center; */
  transform-style: preserve-3d;
  transform-origin: 0px 26px;
  transform: rotateZ(calc(var(--i) * 15deg)) translateY(26px) translateX(-5px);
  filter: var(--glow-filter);
  transition: transform 0.5s ease, font-size 0.5s ease, transform-origin 0.5s ease;
  z-index: 100;
  filter:drop-shadow(0 0 8px #1414146f);
}

.cursor.small .seeMore {
  transform-origin: 0px 10px;
  transform: rotateZ(calc(var(--i) * 15deg)) translateY(10px) translateX(-5px);
}


.cursor.click .seeMore {
  font-size: 10px;
  transform-style: preserve-3d;
  transform-origin: 0px 46px;
  transform: rotateZ(calc(var(--i) * 15deg)) translateY(7px) translateX(-5px);
}


main {
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 90vh;
  overflow: hidden;
}

.greatVibes {
  font-family: "Great Vibes", cursive;
}

.micro-5-regular {
  font-family: "Micro 5", sans-serif;
}

.classicBtn {
  position: relative; 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  color: var(--white);
  background-color: transparent;
  font-weight: 250;
  font-size: 1.1rem;
  overflow: hidden;
  transition:0.15s ease;
  z-index: 15;
}

.classicBtn:hover {
  color:var(--black);
}

.classicBtn::after {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--white);
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: -1;
  transform: translateY(100%);
}

.classicBtn:hover::after {
  transform: translateY(0%);
}

footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height: 60px;
  width: 100vw;
  bottom: 0;
  /* background-color: red; */
  /* filter: brightness(3.4) var(--glow-filter); */
}

footer .content {
  width: 96vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content:space-around;
  text-decoration: none;
  color:var(--white);
  font-size: 11.5px;
}

footer .content .center a {
  text-decoration: none;
  color:var(--white);
  cursor: none;
  transition: opacity 0.15s ease;
}

footer .content .center a:hover {
  opacity: 0.4;
}


footer #socialFooter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap:10px;
}

footer #socialFooter a img {
  filter:invert();
  width: 20px;
  height: 20px;
  opacity: 1;
  transition : opacity 0.15s ease;
}

footer #socialFooter a:hover img {
  opacity: 0.6;
}

@media screen and (max-width: 800px) {
  footer .content{
    width: 90vw;
    flex-direction: column;
    text-align: center;
    gap: 12px 0;
    font-size: 12px;
    margin-bottom: 20px;
  }
}


a {
  text-decoration: none;
  cursor: none;
}

.linktree {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: max-content;
  gap: 15px;
  flex-wrap: nowrap;
  font-size: 18px;
  font-weight: 450;
  /* filter: var(--glow-filter); */
}

.linktreeBtn {
  width: 280px;
  position: relative;
  height: 45px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  color: var(--white);
  border-radius: 15px;
  padding:6px 18px;
  align-items: center;
  gap:20px;
  z-index: 4 !important;
  justify-content: start;
}

.linktree .linktreeBtn img {
  fill: #fff;
  width: 30px;
  height: auto;
  filter: invert();
  margin: 0;
  padding: 0;
  z-index:4 !important;
}

.linktree .linktreeBtn p {
  z-index:4 !important;
  filter: drop-shadow(0 0 5px #1414142f);
}

.linktreeBtn div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: inherit;
  height: inherit;
  padding:6px 18px;
  border-radius: 15px;
  filter:blur(0px);
  transform: translate(-50%,-50%);
  transition:filter 0.15s ease;
  z-index:2 !important;
}


@media screen and (max-width: 800px) {
  
  .linktree {
    flex-direction: column;
  }

  .linktree .linktreeBtn p {
    font-size: var(--font-size-tel);
  }

  .linktreeBtn div {
    padding:4px 18px;
  }

  .linktreeBtn {
    width: 240px;
  }

  .linktree .linktreeBtn img {
    width: 25px;
    height: auto;
  }
}

.linktreeBtn.insta, .linktreeBtn.insta div {background:radial-gradient(circle at 95% 100%, #ffd36c 0%, #ff664b 20%, #db3ece 70%, #5073f1 100%);}
.linktreeBtn.linkedin, .linktreeBtn.linkedin div {background:linear-gradient(60deg,#004da0 0%, #1279e8 100%);}
.linktreeBtn.malt, .linktreeBtn.malt div {background:linear-gradient(120deg,#ff5858 0%, #ff2b36 100%);}
.linktreeBtn.cv, .linktreeBtn.cv div {background:linear-gradient(160deg,#6d6d6d 0%, #4b4b4b 100%);}
.linktreeBtn.mail, .linktreeBtn.mail div {background:linear-gradient(160deg,#0bc8e9 0%, #0693ac 100%);}

.linktreeBtn:hover div {
  filter: blur(10px);
}

.pdfSection {
  margin: calc(4vw + 2vh) 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  border:none;
}

.pdf-viewer {
  position: relative;
  height: 100vh;
  width: auto;
  aspect-ratio: 210 / 310;  
  display: block;
  border: none;
  max-height: 100vh; 
  max-width: 100%;
  z-index: 2;
  /* padding: 10px; */
  background-color: #1c1c1c;
}

.pdf-bg { 
  margin: calc(4vw + 2vh) 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: calc(100vh - 2px);
  width: calc(100vh (310/210) - 2px);
  aspect-ratio: 210 / 310;   
  max-height: 100vh;          
  max-width: 100%;
  z-index: 0;
  background-color: #00000000;
  pointer-events: none;
  border: solid #1c1c1c 2px;
  filter: drop-shadow(0 0 20px #1C1C1C) drop-shadow(0 0 30px #1C1C1C);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pdf-warning {
  position: absolute;
  height: calc(100vh - 2px);
  width: calc(100vh (310/210) - 2px);
  aspect-ratio: 210 / 310; 
  max-height: 100vh;          
  max-width: 80%;
  font-size: 14px;
  color:var(--white);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
  text-align: center;
}

.pdf-warning a {
  color: var(--white);
  font-weight: 600;
  padding: 10px;
}

@media screen and (max-width: 800px) {
  .pdfSection {
    justify-content: center;
  }

  .pdf-viewer {
    position: relative;
    height: auto;
    width: 95vw;
    aspect-ratio: 210 / 297;  
    display: block;
    border: none;
    max-height: 100vh; 
    max-width: 100%;
    z-index: 1;
    background-color: #1c1c1c;
  }

  
  .pdf-bg { 
    margin: calc(4vw + 2vh) 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: none;
  }
}

.minceText {
  display:flex;
  width: 100lvw;
  height:60lvh;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-weight: 900;
}