* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  background: white;
}
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
body {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400; 
}

/* desktop / par défaut */
/* colonne img */
.image-column {
  position: absolute; 
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 100vh;      
  overflow: hidden;
  z-index: 5;
}
.image-stack {
  display: flex;
  flex-direction: column;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform; 
}
.image-stack a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  margin-bottom: 10px; /* gap entre images */
}
.image-stack img {
  width: 100%;
  display: block;
}

/* txt overlay */
.overlay {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100%;
  color: black;
  font-size: 14px;
  z-index: 20;
}

/* top-left et menu */
.top-left {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
  transition: color 0.3s ease;
  z-index: 20;
}
.top-left:hover {
  color: #ccc;
  text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 10px #aaa;
  transition: text-shadow 0.3s, color 0.3s;
}
.top-left-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-top: 5px;
}
.top-left.open .top-left-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.top-left-menu a, .top-left-menu span { color: black; font-size: 14px; text-decoration: none; user-select: none; }

/* top-right, middle, lang (desktop defaults) */
.top-right {
  position: absolute;
  top: 10px;
  left: 19%;
  text-align: left;
  z-index: 20;
}
.middle {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  display: flex;
  gap: 4rem;
  z-index: 30;
  pointer-events: auto;
  flex-wrap: nowrap; /* rester sur une ligne */
}
.middle a { color: black; text-decoration: none; transition: opacity 0.2s, transform 0.2s; cursor: pointer; }
.middle a:hover { opacity: 0.6; transform: scale(1.1); }

.lang {
  position: absolute;
  top: 50%;
  right: 1.5%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 20;
}

/* legend txt project (desktop: à droite de la colonne image) */
.legend {
  position: absolute;
  top: 10px;
  left: calc(50% + 20% + 20px);
  font-size: 14px;
  color: black;
  max-width: 25%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 10;
}
.legend.visible { opacity: 1; }

/* project nav (desktop) */
.project-nav {
  position: absolute;
  top: 50%;
  left: calc(50% + 20% + 20px);
  transform: translateY(-50%);
  display: flex;
  gap: 1.5rem;
  font-size: 18px;
  font-weight: normal;
  z-index: 10;
  pointer-events: auto;
}

.project-nav a { color: black; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, opacity 0.3s ease; }
.project-nav a:hover { transform: scale(1.2); opacity: 0.6; }

/* ici iPad Mini / Air */
@media (min-width: 768px) and (max-width: 834px) {
/* images plus grandes */
  .image-column { width: 80%; height: 100vh; left: 50%; transform: translateX(-50%); }

/* augmenter la typo pour iPad */
  .overlay,
  .top-left,
  .top-left-menu a,
  .middle,
  .lang,
  .top-right,
  .legend,
  .project-nav { font-size: 16px; }

  .top-right { position: absolute; top: 80px; left: 10px; text-align: left; }

/* middle : aligné à gauche*/
  .middle {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    flex-direction: row;
    gap: 1rem;
    flex-wrap: nowrap;
  }

/* project-nav et lang alignés sous middle */
  .project-nav { position: absolute; top: calc(50% + 2.5rem); left: 10px; transform: none; gap: 1rem; }
  .lang { position: absolute; top: calc(50% + 5rem); left: 10px; transform: none; }

  .legend {
    position: fixed;
    bottom: 20px;
    left: 10px;
    max-width: 90%;
    font-size: 16px;
    z-index: 100;
  }
}

/* ici min 835px / max 1024px)
   comme desktop mais plus large image */
@media (min-width: 835px) and (max-width: 1024px) {
  .image-column { width: 60%; height: 100vh; left: 50%; transform: translateX(-50%); }

/* légère augmentation de la typo par rapport au desktop */
  .overlay,
  .top-left,
  .top-left-menu a,
  .middle,
  .lang,
  .top-right,
  .legend,
  .project-nav { font-size: 15px; }

  .legend {
    position: absolute;
    top: 10px;
    left: calc(50% + 20% + 20px);
    font-size: 14px;
    max-width: 25%;
  }
}

/* ici max 767px */
@media (max-width: 767px) {
  .image-column { width: 80%; height: 100vh; left: 50%; transform: translateX(-50%); }

  .overlay { width: 100%; }

/* txt plus petit */
  .overlay,
  .top-left,
  .top-left-menu a,
  .middle,
  .lang,
  .top-right,
  .legend,
  .project-nav { font-size: 14px; }

  .middle-bar {
  position: absolute;
  top: 55%;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between; 
  align-items: flex-start;
  gap: 1.2rem;
  }

  .middle {
    flex: 1;
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lang {
    flex-shrink: 0;
  }

  .top-right { position: absolute; top: 60px; left: 10px; text-align: left; font-size: 14px; }

  .project-nav { position: absolute; top: calc(55% + 2.5rem); left: 10px; transform: none; display:flex; gap:1rem; }

  .legend {
    position: fixed;
    bottom: 15px;
    left: 10px;
    max-width: 90%;
    font-size: 14px;
    z-index: 100;
  }
}

/* max 480px) */
@media (max-width: 480px) {
  .image-column { width: 80%; }

  .overlay,
  .top-left,
  .top-left-menu a,
  .middle,
  .lang,
  .top-right,
  .legend,
  .project-nav { font-size: 14px; }

  .legend { bottom: 10px; left: 10px; font-size: 14px; }
}

@media (max-width: 834px) {
  .legend {
    top: auto; 
    bottom: 20px;
    left: 10px;
    max-width: 90%;
    position: fixed;
  }
   .middle {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
  }

  .lang {
    margin-left: auto;
    text-align: right;
  }

   .top-bar {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
  }

/* espace entre eux */
  .arrows,
  .close {
    margin-left: 10px; 
  }

  .top-right { 
    margin-left: auto; 
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .middle span {
    max-width: 40%;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

.top-bar {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    z-index: 30;
  }

  .top-left {
    position: relative; 
  }

  .project-nav {
    position: relative; 
    left: auto;
    right: 10px;
    transform: none;
    display: flex;
    /* espace entre les flèches et la croix */
    gap: 8px; 
    padding: 0px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lang,
  .project-nav {
    display: none !important;
  }
}

/* ombre portée blanche pour txt */
/* {
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.6);
}

/* lang cliquable sur mobile */
@media (max-width: 767px) {
  .lang {
    z-index: 50 !important;
    pointer-events: auto !important;
  }
}

.imcollective-link {
  text-decoration: none;       /* enlève le soulignement */
  color: inherit;              /* garde la couleur du texte environnant */
  transition: transform 0.2s;  /* effet de transition fluide */
  display: inline-block;       /* nécessaire pour que transform fonctionne */
}

.imcollective-link:hover {
  transform: scale(1.1);       /* agrandit légèrement au survol */
}

.video-wrapper video {
  width: 100%;
  height: auto;
  cursor: pointer;
  display: block;
}

/* overlay en plein écran */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: none; /* caché par défaut */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.video-overlay video {
  max-width: 90%;
  max-height: 90%;
}

.close-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 2rem;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
}