/* Compositions : poche verticale (< 768), appareil qui défile (768–1023), appareil entier à l'écran (≥ 1024). */

.l-desk {
  display: grid;
  place-items: start center;
  min-height: 100svh;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.l-machine {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 30rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "plate"
    "screen"
    "tabs"
    "pads"
    "seq"
    "knobs"
    "piano"
    "jacks";
  gap: 0.9rem;
  padding: 1.1rem 0.9rem 1.2rem;
}

.l-plate {
  grid-area: plate;
}
.l-jacks {
  grid-area: jacks;
}
.l-screen {
  grid-area: screen;
  min-height: 0;
}
.l-tabs {
  grid-area: tabs;
}
.l-knobs {
  grid-area: knobs;
}
.l-pads {
  grid-area: pads;
}
.l-grille {
  grid-area: grille;
  display: none;
}
.l-seq {
  grid-area: seq;
}
.l-piano {
  grid-area: piano;
}

/* Tablette : le même appareil, pads sous l'écran, la page défile. */
@media (min-width: 768px) {
  html {
    font-size: 15px;
  }

  .l-desk {
    padding: 1.5rem;
  }

  .l-machine {
    max-width: 62rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "plate  jacks"
      "screen screen"
      "tabs   tabs"
      "pads   knobs"
      "seq    seq"
      "piano  piano";
    gap: 1.1rem 1.4rem;
    padding: 1.6rem 1.8rem 1.8rem;
  }

}

/* Ordinateur : tout l'appareil tient dans la fenêtre. Une unité rem = 1/98 de la largeur utile
   ou 1/56 de la hauteur utile, la plus petite des deux : l'appareil garde ses proportions. */
@media (min-width: 1024px) and (min-height: 600px) {
  html {
    font-size: clamp(10px, min(calc((100vw - 32px) / 98), calc((100vh - 32px) / 56)), 20px);
  }

  .l-desk {
    height: 100vh;
    min-height: 0;
    padding: 0;
    place-items: center;
  }

  .l-machine {
    width: 96rem;
    max-width: none;
    height: 54rem;
    grid-template-columns: minmax(0, 1fr) 34rem;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "plate  jacks"
      "screen knobs"
      "screen pads"
      "screen grille"
      "tabs   grille"
      "seq    piano";
    gap: 1rem 1.8rem;
    padding: 1.5rem 2rem 1.7rem;
  }

  .l-grille {
    display: grid;
  }
}