@font-face {
  font-family: porter-sans-inline-block;
  src: url("../fonts/porter-sans-inline-block.ttf");
}
@font-face {
  font-family: Jacquard12-Regular;
  src: url("../fonts/Jacquard12-Regular.ttf");
}

@font-face {
  font-family: "GintoNordVar";
  src: url("../fonts/GintoNordGX.ttf") format("truetype-variations");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "GintoNord";
  src: url("../fonts/GintoNordGX.woff2") format("woff2"),
    url("../fonts/GintoNordGX.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "GintoNord2";
  src: url("../fonts/GintoNordGX.woff2") format("woff2"),
    url("../fonts/GintoNordGX.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@media only screen and (min-width: 640px) {
  /* Overlay d'intro Lottie (desktop) */
  #hero-overlay{
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity .5s ease;
  }
  #hero-overlay.is-hidden{ opacity: 0; pointer-events: none; }
  #hero-overlay.is-fading{ opacity: 0; }
  #hero-anim{ width: 100vw; height: 100vh; }
  #hero-loader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: .8rem; color: #fff; opacity: .95; transition: opacity .4s ease; }
  #hero-loader.fade-out{ opacity: 0; }
  .loader-bar{ width: 42vw; max-width: 520px; height: 3px; background: rgba(255,255,255,.15); overflow: hidden; border-radius: 2px; }
  .loader-bar__inner{ display:block; height: 100%; background: linear-gradient(90deg, #fff 0%, #999 100%); transition: width .4s ease; }
  .loader-text{ font-size: .9rem; letter-spacing:.06em; opacity:.7; }
  .enter-cta{ position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.55); border-radius: 9999px; color:#fff; padding: .6rem 1.1rem; font-size: .95rem; letter-spacing:.04em; cursor: pointer; opacity: 0; transition: opacity .6s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .enter-cta.show{ opacity: 1; }
  .enter-cta.fade-out{ opacity: 0; }
  .enter-cta:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.85); }
  .enter-cta:focus{ outline: none; }
  .enter-cta:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
  .skip-cta{ position:absolute; right: 2vw; bottom: 2vh; background: none; border: none; color: rgba(255,255,255,.72); padding:0; font-size:.9rem; letter-spacing:.02em; cursor:pointer; opacity: .9; transition: opacity .6s ease; }
  .skip-cta.show{ opacity: .9; }
  .skip-cta.fade-out{ opacity: 0; }
  .hero-welcome{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size: .95rem; color:#fff; letter-spacing:.04em; opacity:0; transition: opacity .6s ease; }
  .hero-welcome.show{ opacity:1; }
  /* Indice audio sous ENTRER */
  .sound-hint{ position:absolute; left:50%; top: calc(50% + 36px); transform: translateX(-50%); display:inline-flex; align-items:center; gap:.5rem; color: rgba(255,255,255,.48); font-size: .85rem; letter-spacing: .02em; opacity:0; animation: hintIn .6s ease forwards .6s; }
  .sound-hint svg{ opacity: .5; }
  .sound-hint.is-hidden{ opacity:0; transition:opacity .6s ease; animation: none !important; }
  .sound-icon{ display:block; }
  .sound-icon .wave{ transform-origin:left center; animation: wavePulse 1.8s ease-in-out infinite; }
  .sound-icon .wave-2{ animation-delay: .18s; }
  .sound-icon .wave-3{ animation-delay: .36s; }
  @keyframes wavePulse{ 0%{ transform: scaleX(.92); opacity:.3 } 50%{ transform: scaleX(1); opacity:1 } 100%{ transform: scaleX(.92); opacity:.3 } }
  @keyframes hintIn{ from{ opacity:0; transform: translate(-50%,6px) } to{ opacity:1; transform: translate(-50%,0) } }
  html,
  body {
    background-color: black;
    height: auto;
    width: 100vw;
    color: white;
    /* position: relative; */
    font-family: Helvetica, sans-serif;
    font-weight: 100;
    margin: 0;
    /* overflow: hidden; */
    cursor: url("../svg/cursor-1.png") 2 2, auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .mob {
    display: none;
  }

  button {
    border: none;
    cursor: pointer;
  }

  p {
    margin: 0;
  }

  h1 {
    font-weight: 900;
    margin: 0;
    font-size: 4.2vw;
  }
  h2 {
    font-size: 1.5vw;
    font-weight: 50;
    font-variation-settings: "wght" 50;
    margin: 0;
  }

  .zero {
    width: 2vw;
    position: absolute;
    top: 9vw;
    left: 3vw;
  }

  .zero > p {
    font-size: 1vw;
  }

  .img-d {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-end;
  }

  .img-d > img {
    width: 21vw;
  }

  .txt-deco-home-h,
  .txt-deco-home-b {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .txt-deco-home-b {
    position: absolute;
    top: 93vh;
    left: 0vw;
  }
  .txt-deco-defilant > p {
    color: #fff;
    text-transform: uppercase;
    font-family: porter-sans-inline-block;
    font-size: 1vw;
    transform: translate(10vw);
    line-height: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 86vw;
    /* animation-name: defile; */
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    /* animation-timing-function: cubic-bezier(); */
  }

  .clip {
    clip-path: inset(0% 0% 0% 8%);
  }

  .etoile {
    margin-right: 39%;
    /* margin-left: 20rem; */
    left: 20rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    /* align-items: flex-start;
  transform-origin: center; */
  }
  .etoile > svg {
    width: 4vw;
    height: 8vw;
  }

  .portfolio {
    display: flex;
    margin-left: 12%;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    font-family: Jacquard12-Regular;
    font-size: 7vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .asterisk > svg {
    width: 11vw;
    height: 32vh;
    flex-shrink: 0;
    position: absolute;
    right: -1vw;
    top: 39vh;
  }

  .jume {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: GintoNordVar;
    font-variation-settings: "wght" 900;
    font-weight: 50;
    gap: 0.7rem;
    margin-left: 16vw;
    margin-top: -9vh;
    width: 30vw;
    height: fit-content;
  }

  .btn-home {
    /* cursor: pointer; */
    font-family: GintoNordVar;
    font-variation-settings: "wght" 100;

    /* font-weight: 50; */
    border-radius: 7vw;
    width: 37vw;
    height: fit-content;
    background-color: #929292;
    border: 1px solid;
    border-color: transparent;
    color: #52ff00;
    padding: 2.5vw 3.7vw;
    text-align: left;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    font-size: 2vw;
  }

  .btn-home:hover {
    border: 1px solid;
    border-color: #52ff00;
    transition: border-color 800ms;
  }

  .btn-img {
    width: 2vw;
    animation-name: opacity;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
  }

  .scrollbar {
    margin-left: 8vw;
    margin-top: 1vh;
  }

  .scrollbar > img {
    width: 0.9vw;
  }

  .zig > img {
    position: absolute;
    width: 20vw;
    bottom: 18vh;
    right: 26vw;
  }

  .dont {
    font-size: 0.9vw;
    right: 3vw;
    position: absolute;
    top: 93vh;
  }

  .oeuvre {
    width: 30%;
    font-size: 0.5vw;
    margin-top: 4vh;
    font-variation-settings: "wght" 50;
  }

  .hover {
    animation-name: opacity;
    animation-duration: 800ms;
    transition-duration: 2s;
    animation-fill-mode: forwards;
  }

  .move {
    position: relative;
    animation: slide;
    animation-duration: 800ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }

  #ecoindex-badge-link{
    background-color: #52ff00;
    border: 1px solid;
  }
  #ecoindex-badge{
    position: fixed;
    bottom: 12px;
    left: 12px;
    transform: scale(.88);
    opacity: .85;
    z-index: 50;
  }
  /* Le script injecte un lien avec des styles inline (top/left). On force le bas-gauche. */
  #ecoindex-badge-link{
    position: fixed !important;
    bottom: 12px !important;
    left: 12px !important;
    top: auto !important;
    right: auto !important;
    transform: scale(.88);
    opacity: .85;
    z-index: 50;
  }

  /* Overlay d'intro Lottie */
  /* intro Lottie supprimée */
 

  @keyframes slide {
    0% {
      left: 0;
    }
    100% {
      left: 2%;
      transform: scaleX();
    }
  }

  @keyframes slide2 {
    0% {
      left: 0;
    }
    100% {
      left: 20%;
    }
  }

  @keyframes defile {
    from {
      transform: translate(0px);
    }
    to {
      transform: translate(-100px);
    }
  }
  @keyframes opacity {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.2;
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

@media only screen and (max-width: 640px) {
  html,
  body {
    background-color: black;
    height: auto;
    width: 100vw;
    color: white;
    /* position: relative; */
    font-family: Helvetica, sans-serif;
    font-weight: 100;
    margin: 0;
    /* overflow: hidden; */
    cursor: url("../svg/cursor-1.png") 2 2, auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .desk {
    display: none;
  }

  .ham {
    display: flex;
    position: absolute;
    top: 4vh;
    right: 6vw;
    border: none;
  }

  button {
    background: none;
  }

  h1 {
    font-size: 6vw;
  }

  h2 {
    font-size: 4vw;
    font-variation-settings: "wght" 900;
    width: 100vw;
    text-align: center;
  }
  h3 {
    font-size: 3vw;
    font-variation-settings: "wght" 900;
    width: 100vw;
    text-align: center;
  }

  h1,
  h2,
  h3 {
    margin: 0;
    margin-top: 1vh;
  }
  /* overlay*/

  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.87);
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 90;
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  #menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: #000;  */
    /* padding: 20px; */
    z-index: 100;
    transition: transform 0.3s ease-in-out;
    text-align: center;
    width: 90vw; /* 90% of viewport width */
    height: 80vh; /* 80% of viewport height */
    display: flex;
    align-items: left;
    justify-content: left;
    flex-direction: start;
    text-align: inherit;
    display: none;
  }

  #menu.show {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1s;
  }

  #menu ul {
    list-style: none;
    padding: 0;
  }

  #menu ul li {
    margin: 15px 0;
  }

  #menu ul li a {
    color:white; 
    text-decoration: none;
    font-size: 10vw;
  }

  .averti {
    color: grey;
  }

  .jume {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-family: GintoNordVar;
    font-variation-settings: "wght" 200;
  }
  .jume > h2,
  h3 {
    font-family: GintoNordVar;
    font-variation-settings: "wght" 50;
  }

  .portfolio {
    position: absolute;
    font-family: Jacquard12-Regular;
    display: flex;
    align-items: center;
    top: 43%;
    left: 60%;
    margin: auto;
    transform: translate(-50%, -50%);
  }
  .container-btn-bas {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
  }

  .doigt {
    display: flex;
    position: absolute;
    width: 12vw;
    bottom: 4vh;
    right: 18vw;
    animation: doigt 800ms;
    opacity: 0;
    animation-iteration-count: 3;
  }

  .btn-fig {
    display: flex;
    align-items: center;
    width: 70vw;
    gap: 1rem;
    background-color: transparent;
    border: solid white 1px;
    border-radius: 7px;
    color: white;
    cursor: pointer;
    margin-top: 7vh;
    margin-bottom: 7vh;
    padding: 3vw;
    font-family: GintoNordVar;
    font-variation-settings: "wght" 900;
    /* margin-left: 20vw; */
  }
  .btn-fig:hover {
    transition: border-color 800ms;
    border-style: groove;
    /* cursor: url("../img/cursor-projet.png"), auto; */
  }

  .btn-fig > h2 {
    font-family: GintoNordVar;
    font-variation-settings: "wght" 50;
  }

  @keyframes doigt {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
/* Largeur écran supérieure à 360px et inférieure ou égale à 414px */
@media (min-width: 361px) and (max-width: 414px) {
  /* styles spécifiques pour les téléphones standards */
}