/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
@font-face {
  font-family: 'crepitus-monogram';
  src: url('fonts/Crepitus-monogram.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corps et fond */
html, body {
  height: 100%;
  width: 100%;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  font-family: Consolas, 'Courier New', monospace;
}

/* Header fixé en haut */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  z-index: 100;
  font-family: Consolas, 'Courier New', monospace;
}

/* Branding : nom + subtitle sur la même ligne */
.branding {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Nom principal */
.name {
  font-family: 'crepitus-monogram', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
}

/* Sous-titre */
.subtitle {
  font-weight: normal;
  font-size: 0.95rem;
  text-transform: lowercase;
  opacity: 0.7;
  color: white;
  letter-spacing: 1px;
}

/* Liens nav */
nav a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  font-weight: bold;
  font-family: Consolas, 'Courier New', monospace;
  letter-spacing: 1px;
}

/* Nav items styled like subtitle (lowercase, lighter) */
nav a.nav-minor {
  text-transform: lowercase;
  font-weight: normal;
  opacity: 0.7;
}

/* ------------------------------
   STYLES POUR PAGE D'ACCUEIL
------------------------------ */

/* Section vidéo/image plein écran */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.vimeo-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background: black; /* pour éviter l'effet de transparence */
}

.vimeo-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Utiliser les unités viewport pour couvrir sans bandes noires */
  width: 100vw;          /* largeur basée sur le viewport */
  height: 56.25vw;       /* 100 * 9/16 pour conserver 16:9 */
  min-height: 100vh;     /* au moins la hauteur du viewport */
  min-width: 177.77vh;   /* 100 * 16/9 basé sur la hauteur du viewport */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
}


/* Vidéo de fond (pour vidéos locales restantes) */
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.5);
}

/* Image de fond non cropée */
.bg-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  z-index: 1;
  filter: brightness(0.5);
}

/* Overlay centré (texte sur vidéo ou image) */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  text-align: center;
  pointer-events: none;
  font-size: 13px;
  text-transform: lowercase;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  max-width: 90%;
  padding: 0;
  line-height: 1.2;
  font-family: Consolas, 'Courier New', monospace;
}

/* Hover/click target reduced to just the overlay text */
.overlay .hover-blur {
  pointer-events: auto;
  display: inline-block;
}

/* Opacity 0.5 for specific homepage entries */
a[href="nike.html"] .vimeo-wrapper iframe { opacity: 0.5; }
a[href="salomon.html"] .vimeo-wrapper iframe { opacity: 0.5; }
a[href="genesis.html"] .vimeo-wrapper iframe { opacity: 0.5; }
a[href="JRE.html"] .bg-photo { opacity: 0.5; }
a[href="DLY.html"] .bg-photo { opacity: 0.5; }

/* ------------------------------
   Utility: blur text on hover
------------------------------ */
.hover-blur {
  transition: filter 0.25s ease;
}

.hover-blur:hover {
  filter: blur(2px);
}

/* Allow blur when hovering the clickable parent (e.g., homepage tiles) */
/* Removed tile-wide hover blur so only text hover triggers the effect */