@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: auto;
  width: 100%;
  margin: clamp(0.03rem, 2.2vw, 0.09rem);
  padding: 0;
  overflow: auto;
}
/*main*/
.main {
  position: static;
  display: grid;
  grid-template-columns: 10% 90%;
  width: 100%;
  height: 100%;
}
/*footer*/
.foot {
  position: fixed;
  font-family: Satoshi-Regular;
  font-size: 8px;
  text-align: left;
  bottom: 5px;
  left: 5px;
}
/*arrow*/
.back {
  border-right: 2px solid black;
  height: 100%;
}
.arrow {
  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-Medium;
  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;

  }
 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;
 } 
 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: scroll;
  -webkit-overflow-scrolling: touch; /* pour fluidité sur iOS */
}    
.main {
  position: relative;
  display: grid;
  grid-template-columns: 10% 90%;
  width: 100%;
  height: auto;
}
  /*contenu-droit*/
.right{
  display: grid;
  grid-template-rows: 80% 20%;
  width: 100%;
  height: 100%;
}
.column {
  display: block;
  width: 100%;
  height: 100%;
  justify-content: center;
  top: 20px;
  margin: 0.1rem;
  }
.arrow {
  width: 100%;
}
svg {
  padding: 0.2rem;
}  
}