@font-face {
    font-family: 'Satoshi-Light';
    src: url('fonts/Satoshi-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: auto;
    font-style: normal;
  }
  @font-face {
    font-family: 'Satoshi-Regular';
    src: url('fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: auto;
    font-style: normal;
  }
  @font-face {
    font-family: 'Satoshi-Medium';
    src: url('fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: auto;
    font-style: normal;
  }
  @font-face {
    font-family: 'Satoshi-Bold';
    src: url('fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: auto;
    font-style: normal;
  }
  @font-face {
    font-family: 'Satoshi-Black';
    src: url('fonts/Satoshi-Black.woff2') format('woff2');
    font-weight: 700;
    font-display: auto;
    font-style: normal;
  }
/*body*/
body, html {
    height: 100%;
    margin: clamp(0.03rem, 2.2vw, 0.09rem);
    padding: 0;
    overflow: hidden; /* si vraiment nécessaire */}
/*MAIN-page*/
/*main*/
.main {
    position: fixed;
    display: grid;
    grid-template-columns: 12% 81% 7%;
    width: 100%;
    height: 100%;
}
/*left*/
.index {
    border-right: 2px solid black;
} 
h1 {
    position: relative;
    font-family: Satoshi-Regular;
    color: black;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    text-transform: uppercase;
    text-decoration: none; 
    align-items: left;
    justify-content: left;
    /* ligne*/
    display: block;
    border-bottom: 2px solid black;
    margin-left: 3%;
    margin-right: 3%;
}
h1 a {
    font-family: Satoshi-Regular;
    color: black;
    text-decoration: none; 
    } 
h1 a:hover {
    font-family: Satoshi-Bold;
    }

#menu h1 a {
    font-family: Satoshi-Bold;
    color: black;
    text-decoration: none;
    }
/*footer*/
.foot {
    position: fixed;
    font-family: Satoshi-Regular;
    font-size: 8px;
    text-align: left;
    bottom: 5px;
    left: 5px;
}
/*principal*/
.principal {
    position:relative;
    height: 100%;
    overflow: auto;
    grid-template-rows: 40% 60%;
    border-right: 2px solid black;
    grid-column-gap: 20px;
}
.arrow {
    position: fixed;
    position: fixed;
    display: flex;
    right: 8%;
    bottom: 10px;
    cursor: pointer;
}
.arrow:hover {
    position: fixed;
    stroke-width: 2px;
    filter: drop-shadow(0px 0px 30px rgba(234, 178, 201));
}
#top {
    width: 60px;
}
/*line*/
.top {
    width: 98%;
    height: auto;
    border-bottom: 2px solid black;
    text-align: left;
    vertical-align: middle;
    margin-left: 15px;
}
p::first-line { 
    font-family:Satoshi-Light;
    font-weight: 300;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    color: rgb(166, 166, 166);
    text-transform: uppercase;
    align-items: left;
    justify-content: left;
}
/*projets*/
#js {
    height:auto;
    font-family: Satoshi-Medium;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    line-height: 1;
    text-align: left; 
    margin-top: 5px;
}
#js a {
    text-decoration: none;
    color: black; 
}
#js a:hover {
    font-family: Satoshi-Regular;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    text-decoration: none;
    color: black;
}
#js #lien a{
    font-family: Satoshi-Regular;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: left; 
    color: #eab2c9;
    text-decoration-line: underline;   
}
#js #lien a:hover{
    font-family: Satoshi-Regular;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: left; 
    color: #eab2c9;
    text-shadow: 1px 1px 2px #eab2c9; 
    text-decoration-line: underline;   
}
/*cacher*/
.cacher {
    display: grid;
    height: 100%;   
}
text {
    font-family: Satoshi-Regular;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1;
}
.imagecacher {
    height: auto;
    overflow: scroll; 
    position: relative;
    display: grid;
    text-align: center;
    margin-right:10px; 
}
.imagecacher .image {
    width: auto;
    height: auto;  
}
.imagecacher2 {
    height: auto;
    overflow: scroll; 
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
    text-align: center;
    margin-right:10px; 
}
#image {
    display: flex;
justify-content: center;
margin-top: 10px;
}
/*INFO-page*/
/*back-home*/
.back {
    border-right: 2px solid black;
    height: 100%;
  }
  .home {
    width: 100%;
  }
  svg {
    padding: 0.5rem;
  }
  /*contenu-droit*/
.right{
    display: grid;
    grid-template-rows: 70% 30%;
    width: 100%;
    height: 100%;
  }
  .titre {
    position: relative;
    font-family: Satoshi-Regular;
    color: black;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    display: flex;
    align-items: left;
    justify-content: left;
    border-bottom: 2px solid black; 
    margin-right: 10px; 
  } 
  .about{
    position: relative;
    padding: 1rem;
    height: 100%; 
   }
  .column {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 100%;
    justify-content: center;
    gap: 1rem;
    position: relative;
    top: 20px;
    margin: 0.1rem;
    }
    .column h1 {
    position: relative;
    font-family: Satoshi-Regular;
    font-weight: 400;
    color: black;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    display: flex;
    justify-content: left;
   } 
   .column h2 {
    position: relative;
    font-family: Satoshi-Light;
    font-weight: 300;
    color: rgb(166, 166, 166);
    font-size: clamp(0.6rem, 1.5vw, 0.875rem);
    display: flex;
    justify-content: left;
   } 
  .contact{
    position: relative;
    margin-left: 10px; 
   }
   p {
    font-family: Satoshi-Regular;
    color: black;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
   }
  
@media (max-width: 1200px) {
body, html {
    height: auto;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* pour fluidité sur iOS */
}    
.main {
    position: static;
  display: block;
  width: 100%;
}
.index {
    border: none;
      }
 /*TOP MENU (Work, Research page, Graphic design) */
.index:first-of-type {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.5rem 0;
    z-index: 1000;
  }
.index:first-of-type h1 {
    font-family: Satoshi-Light;
    font-weight: 300;
    text-transform: none;
    border: none;
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin: 0;
  }
.index:first-of-type h1 a {
    text-decoration: none;
    color: black;
  }
  /* BOTTOM MENU (Views + About) */
.event, .about {
  position: fixed;
  bottom: 0;
  width: 50%;
  text-align: center;
  padding: 0.5rem 0;
  z-index: 1000;
}
.event {
    left: 0;
  }
.about {
    right: 0;
  }
.event h1, .about h1 {
    font-family: Satoshi-Light;
    font-weight: 300;
    text-transform: none;
    border: none;
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin: 0;
  }
.event h1 a, .about h1 a {
    text-decoration: none;
    color: black;
  }  
/*principal*/
.principal {
    position: relative;
    border: none;
    top: 1.5rem; /* espace pour menu du haut */
    bottom: 3.8rem; /* espace pour menu du bas */
    left: 0;
    right: 0;
    overflow-y:auto;
    overflow-x: hidden;
    margin-left: -1%; /* ou -10px selon ton besoin */
    width: 101%; 
  }
p::first-line { 
    font-family:Satoshi-Regular;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    color: rgb(166, 166, 166);
    gap: 0;
    text-transform: uppercase;
    align-items: left;
    justify-content: left;
}
hr {
    size: 2px solid black;
    }
.arrow {
    display: none;
      }   
      }

      @media (max-width: 700px) {     
      .top {
        width: 98%;
        height: auto;
        border: none;
    }  
}