/* ── Page 404 ── */
.page-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 68vh;
  padding: 64px 24px 80px;
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* Jingle en fond décoratif */
.page-404__img {
  position: absolute;
  right: max(5vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 30vw, 400px);
  height: auto;
  opacity: .12;
  pointer-events: none;
  filter: grayscale(1);
}

/* ── 404 ── */
.page-404__num {
  font-size: clamp(120px, 20vw, 200px);
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -6px;
  margin: 0 0 24px;
}

/* ── Visage SVG ── */
.page-404__face {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  vertical-align: middle;
  margin: 0 0.02em;
  position: relative;
  top: -0.06em;
}

/* ── Texte ── */
.page-404__sub {
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 28px;
}

/* ── Points de suspension animés ── */
.page-404__dots span {
  animation: dot404 1.6s ease-in-out infinite;
  opacity: 0;
}
.page-404__dots span:nth-child(1) { animation-delay: 0s;    }
.page-404__dots span:nth-child(2) { animation-delay: .3s;   }
.page-404__dots span:nth-child(3) { animation-delay: .6s;   }

@keyframes dot404 {
  0%, 100% { opacity: 0; }
  40%, 70%  { opacity: 1; }
}

/* ── Ondes animées ── */
.page-404__wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 32px;
  margin-bottom: 36px;
}

.page-404__wave span {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: var(--brand);
  opacity: .3;
  animation: wave404 1.4s ease-in-out infinite;
}

.page-404__wave span:nth-child(1)  { height: 35%; animation-delay: 0s;   }
.page-404__wave span:nth-child(2)  { height: 65%; animation-delay: .1s;  }
.page-404__wave span:nth-child(3)  { height: 100%;animation-delay: .2s;  }
.page-404__wave span:nth-child(4)  { height: 50%; animation-delay: .3s;  }
.page-404__wave span:nth-child(5)  { height: 80%; animation-delay: .15s; }
.page-404__wave span:nth-child(6)  { height: 40%; animation-delay: .25s; }
.page-404__wave span:nth-child(7)  { height: 90%; animation-delay: .05s; }
.page-404__wave span:nth-child(8)  { height: 60%; animation-delay: .35s; }
.page-404__wave span:nth-child(9)  { height: 75%; animation-delay: .1s;  }
.page-404__wave span:nth-child(10) { height: 30%; animation-delay: .2s;  }
.page-404__wave span:nth-child(11) { height: 55%; animation-delay: .3s;  }
.page-404__wave span:nth-child(12) { height: 45%; animation-delay: .0s;  }
.page-404__wave span:nth-child(13) { height: 70%; animation-delay: .12s; }
.page-404__wave span:nth-child(14) { height: 85%; animation-delay: .22s; }
.page-404__wave span:nth-child(15) { height: 40%; animation-delay: .08s; }
.page-404__wave span:nth-child(16) { height: 60%; animation-delay: .18s; }

@keyframes wave404 {
  0%, 100% { transform: scaleY(1);    opacity: .3;  }
  50%       { transform: scaleY(.35); opacity: .55; }
}

/* ── Bouton ── */
.page-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--brand);
  color: #fff !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(217, 19, 25, .3);
  transition: box-shadow .2s, transform .2s, background .2s;
  white-space: nowrap;
}

.page-404__btn:hover {
  background: #c01017;
  box-shadow: 0 8px 28px rgba(217, 19, 25, .45);
  transform: translateY(-2px);
  color: #fff !important;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .page-404__img {
    position: static;
    transform: none;
    width: min(180px, 50vw);
    opacity: 1;
    filter: none;
    margin-bottom: 8px;
    animation: float404 4s ease-in-out infinite;
  }

  .page-404__num { letter-spacing: -3px; }
}

@keyframes float404 {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-10px); }
}