body.home {
  background:
    radial-gradient(70vmax 50vmax at 0% 100%, #FF4D2130, #0000 70%),
    radial-gradient(60vmax 40vmax at 100% 0%, #1FD6BC1C, #0000 70%),
    url("/grain.svg"),
    var(--wax);
  overflow-x: hidden;
}

.home-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 44px) clamp(16px, 3vw, 40px) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* L'affiche */
.hero { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hero-kicker { display: flex; align-items: center; gap: 10px; color: var(--mustard); font-size: .9rem; }
.tagline { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.hero-deck { --on: 1; width: min(100%, 72vh); margin-top: 18px; }

/* Le disque se manipule : c'est le premier réflexe en arrivant */
.vinyl-manual { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vinyl-manual.is-held { cursor: grabbing; }
.vinyl-manual .vinyl-label { transform: rotate(var(--turn, 0deg)); }
.vinyl-manual .vinyl-label::before { transform: none; }
.hero-deck .vinyl-label { --label: var(--tomato); }
.deck-hint {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 18%;
  text-align: right;
  font-size: clamp(.55rem, 1vw, .7rem);
}

/* Les pochettes */
.sleeves { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.sleeve-b { background: url("/grain.svg"), var(--mustard); }
.sleeve-b .engraved { color: var(--ink); }
.sleeve-text { font-weight: 600; }
.sleeve h2 { font-size: 2.1rem; }
.btn-ink { --edge: #000; background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 var(--press) 0 #5A4A00; }
.btn-ink:active:not(:disabled) { box-shadow: 0 0 0 #5A4A00; }

/* Avatars : chacun sur son petit disque */
.avatar-picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.avatar-picker legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.avatar-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.avatar-choice { position: relative; cursor: pointer; }
.avatar-choice input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.avatar-choice span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  border-radius: 50%;
  background: var(--paper-2);
  transition: transform var(--fast) var(--ease-pop);
}
.avatar-choice input:checked + span {
  background: radial-gradient(circle closest-side, var(--mustard) 62%, #000 64% 100%);
  transform: scale(1.14);
}
.avatar-choice input:focus-visible + span { outline: 3px solid var(--teal-deep); outline-offset: 2px; }

/* Téléphone : on arrive en général par le QR code, le formulaire passe avant le spectacle.
   Le disque reste en coin, assez gros pour dire tout de suite de quoi il s'agit. */
@media (max-width: 900px) {
  .home-main { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 18px; }
  .hero { position: relative; isolation: isolate; min-height: 148px; gap: 8px; }
  .logo-big { font-size: clamp(3.2rem, 17vw, 6rem); }
  .tagline { font-size: 1.02rem; max-width: 62%; }
  .tagline br { display: none; }
  .hero-kicker { font-size: .72rem; max-width: 60%; }
  .hero-deck {
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -18vw;
    width: 56vw;
    max-width: 320px;
    margin: 0;
    aspect-ratio: 1;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .hero-deck > .vinyl { inset: 0; height: 100%; }
  .deck-arm, .deck-hint { display: none; }
  .sleeve { padding: 18px; box-shadow: 6px 6px 0 #000; }
}
@media (max-width: 900px) {
  .avatar-grid { grid-template-columns: repeat(8, 1fr); gap: 5px; }
}