@font-face {
  src: url("https://fonts.cdnfonts.com/css/pp-neue-montreal") format("woff2");
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 400;
}

/* Reset & variables */
*,
*:before,
*:after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --warm-off-black: #1a1917;
  --warm-off-white: #f8f5f2;
  --navbar-color: #22222280;
}

/* Base layout (desktop par défaut) */
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 700;
  font-size: 18px;
  background-color: var(--warm-off-black);
  color: var(--warm-off-white);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Bruit animé global */
body::before{
  content:"";
  position:fixed; top:-50%; left:-50%;
  width:200%; height:200%;
  background:transparent url("http://assets.iceable.com/img/noise-transparent.png") repeat 0 0;
  background-size:300px 300px;
  animation:noise-animation .3s steps(5) infinite;
  opacity:.9; will-change:transform; z-index:100; pointer-events:none;
}
@keyframes noise-animation{
  0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(-4%,2%)}
  30%{transform:translate(2%,-4%)}40%{transform:translate(-2%,5%)}50%{transform:translate(-4%,2%)}
  60%{transform:translate(3%,0)}70%{transform:translate(0,3%)}80%{transform:translate(-3%,0)}
  90%{transform:translate(2%,2%)}100%{transform:translate(1%,0)}
}

/* =========================
   NAVBAR + flou progressif robuste
   ========================= */
nav{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 60px;
  display: flex; justify-content: center; align-items: center;
  z-index: 1000;
  isolation: isolate;
  background: transparent;
  overflow: visible;
  padding-top: env(safe-area-inset-top, 0px);
}

/* Calque de flou fixé à la fenêtre (sous les liens) */
nav::before{
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--nav-blur-depth, 100px);
  pointer-events: none;
  z-index: 0;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: linear-gradient(
    to bottom,
    rgba(26,25,23,0.50) 0%,
    rgba(26,25,23,0.25) 50%,
    rgba(26,25,23,0.00) 100%
  );
}
@supports not (backdrop-filter: blur(1px)) {
  nav::before{
    background: linear-gradient(
      to bottom,
      rgba(26,25,23,0.70) 0%,
      rgba(26,25,23,0.40) 55%,
      rgba(26,25,23,0.00) 100%
    );
  }
}

/* Liens avec effet “fond qui monte” */
nav a{
  position: relative; z-index: 2;
  text-decoration: none; text-transform: uppercase; text-align: center;
  color: var(--warm-off-white);
  padding: 10px 20px;
  font-weight: bold;
  overflow: hidden;
  transition: color 0.3s ease;
  mix-blend-mode: exclusion;
}
nav a:hover{ color: var(--warm-off-black); }
nav a::before{
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;
  background-color: var(--warm-off-white); z-index: -1;
  transition: height 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
nav a:hover::before{ height: 100%; }
nav a:not(:hover)::before{ transition-duration: 0.8s; }

/* ======= Responsive global (déverrouille le mobile) ======= */
@media (max-width: 1024px){
  html, body { height: auto; overflow: auto; }
  body { display: block; align-items: initial; justify-content: initial; }
}
@media (max-width: 520px){
  nav a{ padding: 8px 12px; font-size: 0.95rem; }
}