:root { --ink:#4B0082; --bg:#000; }

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:'BBH Sans Bogle',sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:none; /* bloque zoom auto iOS */
  box-sizing:border-box;
}

/* titre */
#brand{
  position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(28px,5vw,72px);
  letter-spacing:.02em;white-space:nowrap;text-transform:uppercase;
  animation:breathe 10s ease-in infinite;
  text-align:center;
  width:100%;
  overflow-wrap:break-word;
}


@keyframes breathe{
  0%,100%{opacity:.9;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
}

/* menu bas */
#menu{
  position:absolute;bottom:12vh;left:50%;transform:translateX(-50%);
  display:flex;gap:3vw;flex-wrap:nowrap;white-space:nowrap;
}
#menu a{
  color:var(--ink);text-decoration:none;font-size:1.1rem;letter-spacing:.1em;
  text-transform:uppercase;transition:color .1s ease;font-weight:700;
}
#menu a:hover{color:#fff;text-shadow:0 0 10px var(--ink);}

/* flash clavier */
.flash{background:var(--ink);animation:flash .15s ease;}
@keyframes flash{from{background:var(--ink);}to{background:var(--bg);}}

@media(max-width:600px){
  #brand{font-size:14vw;}
  #menu{gap:1.2em;flex-wrap:wrap;bottom:10vh;font-size:.9rem;}
}