* {
  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 {
  display: inline-flex;
  align-items: center;
  color: black;
  text-decoration: none;
  font-size: 14.5px;
  cursor: pointer;
  padding: 3px 4px 0px 4px;
  border: 1px solid transparent; /* réserve l'espace du contour pour éviter un saut au survol */
}

#site-header a:hover {
  color: black;
  border-color: #000000; /* même contour qu'autour des segments de légende */
}

/* Sur un fond personnalisé sombre (cf. champ "fond" + "texteClair" dans
   script.js), tout ce qui est noir (texte et contours) passe en blanc :
   compteur, et les segments de la légende (leur contour est toujours
   visible, donc toujours inversé ici). */
body.texte-clair #counter,
body.texte-clair #caption span,
body.texte-clair #caption a.caption-collab {
  color: #ffffff;
  border-color: #ffffff;
}

/* Le titre et "ABOUT" passent en blanc eux aussi, mais leur contour
   reste transparent au repos (il ne doit apparaître qu'au survol) :
   on ne touche donc PAS border-color ici, seulement au survol plus bas. */
body.texte-clair #site-header a {
  color: #ffffff;
}

body.texte-clair #site-header a:hover {
  color: #ffffff;
  border-color: #ffffff;
}

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

/* 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: 15; /* au-dessus de #zone-prev/#zone-next (z-index: 10), sinon leurs clics interceptent tout, y compris le lien de collab */
}

/* 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;
}

/* Segments de légende : contour, fond transparent, texte de la même
   couleur que le contour. Sur un fond de page personnalisé sombre
   (cf. "texteClair" dans script.js), tout passe en blanc à la place
   du noir (cf. règles "body.texte-clair" plus bas).
   "inline-flex" + "align-items: center" au lieu de "inline-block" +
   line-height : centre vraiment le texte verticalement, indépendamment
   des métriques propres à la police (line-height seul peut décaler
   le texte selon la fonte utilisée). */
#caption span,
#caption a.caption-collab {
  display: inline-flex;
  align-items: center;
  padding: 3px 4px 0px 4px;
  font-size: 14.5px;
  line-height: 1.3;
  white-space: nowrap;
  background: transparent;
  color: #000000;
  border: 1px solid #000000;
}

/* Fusion des contours entre segments adjacents : sans ce chevauchement
   d'1px, deux bordures côte à côte s'additionnent visuellement (2px au
   lieu d'1px à la jonction). */
#caption span:not(:first-child),
#caption a.caption-collab:not(:first-child) {
  margin-left: -1px;
}

/* 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 inverse ses couleurs au
   survol (contour → rempli) pour signaler l'interactivité. */
#caption a.caption-collab {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}

#caption a.caption-collab:hover {
  position: relative; /* passe au-dessus du segment voisin, pour que son contour ne soit pas coupé par le chevauchement */
  z-index: 1;
  background: #000000;
  color: #ffffff;
}

/* Compteur */
#counter {
  position: absolute;
  bottom: 3.6vh;
  right: 2.2vw;
  color: black;
  font-size: 14.5px;
  padding: 3px 4px 0px 4px;
  border: 1px solid #000000; /* même contour qu'autour des segments de légende */
  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;
  }

  /* Compteur + légende forment maintenant un seul bloc empilé, ancré en
     bas de l'écran : le compteur suit toujours directement le dernier
     segment de la légende, sans espace, quel que soit le nombre de
     segments affichés (2 avec "collab", 3 sans).
     Note : ici on fixe chaque côté (top/right/bottom/left) séparément
     plutôt que d'utiliser le raccourci "inset" — un raccourci déclaré
     après des valeurs individuelles écraserait ces valeurs (c'est ce
     qui causait le bug de positionnement corrigé précédemment). */
  #bottom-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    width: 94vw;
  }

  /* La légende elle-même empile ses segments (année en haut, infos au
     centre, collab en bas) au lieu de les mettre en ligne comme sur
     desktop. */
  #caption {
    position: static;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100%;
  }

  #caption span,
  #caption a.caption-collab {
    font-size: 14.5px;
    padding: 3px 4px 0px 4px;
    white-space: normal; /* le texte peut s'enrouler sur plusieurs lignes dans son propre bloc plutôt que déborder */
    max-width: 94vw;
    text-align: center;
  }

  /* Fusion des contours à la verticale (au lieu de l'horizontale sur
     desktop) : chevauchement d'1px entre segments empilés pour éviter
     un contour doublé à chaque jonction. */
  #caption span:not(:first-child),
  #caption a.caption-collab:not(:first-child) {
    margin-left: 0; /* annule le chevauchement horizontal utilisé sur desktop */
    margin-top: -1px;
  }

  /* Le compteur suit directement le dernier segment de la légende :
     même technique de chevauchement d'1px pour fusionner les contours,
     sans laisser d'espace entre les deux blocs. */
  #counter {
    position: static;
    margin-top: -1px;
    font-size: 14.5px;
    text-align: center;
  }
}