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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* pas de scroll */
  background: white;
  color: black;
  font-family: "NHG"/*, "Helvetica Neue", Arial, sans-serif*/;
  -webkit-user-select: none;
  user-select: none;
}

#carousel {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* évite les soucis de barre d'adresse mobile */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Ajoutée en JS une fois la page prête : déclenche le fondu d'entrée.
   Retirée juste avant de quitter la page (clic sur le titre ou ABOUT)
   pour un fondu de sortie symétrique. */
#carousel.is-visible {
  opacity: 1;
}

/* Zones cliquables invisibles, gauche / droite */
#zone-prev,
#zone-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 10;
  cursor: pointer;
}

#zone-prev {
  left: 0;
  cursor: w-resize;
}

#zone-next {
  right: 0;
  cursor: e-resize;
}

/* En-tête : titre (à gauche) + lien About (à droite), en haut à droite */
#site-header {
  position: absolute;
  top: 3.6vh;
  right: 2.2vw;
  z-index: 20; /* toujours cliquable, au-dessus des zones prev/next */
  display: flex;
  gap: 24px;
}

#site-header a {
  color: black;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}

#site-header a:hover {
  color: black;
}

/* Sur un fond personnalisé sombre (cf. champ "fond" + "texteClair" dans
   script.js), le titre, "ABOUT" et le compteur passent en blanc pour
   rester lisibles. La légende garde ses propres couleurs (ses segments
   ont toujours leur propre fond, noir ou gris, donc restent lisibles
   dans tous les cas). */
body.texte-clair #site-header a,
body.texte-clair #site-header a:hover,
body.texte-clair #counter {
  color: #ffffff;
}

/* Conteneur plein écran, centre le cadre horizontalement et verticalement */
#image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Le cadre est dimensionné en JS (px) pour correspondre exactement
   au rectangle visuel de l'image, rotation comprise. La légende s'y
   positionne donc toujours au plus près de l'image affichée. */
#frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#current-image,
#current-video {
  display: block;
  transform-origin: center center;
  pointer-events: none; /* les clics passent à travers vers les zones prev/next */
}

#current-video {
  display: none; /* affichée en JS uniquement quand le média courant est une vidéo */
  object-fit: contain;
}

/* #bottom-info regroupe légende + compteur. Sur desktop, chacun garde sa
   propre position (légende bas-gauche, compteur bas-droite) ; sur mobile,
   le regroupement permet de les empiler proprement (cf. media query). */
#bottom-info {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Légende : position fixe sur la page, en 3 segments colorés.
   Desktop : bas gauche. Mobile : centrée horizontalement. */
#caption {
  position: absolute;
  bottom: 3.6vh;
  left: 2.2vw;
  display: flex;
  flex-wrap: wrap;
  max-width: 60vw;
  pointer-events: none;
}

#caption span {
  display: inline-block;
  padding: 1px 4px;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}

#caption .caption-annee {
  background: #000000;
  color: #ffffff;
}

#caption .caption-infos {
  background: #E6E6E6; /* gris 15% */
  color: #000000;
}

#caption .caption-collab {
  font-size: 15px;
  background: #b3b3b3; /* gris 30% */
  color: #000000;
}

/* Quand "collab" est un vrai lien (cf. "collabLien" dans script.js) :
   on le rend cliquable (le reste de la légende laisse les clics passer
   à travers, vers les zones prev/next) et on change ses couleurs au
   survol pour signaler l'interactivité. */
#caption a.caption-collab {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}

#caption a.caption-collab:hover {
  background: #000000;
  color: #ffffff;
}

/* Compteur */
#counter {
  position: absolute;
  bottom: 3.6vh;
  right: 2.2vw;
  color: black;
  font-size: 15px;
  /*font-variant-numeric: tabular-nums;*/
  pointer-events: none;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  /* Header centré horizontalement, épinglé en haut */
  #site-header {
    left: 0;
    right: 0;
    top: 2.5vh;
    justify-content: center;
  }

  /* Légende et compteur sont maintenant positionnés indépendamment
     l'un de l'autre (chacun en absolute, ancré à sa propre hauteur) :
     la légende peut ainsi faire 1 ou 2 lignes sans jamais faire bouger
     le compteur, qui reste toujours à la même place. */
  #caption {
    position: absolute;
    left: 50%;
    bottom: 3vh;
    transform: translateX(-50%);
    justify-content: center;
    max-width: 94vw;
  }

  #caption span {
    font-size: 11px;
    padding: 5px 8px;
  }

  #caption span.wrap {
    white-space: normal;
  }

  #caption .caption-collab {
  font-size: 11px;
}

  #counter {
    position: absolute;
    left: 50%;
    bottom: 9vh; /* position fixe, indépendante de la hauteur de la légende */
    transform: translateX(-50%);
    font-size: 11px;
    text-align: center;
  }
}