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

html, body {
  margin: 0;
  padding: 0;
  background: #a81f1f;
}

[data-barba="wrapper"] {
  display: grid;
  min-height: 100vh;
}

[data-barba="container"] {
  grid-area: 1 / 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene {
  position: relative;
  width: min(100vw, calc(100vh * 1373 / 784));
  height: min(100vh, calc(100vw * 784 / 1373));
  background: url('../assets/images/home/fond.jpg') no-repeat center / 100% 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.el {
  position: absolute;
}

.el img {
  display: block;
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── Hover vidéo sur les photos ── */

.photo-left video {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url('../assets/images/home/1.png');
  -webkit-mask-size: 100% 100%;
  mask-image: url('../assets/images/home/1.png');
  mask-size: 100% 100%;
}

.photo-mask {
  display: none;
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('../assets/images/home/2.png');
  -webkit-mask-size: 100% 100%;
  mask-image: url('../assets/images/home/2.png');
  mask-size: 100% 100%;
}

.photo-mask video {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%) scale(1.01);
}

.photo-left:hover img,
.photo-left.video-active img {
  visibility: hidden;
}

.photo-left:hover video,
.photo-left.video-active video,
.photo-right:hover .photo-mask,
.photo-right.video-active .photo-mask {
  display: block;
}

/* ── Photos (ratio naturel, pas de height explicite) ── */

.photo-left {
  left: 7.37%;
  top: 12.91%;
  width: 26.92%;
}

.photo-right {
  left: 66.5%;
  top: 13.5%;
  width: 26.3%;
}

.photo-artists {
  left: 35.5%;
  top: 42.19%;
  width: 31%;
}

/* ── Navigation ── */

a.el {
  display: block;
  text-decoration: none;
  /*transition: transform 0.15s ease, filter 0.15s ease;*/
  cursor: pointer;
}

a.el:hover,
a.el.nav-active {
  transform: scale(1.06);
  filter: brightness(1.3);
}

a.el.photo-right:hover,
a.el.photo-left:hover,
a.el.photo-artists:hover,
a.el.art-frederique:hover {
  transform: none;
  filter: none;
}

.nav-apropos {
  left: 4.7%;
  top: 66.5%;
  width: 15%;
}

.nav-boulevard {
  left: 12.87%;
  top: 58.1%;
  width: 13.43%;
}

.nav-artists {
  left: 46.22%;
  top: 89.17%;
  width: 9%;
}

.nav-contact {
  left: 74.89%;
  top: 58.42%;
  width: 10%;
}

.nav-product {
  left: 81.51%;
  top: 79.65%;
  width: 9%;
}

.arrow-product {
  left: 78.5%;
  top: 71%;
  width: 15.5%;
  height: 9%;
}

.secret-button {
  left: 32%;
  top: 21%;
  width: 35%;
  height: 31%;
  background: none;
  border: none;
  padding: 0;
}

/* ── Overlay À propos ── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay[hidden] {
  display: none;
}

.overlay-img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

.overlay-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 10%;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.overlay-close img {
  display: block;
  width: 100%;
}

/* ── Pages Boulevard & Artists (fond jaune, ratio 1444×736) ── */
[data-barba-namespace="boulevard"],
[data-barba-namespace="artists"] {
  background: #ffcb2b;
}

.scene-boulevard,
.scene-artists {
  width: min(100vw, calc(100vh * 1444 / 736));
  height: min(100vh, calc(100vw * 736 / 1444));
}

.scene-boulevard {
  background-image: url('../assets/images/boulevard/fond.jpg');
}

.scene-artists {
  background-image: url('../assets/images/artists/fond.jpg');
}

.bld-menu,
.art-menu {
  left: 75%;
  top: 2%;
  width: 23%;
}

.art-frederique {
  left: 6%;
  top: 8%;
  width: 20%;
}

.bld-btn {
  top: 89%;
  width: 19%;
}

.bld-btn:hover {
  filter: grayscale(1) brightness(0.85);
  cursor: not-allowed;
}

.bld-prev {
  left: 12%;
}

.bld-top {
  left: 40.5%;
}

.bld-next {
  left: 69%;
}

.bld-video {
  left: 8%;
  top: 16%;
  width: 41%;
  height: 23%;
}

.bld-loop {
  left: 9.6%;
  top: 17.2%;
  width: 18.9%;
  height: 20.1%;
  overflow: hidden;
  pointer-events: none;
}

.bld-loop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  background: rgba(0, 0, 0, 0.95);
}

.video-frame {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Screensaver DVD (inactivité) ── */
.screensaver {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  overflow: hidden;
}

.screensaver[hidden] {
  display: none;
}

.dvd-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  aspect-ratio: 263 / 117;
  background-color: #fff;
  -webkit-mask: url('../assets/images/global/dvd.svg') center / contain no-repeat;
  mask: url('../assets/images/global/dvd.svg') center / contain no-repeat;
}

.screensaver::before,
.screensaver::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.screensaver::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.25) 3px,
    rgba(0, 0, 0, 0.25) 4px
  );
}

.screensaver::after {
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14;
  animation: crt-noise 0.4s steps(6) infinite;
}

@keyframes crt-noise {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-8%, 5%); }
  40%  { transform: translate(6%, -7%); }
  60%  { transform: translate(-5%, 8%); }
  80%  { transform: translate(9%, -3%); }
  100% { transform: translate(0, 0); }
}