@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/*body*/
body, html {
    height: 100%;
    margin: clamp(0.03rem, 2.2vw, 0.09rem);
    padding: 0;
    overflow: hidden; /* si vraiment nécessaire */
    background-color:rgb(248, 248, 248)}

/* ============================== MAIN - PAGE ============================== */
.main {
    position: fixed;
    display: grid;
    grid-template-columns: 12% 81% 7%;
    width: 100%;
    height: 100%;
}
/* ----------------------------- MENU SECTION ----------------------------- */
.menu {border-right: 2px solid black;}
nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* ajuste à ta guise */
    padding-top: 0.5rem; /* ajuste à ta guise */
}
.nav-link {
    position: relative;
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Satoshi';font-weight: 400;
    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%;
}
.nav-link:hover,
.nav-link.active {font-family: 'Satoshi';font-weight: 700;}

/* ---------------------------- FOOTER SECTION ---------------------------- */
.foot {
    position: fixed;
    font-family: 'Satoshi';font-weight: 400;
    font-size: 8px;
    text-align: left;
    bottom: 5px;
    left: 5px;
}

/* ------------------------------ ARROW ICON ------------------------------ */
.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;}
/* ---------------------------- CENTER SECTION ---------------------------- */
.principal {
    position:relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;   
    grid-template-rows: 40% 60%;
    border-right: 2px solid black;
}
/* ----------- ACTIVE SECTION ----------- */
.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';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;
}
#js {
    height:auto;
    font-family: 'Satoshi';font-weight: 500;
    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';font-weight: 400;
    font-size: clamp(1.1rem, 2.2vw, 1.375rem); /* min ~20px, max ~22px */
    text-decoration: none;
    color: black;
}
#js #lien a{
    font-family: 'Satoshi';font-weight: 400;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: left; 
    color: #eab2c9;
    text-decoration-line: underline;   
}
#js #lien a:hover{
    font-family: 'Satoshi';font-weight: 400;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: left; 
    color: #eab2c9;
    text-shadow: 1px 1px 2px #eab2c9; 
    text-decoration-line: underline;   
}
/* ----------- HIDDEN SECTION ----------- */
.cacher {
    display: grid;
    height: 100%;   
}
text {
    font-family: 'Satoshi';font-weight: 400;
    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; 
}
.photocacher {
  height: auto;
  overflow: scroll;
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px;
  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;
}
/* ============================== COMMISSIONS - PAGE ============================== */
.masonry {
    column-count: 2;
    column-gap: 10px;
    }
.item {
  break-inside: avoid;
  margin-bottom: 4px;
  display: inline-block;
  width: 100%;
}
/* Décalages verticaux aléatoires pour effet de placement libre */
.item:nth-child(3n+1) { margin-top: 0px; }
.item:nth-child(3n+2) { margin-top: 60px; }
.item:nth-child(3n+3) { margin-top: 20px; }
.item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Largeurs variées pour casser la grille */
.item.wide  { width: 80%; }
.item.medium { width: 70%; }
.item.small  { width: 50%; }
figcaption {
  font-size: 11px;
  font-family: 'Satoshi';font-weight: 300;
  color: #111;
  margin-top: 6px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ============================== ABOUT - PAGE ============================== */
/*back-home*/
.back {
    border-right: 2px solid black;
    height: 100%;
  }
  .home {
    width: 100%;
  }
  svg {
    padding: 0.5rem;
  }
/* ---------------------------- RIGHT SECTION ---------------------------- */
.right{
    display: grid;
    grid-template-rows: 70% 30%;
    width: 100%;
    height: 100%;
  }
  .titre {
    position: relative;
    font-family: 'Satoshi';font-weight: 400;
    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';font-weight: 400;
    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';font-weight: 300;
    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';font-weight: 400;
    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;
      }   
      }