:root{
  --gap: clamp(16px, 2vw, 24px);


  --left-min: 240px;
  --left-ideal: 26vw;
  --left-max: 380px;


  --thumbs-min: 90px;   
  --thumbs-ideal: 12vw; 
  --thumbs-max: 160px;  
}

* { box-sizing: border-box; }

.project__container{ 
  width: 100%;
  margin: 0 auto;
  padding-inline: 24px;

  padding-top: clamp(0px, 2vw, 12px);
  padding-bottom: clamp(16px, 4vw, 48px);

  display: grid;
  grid-template-columns: 1fr;  
  row-gap: var(--gap);
}


@media (min-width: 960px){
  .project__container{
    grid-template-columns: clamp(var(--left-min), var(--left-ideal), var(--left-max)) 1fr;
    column-gap: 24px;
    align-items: start;
  }
}


.project__sidebar{ 
  display: grid;

}

.project__cover{
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.project__cover img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  margin-bottom:0.2rem;

}

.project__meta{
  display: grid;
  grid-template-columns: 80px 1fr; 
  column-gap: .5rem;
  align-items: baseline;
  color: #444;
  margin-top: .3rem;
  margin-bottom: 0;
}
.project__meta-label{
  padding: .1rem .35rem;
  font-size: .7rem;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid #ddd;  
  border-radius: 999px;
  opacity: .85;
  font-weight: 600;
  margin-top:4px;
  background: #f9f9f9; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}


.project__meta a {
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
}



.project__gallery{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--gap);
  border-left: 1px solid #eee;
  padding: 4px; 
  border-radius: 8px;
  background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}

@media (min-width: 960px){
  .project__gallery{
    grid-template-columns: 1fr clamp(var(--thumbs-min), var(--thumbs-ideal), var(--thumbs-max));
    column-gap: 8px; /* réduit (avant 16px) */
  }
}


.project__figure{
  margin: 0;
}
.project__figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;

}
.project__figcaption{
  font-size: .9rem;
  color: #555;
  margin-top: .4rem;
}


.project__video{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 8px;
}
.project__video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


.gallery__thumbs{
  display: grid;
  gap: clamp(6px, 1vw, 10px);
  align-content: start;
  max-height: 80vh;
  overflow: auto;
  padding-right: 2px;

}

@media (max-width: 959.98px){
  .gallery__thumbs{
    grid-auto-flow: column;
    grid-auto-columns: minmax(60px, 15%);
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
  }
}

@media (min-width: 960px){
  .gallery__thumbs{
    max-height: 100%; 
  }
  .project__gallery{
    align-items: start;
  }
  .project__gallery > .project__figure,
  .project__gallery > .gallery__thumbs{
    align-self: start;

  }
}

button.thumb{
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
button.thumb[aria-current="true"]{
  opacity: 0.7;
}

button.thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.thumb__placeholder{
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: .7rem;
  opacity: .8;

}


@media (min-width: 960px){
  .project__gallery{ 
    --viewer-h: auto;         
    align-items: start;
  }
  .gallery__thumbs{
    max-height: var(--viewer-h);
    overflow: auto;
    min-height: 0;
    align-self: start;
  }
}


.gallery__thumbs {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}
.gallery__thumbs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}