:root {
  --band-bg: rgb(0 0 0 / .55);
  --band-line: rgb(255 255 255 / .1);
  --fg: rgb(255 255 255 / .92);
  --fg-dim: rgb(255 255 255 / .55);
  /* Frame 0 en 32 px (build/encode.sh) : affichée avant même le poster */
  --lqip: url("data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAACwBACdASogABIAPuleok2pJSMiMAwBIB0JbADClQaAce9hHoZ95be9ox8z5ygAAP70JN3cfq/mCRzH5b+LfqdzPgDEAMLWFbxRedmHjDsGs0yDWjFmbN2zkcn6aDITy4s9vGEYGkRJhvoFt35SfRDnS4pWNpSSywlQ9TVcle/PJzMu1A9dSTVK7Kk7kaN+OBCLoTZ3L8MNizfJdKfCHN2xG5isCgAA");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000 var(--lqip) center / cover no-repeat;
  color: var(--fg);
  font: 400 clamp(.75rem, .65rem + .5vw, 1rem) / 1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Plein écran sans bordure : on rogne ce qui dépasse plutôt que d'ajouter des bandes noires */
.bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
  background: transparent;
  pointer-events: none;
}

.band {
  position: fixed;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .8em max(3.5rem, env(safe-area-inset-right)) calc(.8em + env(safe-area-inset-bottom)) max(3.5rem, env(safe-area-inset-left));
  background: var(--band-bg);
  border-top: 1px solid var(--band-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25em .7em;
  margin: 0;
  letter-spacing: .04em;
  text-align: center;
}
.sep { color: var(--fg-dim); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
  border-radius: 2px;
}

/* L'adresse est dessinée dans un canvas : pas de texte dans le DOM */
.mail {
  letter-spacing: inherit;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .25s ease;
  animation: fade-in .6s ease both;
}
.mail:hover, .mail:focus-visible { background-size: 100% 1px; }
.mail canvas { display: block; }

.sound {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  top: calc((100% - env(safe-area-inset-bottom)) / 2);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--fg-dim);
  transition: color .2s ease, background-color .2s ease;
}
.sound:hover { color: var(--fg); background-color: rgb(255 255 255 / .08); }
.sound svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound .speaker { fill: currentColor; }
.sound[aria-pressed="false"] .on,
.sound[aria-pressed="true"] .off { display: none; }

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .75rem);
  translate: -50% 0;
  margin: 0;
  padding: .4em .9em;
  border-radius: 999px;
  background: var(--band-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .85em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* Écran étroit : l'adresse passe sur sa propre ligne, le séparateur sert de saut de ligne */
@media (max-width: 30rem) {
  .sep[data-mail] { flex-basis: 100%; height: 0; overflow: hidden; }
}

@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}