* {
  margin: 0;
}

a {
  text-decoration: none;
  color: black;
}

html {
  scroll-behavior: auto;
}

body {
  overflow-x: hidden;
}

/* grill */

.gr {
  display: none;
  opacity: 0;
  /* pas de transform ici : ça casse le position:absolute des titres us2p2… */
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.gr.is-shown {
  opacity: 1;
}

.gr.is-settled {
  transition: filter 0.45s ease;
}

/* EXPLORE : survol = mise en évidence (les autres passent en flou) */
body.is-exploring .gr.is-shown:not(.is-settled) {
  filter: blur(0);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;
}

body.is-exploring .us1.is-shown:not(.is-settled) {
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;
}

body.is-exploring .gr.is-shown.is-settled {
  filter: blur(0);
  transition: filter 0.45s ease;
}

body.is-exploring:has(.gr.is-shown:hover) .gr.is-shown {
  filter: blur(3px);
}

body.is-exploring:has(.gr.is-shown:hover) .gr.is-shown:hover {
  filter: blur(0);
}

.grill {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.grill.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.us1,
.us2,
.us3,
.us4,
.us5,
.us6 {
  overflow: hidden;
  position: relative;
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 40vh;
}

.us1 {
  background-color: black;
  grid-row: 6/12;
  grid-column: 1/16;
  /* même entrée douce que .sec-liste */
  transform: translateY(36px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.us1.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.us1.is-settled {
  transition: filter 0.45s ease;
}

.us1p1{
  font-family: 'Impact', sans-serif;
  color: white;
  position: absolute;
  top: 80%;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 4vw;
}

.us2 {
  background-color: black;
  grid-row: 1/6;
  grid-column: 1/8;
}

.us2p2{
  font-family: 'Impact', sans-serif;
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 4vw;
}

.us3 {
  background-color: black;
  grid-row: 1/6;
  grid-column: 8/16;
}

.us3p3{
  font-family: 'Impact', sans-serif;
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 4vw;
}

.us4 {
  background-color: black;
  grid-row: 6/12;
  grid-column: 1/16;
}

.us4p4{
  font-family: 'Impact', sans-serif;
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 4vw;
}

.us5 {
  background-color: black;
  grid-row: 1/7;
  grid-column: 1/9;
}

.us5p5{
  font-family: 'Impact', sans-serif;
  color: white;
  position: absolute;
  top: 77%;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 4vw;
}

.s3im1 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.us6 {
  background-color: black;
  grid-row: 1/7;
  grid-column: 9/16;
}

.us6p6{
  font-family: 'Impact', sans-serif;
  color: white;
  position: absolute;
  top: 77%;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 4vw;
}

.s3im2 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.us7 {
  background-color: black;
  grid-row: 6/12;
  grid-column: 1/16;
  overflow: hidden;
  position: relative;
}

.im1gr,
.s2im1,
.s2im2,
.s2im3,
.s3im1,
.s3im2 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.im1gr {
  object-position: center 75%;
}

.s2im1 {
  object-position: top;
}

.s2im2 {
  object-position: center bottom;
}

.s2im3 {
  object-position: center 15%;
}




/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999999999;
  height: 5vh;
  width: 100%;
  box-sizing: border-box;
  /* inset contenu = ancien 97vw + margin-left 1vw (droite ~2vw) */
  padding-left: 1vw;
  padding-right: 2vw;
  font-family: "inter";
  font-weight: 300;
  font-size: 12px;
  display: flex;
  gap: 28px;
  margin-left: 0;
  background-color: white;
  align-items: center;
}


.h3,
.h2,
.h1 {
  text-align: left;
}

.yaw{
  margin-left: 10px;
  margin-right: auto;
}

/* section */

section {
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
}

.sec-liste {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: white;
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  content-visibility: visible;
}

.sec-liste.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sec-liste.is-settled {
  transition: none;
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
}

.sec2 {
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(15, 1fr);
  gap: 20px;
  margin: 0px;
  height: 94%;
  width: 96%;
}

/* sec3 n'utilise que les lignes 1 à 6 (us5 et us6 sont en grid-row: 1/6),
   donc on réduit le nombre de lignes de la grille à 6 au lieu de 11.
   La hauteur de ligne (donc la taille des images à l'intérieur) reste
   identique car on réduit aussi proportionnellement la hauteur du conteneur. */
.sec3 {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(15, 1fr);
  gap: 20px;
  margin: 0px;
  height: 94%;
  width: 96%;
}

/* La section qui contient sec3 (2e .sec-liste) est réduite pour ne plus
   laisser d'espace vide en dessous des images us5/us6 */
.sec-liste-compact {
  height: 50vh;
}


.sec1 {
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(15, 1fr);
  gap: 20px;
  margin: 0px;
  height: 94%;
  width: 96%;
}


.s1h1 {
  grid-column: 1 / 10;
  grid-row: 2 / 6;
  font-family: 'Impact', sans-serif;
  font-weight: 300;
  font-size: 16vw;
  line-height: 0.80;
  align-self: end;
  justify-self: start;
  margin: 0;
  padding-bottom: 2vh;
}



.s1h2 {
  grid-column: 1/4;
  grid-row: 11/12;
 font-family: 'Druk Trial', sans-serif;
  font-weight: 600;
  font-size: 2vw;
  display: flex;
  justify-content: start;
  align-items: end;
  color: white;
  position: relative;
  z-index: 9999999999;
  margin-left: 6px;
}

.s1p1 {
  font-family: 'Druk Trial', 'Impact', sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  grid-column: 15/16;
  grid-row: 5/6;
  margin-left: -13px;
  padding-bottom: 2vh;
  display: flex;
  justify-content: end;
  align-items: end;
  cursor: pointer;
  transform-origin: right bottom;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease, opacity 0.2s ease;
  animation: s1p1-blink 0.5s steps(1, end) infinite, s1p1-pulse 1.4s ease-in-out infinite;
}

.s1p1:hover {
  animation-play-state: paused;
  color: red;
  transform: scale(1.28) skewX(-8deg);
}

.s1p1.is-swapping {
  opacity: 0;
}

.s1p1.is-bursting {
  animation: s1p1-burst 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97), s1p1-blink 0.5s steps(1, end) infinite;
}

@keyframes s1p1-blink {
  0%,
  49% {
    color: red;
  }
  50%,
  100% {
    color: black;
  }
}

@keyframes s1p1-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes s1p1-burst {
  0% {
    transform: scale(1) rotate(0deg);
  }
  22% {
    transform: scale(1.7) rotate(-8deg);
  }
  48% {
    transform: scale(0.82) rotate(5deg);
  }
  72% {
    transform: scale(1.18) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.projects-carousel {
  grid-row: 6/12;
  grid-column: 1/16;
  overflow: hidden;
  scrollbar-width: none;
  padding: 10px 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.projects-carousel.is-dragging {
  cursor: grabbing;
}

.projects-carousel::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: 20px;
  min-height: 100%;
  width: max-content;
  will-change: transform;
}

.project-card {
  flex: 0 0 31vw;
  height: 49vh;
  background-color: black;
  border-radius: 0;
  border: 1px solid #11111100;
  cursor: pointer;
}


.pj1,
.pj2,
.pj3,
.pj4,
.pj5,
.pj6{
  background-color: white;
  border: solid 10 px black;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}




.aff1{
  width: 75%;
  height: 75%;
  object-fit: cover;
}

.secc1img1 {
  grid-row: 5/12;
  grid-column: 1/16;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% 30%;

}

/* project-card */


.pj1img1{
  width: 95%;
  height: 90%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  
  
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
   
  }
}

.pj2img2{
  width: 90%;
  height: 90%;
  object-fit: fill;
  object-position: center;
  border-radius: 10px;
  filter: brightness(0);
  
  
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
   
  }
}
.pj3img3{
  width: 95%;
  height: 95%;
  object-fit: fill;
  object-position: center;
  border-radius: 10px;
  filter: brightness(0);
  
  
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
   
  }
}

.pj4img4{
  width: 95%;
  height: 95%;
  object-fit: fill;
  object-position: center;
  border-radius: 10px;
  
  
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
   
  }
}

.pj5img5{
  width: 95%;
  height: 95%;
  object-fit: fill;
  object-position: center;
  border-radius: 10px;
  
  
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
   
  }
}

.pj6img6{
  width: 75%;
  height: 95%;
  object-fit: fill;
  object-position: center;
  border-radius: 10px;
  
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
   
  }
}