:root {
  --vbc-paper: #ffffff;
  --vbc-ink: #000000;
}

html, body {
  margin: 0;
  background: var(--vbc-paper);
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar { display: none; }

body {
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--vbc-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ----------
   Header GÉNÉRAL, identique sur toutes les pages : la nav est calée sur la
   colonne d'image de la page « Expositions » — premier onglet à son bord
   gauche (36,32 % de la fenêtre), dernier onglet à son bord droit (81,4 %),
   soit une largeur de 45,07 %. Le logo ferme la ligne, à 60px du bord.
   Le padding horizontal est à 0 pour que ces pourcentages se calculent sur
   la fenêtre entière et non sur une boîte déjà rognée. */

.vbc-header {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  padding: 36px 0;
}

.vbc-nav {
  display: flex;
  margin-left: 36.32%;
  width: 45.07%;
  justify-content: space-between;
}

.vbc-logo {
  margin-left: auto;
  margin-right: 60px;
}

.vbc-nav a {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

/* Seule la graisse distingue le logo du reste de la ligne. */
.vbc-logo {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

/* ---------- Bannière d'accueil ----------
   Une seule image, de sous le header jusqu'à 60px du bas (la même valeur
   que les marges latérales), et le cartel posé dans son coin bas gauche.
   Plus aucun texte sous l'image. */

.vbc-page {
  height: 100vh;
  overflow: hidden;
}

.vbc-plate {
  position: relative;
  margin: 0 60px;
}

/* Le cadre reste un 16:9 (1320 × 744 à 1440 de large) quelle que soit
   l'image ; c'est l'image qui s'y recadre.
   40% : la toile est un 4:3, le passage en 16:9 lui retire un quart de sa
   hauteur. Centré, le haut de la chevelure était coupé — le cadrage remonte
   pour garder la tête entière (avec une petite marge), tout en montrant
   plus du buste et du collier en bas. */
.vbc-plate img {
  display: block;
  width: 100%;
  height: calc(100vh - 156px); /* 96 de header + 60 de marge basse */
  object-fit: cover;
  object-position: center 40%;
}

/* Voile sombre en bas de l'image. Sans lui, le blanc du cartel tombe à
   3,9:1 sur le béton du sol (luminance 132) — sous le seuil de lisibilité,
   et aucun cadrage ne fait mieux : le sol est clair partout. Le dégradé est
   assez progressif pour ne pas se lire comme un bandeau. */
.vbc-plate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

/* Cartel dans le coin bas gauche de l'image, en blanc. */
.vbc-plate__caption {
  position: absolute;
  left: 34px;
  bottom: 34px;
  z-index: 1;
  color: #ffffff;
}

.vbc-plate__artist,
.vbc-plate__title {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 26.4px;
}

.vbc-plate__title {
  font-style: italic;
}

.vbc-plate__dates {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* Flèches de navigation, coin bas droit, sur la même ligne de base que le
   cartel en bas à gauche. */
.vbc-plate__nav {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ffffff;
}

.vbc-plate__arrow {
  display: flex;
}