/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    
    font-family: sans-serif;
    overflow-y: auto;
  }

  .logo img{
    width: 20%;
    
  }

  .menu{
    color: black;
    font-family: "League Gothic", sans-serif;
  font-weight: 100;
  font-size: 24px;
  text-transform: uppercase;
  }



  .menu2{
    color: black;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
  font-size: 18px;
  text-transform: uppercase;
  margin-left: 10px;
  }
  

  .contact{

    color: black;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    font-weight: 100;
    font-size: 42px;
    position: relative;

    left: 15%;
  bottom: 200px;


  }
  
  /* HEADER */
  .header {
    position: fixed;
    top: 0;
    height: 80px;
    width: 100%;
    padding: 0 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    z-index: 1000;
  }
  
  /* SECTIONS */
  .section {
    height: 100vh;
    padding-top: 80px;
    background: transparent;
    z-index: 1; 
  }
  
  /* GRID */
  .grid {
    display: grid;
    grid-template-columns:
      27px
      repeat(12, 290px)
      27px;
    column-gap: 25px;
    height: 100%;
  }


.text-column {
  display: flex;
  flex-direction: column;
}

  
  /* SECTION 1 */
  .hero-text {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    
    grid-column: 5/ span 2;
    align-self: center;
    font-size: 20px;
  }
  
  /* SECTION 2 */
  .image-left {
    
    grid-column: 2 / span 1;
    width: 100%;
    background-color: transparent;
    z-index: 1;
  }

  h2{

      font-size: 60px;
      text-transform: uppercase;
      margin-top: 30px;
      margin-left: 50px;
  }


 

  .blink-text {



    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    font-weight: 100;
  font-size: 34px;
  margin-top: 50%;
  text-transform: uppercase;
    animation: blink 2s infinite;
  margin-left: 10%;

  }

  .scroll{
    width: 200px;
    margin-left: 50%;
margin-right: 50%;
  }
  
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.1; }
}

  

#toggleText {

    color: #18272F;
    position: relative;
    text-decoration: none;

  }
  
  #toggleText::before {
    content: '';
    position: absolute;
    width: 64%;
    height:2px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
    top: 1.2em;
  }
  
 #toggleText:hover::before {
    transform-origin: left;
    transform: scaleX(1);
  }
  
  .skins{
    display: grid;
    grid-template-columns:
    27px
    repeat(2,660px)
    27px;



  }

  .skins h3{
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    font-style: normal;
      font-size: 22px;
     
      margin-bottom: 20px;
 

  }

 

  .description{
    margin-right: 30px; 
    
    text-indent: 30%;
    margin-top: -150px;
  }



.labo{
  grid-column: 5 / span 1;
}


.graphisme{
  grid-column: 2 / span 1;
}


  ul {
position: relative;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    list-style: square;
    font-size: 14px;
line-height: 22px;
margin-right: 80px;



  }

  .hidden-text {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 200;
    font-style: normal;
    display: none; /* Caché par défaut */
    margin-top: 10px;
    float: none;

}

a{
  text-decoration: none;
}
  


  .section-image-text{
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    height: 20%;
    

    background: transparent;
    z-index: 1;
  }
 


  
  
  .section-gallery {
    position: relative;
    background-color: transparent;
    z-index: 1;
  }
  
  /* durée du scroll */
  .gallery-spacer {
    height: 700vh;
  }
  
  /* conteneur bloqué */
  .gallery-fixed {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: transparent;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  
  .gallery-fixed.is-active {
    opacity: 1;
    pointer-events: auto;
  }


  .images-track::before {
    content: "";
    display: block;
    height: 200px; /* même valeur que EXTRA_SPACE */
  }
  
  .images-track::after {
    content: "";
    display: block;
    height: 900px; /* même valeur que EXTRA_SPACE */
  }
  
  /* images */
  .images-wrapper {
    height: 100vh;
    position: absolute; /* postulat de départ */
    top: 50%; left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%);


    overflow: hidden;

  }
  
  .images-track {

   margin-top: 0%;
    position: relative;
    will-change: transform;
    
    

  }
  
  .image-block {
    
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
    
    column-gap: 25px;

    height: 60%;
    margin-bottom: 0px;
    align-items: start; /* alignement en haut */
  }
  .image-block img {
      max-width: 100%; 
    width: 75%;
    height: auto;
   
  }

  .image-block video {
    max-width: 100%; 
  width: 75%;
  height: auto;
 
}
.text-right{
margin-bottom: 30px;
font-size: 22px;
width: 500px;
}

  

  .text-left {
  grid-column: 1;
  text-align: right;
}

  /* compteur */
  .counter {
    font-family: "League Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
    grid-column: 2;
    font-size: 42px;
  }
  
  /* TITRES */
  .titles {


    position: fixed;
    top: 80px;
    right: 0px;
    width: 460px;
    pointer-events: none;
    font-size: 35px;

  }
  
  .title {
    font-family: "League Gothic", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "wdth" 75;
  position: absolute;
  margin-left: 0px;
  width: 100%;
margin-bottom: 300px;
font-size: 42px;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.25s ease-out;
  
}

  .title.active {
    opacity: 1;
  }

  .title {
    transition:
      transform 0.4s cubic-bezier(.4,0,.2,1),
      opacity 0.3s ease;
  }

  @media (max-width: 1366px) {

    .hero-text {
      grid-column: 4/ span 2;

    }

     
  .skins{
    display: grid;
    grid-template-columns:
    27px
    repeat(2,480px)
    27px;
  }

  

.titles {
  right: 100px;
}

    
  }
  
  

  @media (max-width: 1024px) {

    .grid {
      grid-template-columns: 20px repeat(8, 1fr) 20px;
      column-gap: 20px;
    }
  
    .images-wrapper {
      grid-column: 2 / span 6;
      height: 80vh;
    }
  
    .image-block img {
      width: 80%;
    }
  
    .titles {
      width: 220px;
      font-size: 16px;
    }
  
    .counter {
      font-size: 20px;
    }
  }
  

  @media (max-width: 768px) {

    /* désactiver le pin */
    .gallery-fixed {
      position: relative;
      height: auto;
      opacity: 1;
      pointer-events: auto;
    }
  
    .gallery-spacer {
      height: auto;
    }
  
    .images-wrapper {
      height: auto;
      overflow: visible;
      grid-column: 1 / -1;
    }
  
    .images-track {
      transform: none !important;
    }
  
    .image-block {
      height: auto;
      display: block;
      margin-bottom: 80px;
    }
  
    .image-block img {
      width: 100%;
    }
  
    .text-left,
    .text-right {
      position: static;
      margin: 10px 0;
      text-align: left;
    }
  
    .titles {
      position: static;
      width: 100%;
      margin-bottom: 40px;
    }
  
    .title {
      position: static;
      transform: none !important;
      opacity: 1 !important;
      margin-bottom: 10px;
    }
  
    .counter {
      display: none; /* optionnel */
    }
  }


  .svg {
    stroke-dasharray: 250;
    stroke-dashoffset: 450;
    animation: draw 10s linear infinite;
  }
  
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  

  
  
/* nécessaire pour positionner le voile */
.image-block {
  position: relative;
}


/* wrapper exactement à la taille du média */
.media {
  position: relative;
  width: 75%; /* même valeur que img/video */
}

/* image / vidéo */
.media img,
.media video {
  width: 100%;
  height: auto;
  display: block;
}

/* voile */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* assombrir toutes les images */
.images-track:has(.image-block:hover) .media::after {
  opacity: 1;
}

/* sauf celle survolée */
.images-track:has(.image-block:hover) .image-block:hover .media::after {
  opacity: 0;
}


/* quand UNE image est survolée → assombrir TOUTES */
.images-track:has(.image-block:hover) .image-block::after {
  opacity: 1;
}

/* sauf celle survolée */
.images-track:has(.image-block:hover) .image-block:hover::after {
  opacity: 0;
}

/* garantir que l’image / vidéo reste au-dessus du fond */
.image-block img,
.image-block video {
  position: relative;
  z-index: 1;
}



  html, body {
    margin: 0;
    padding: 0;
  }
  
  canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }




  .media-dim {
    filter: brightness(0.5);
    transition: filter 0.2s ease;
  }