@font-face {
  font-family:"Barlow" ;
  src: url(/fonts/Barlow-ExtraBold.otf);
}

@font-face {
  font-family: "Barlow-Light";
  src: url(/fonts/Barlow-Light.otf);
}

@font-face {
  font-family: "Barlow-Regular";
  src: url(/fonts/Barlow-Regular.otf);
}


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=League+Gothic&display=swap');

@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');




.ibm-plex-mono-thin {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-mono-extralight {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-mono-light {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-mono-regular {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-mono-medium {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-mono-semibold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-mono-bold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-mono-thin-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: italic;
}

.ibm-plex-mono-extralight-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: italic;
}

.ibm-plex-mono-light-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: italic;
}

.ibm-plex-mono-regular-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex-mono-medium-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-style: italic;
}

.ibm-plex-mono-semibold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-style: italic;
}

.ibm-plex-mono-bold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: italic;
}



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

  h1{
    font-family: "League Gothic", sans-serif;

    font-weight: 100;
    font-style: normal;
  
      font-size: 152px;

  }

  .logo img{
    width: 20%;
    
  }
  .menu2{
    color: black;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-style: normal;
  font-weight: 100;
  font-size: 18px;
  text-transform: uppercase;
  }
  
  body {
    font-family: Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
  }
  
  /* HEADER */
  .header {
    height: 80px;
    padding: 0 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
  }

p{
  position: relative;
  font-size: 18px;
top: 30px;
}
   
  .left-scroll::-webkit-scrollbar, .left-scroll::-webkit-scrollbar-button { display: none; }
   .left-scroll::-webkit-scrollbar, .left-scroll::-webkit-scrollbar-button { display: none; }


  .nav a {
    margin-left: 20px;
    text-decoration: none;
    color: #000;
  }
  
  /* PAGE GRID */
  .page {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    font-style: normal;
  
 
          margin-top: 30px;
    display: grid;
    grid-template-columns:
      0px
      repeat(6, 290px)
      27px;
    column-gap: 25px;
    height: calc(100vh - 80px);
  }
  
  .second-scroll {
    grid-column: 2 / span 4;
    overflow-y: scroll;
    padding-right: 0px;
  }
  
  /* LEFT SCROLL (4 colonnes) */
  .left-scroll {
    grid-column: 2 / span 4;
    overflow-y: scroll;
    padding-right: 0px;
    margin-bottom: 25px;
  }

 
  .double-img{
 display: flex;
    grid-column: 2 / span 4;
    width: 49%;
    gap: 25px;
  }
  
  .left-scroll img,
  .left-scroll video {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 25px;
  }

  #petit{
    width: 30%;
  }


  #petit-p{
    width: 40%;
    height: 20%;
  }


  .portrait{
    display: flex;
    gap: 25px;

  }
  

  .second-scroll img {
    width: 20%;
    height: auto;
    margin-bottom: 25px;
  }
  
  /* RIGHT FIXED (2 colonnes) */
  .right-fixed {
    grid-column: 6 / span 2;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    padding-left: 0px;
  }
  
  /* TITRES */
  .right-fixed h1 {
    margin-bottom: 20px;
  }

  .subtitles{
    margin-top: -10px;
  }

  .grand{
    font-size:110px;

  }
  .tres-grand{
    font-size:56px;

  }

  .t-grand{
    font-size:66px;

  }



  .tt-grand{
    font-size:76px;

  }
  .subtitles h2 {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    margin-bottom: 5px;
  }
  
  .subtitles .right {
    margin-left: 330px;
    margin-top: -22px;
  }
  
  /* TEXTE */
  .right-fixed p {
    margin-top: 20px;
    line-height: 1.2;
    width: 360px;
  }

  .right-fixed h3 {
    font-size: 14px;
    color: black;
   
  
 

  }

  a{
    text-decoration: none;
  }
  
  .suivant{
position: absolute;
    display: flex;
   bottom: 6%;
    width: 360px;
    gap: 72px;

  }
  
  /* RESPONSIVE */
  @media (max-width: 1200px) {
    .page {
      grid-template-columns: 1fr;
      padding: 0 20px;
      overflow-y: auto;
    }
  
    .left-scroll,
    .right-fixed {
      grid-column: auto;
      position: static;
      height: auto;
      overflow: visible;
    }
  
    body {
      overflow: auto;
    }
  }