html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;  /* centre horizontalement */
  align-items: center;      /* centre verticalement */
  background: transparent;
}

#background-video {
  position: fixed;
  top: 0;
  left: 50%;
  height: 100vh;
  transform: translateX(-50%);
  object-fit: contain;
  z-index: -1;
}
.content {
  width: 33.33vw; /* 1/3 largeur par défaut (desktop) */
  text-align: center;
  color: white;
  z-index: 1;
  margin: 0 auto;
}

/* Sur petit écran (téléphone portrait) */
@media (max-width: 768px) {
  .content {
    width: 66.66vw; /* 2/3 de la largeur */
  }
}

.content h1 {
  margin: 0;
  font-size: 3vw;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  opacity: 1; /* 0 = totalement transparent, 1 = opaque */
}
.title-link {
  text-decoration: none; /* enlève le soulignement */
}

.title-link h1 {
  margin: 0;
  font-size: 3vw;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 0, 0, 0.65); /* rouge transparent */
  transition: opacity 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.title-link:hover h1 {
  opacity: 1; /* pleine opacité au survol */
  color: rgba(255, 0, 0, 1); /* rouge vif */
}