body {
      /* supprime marge autour de la page */
      margin: 0;
      /* empecher scroll si qq chose dépasse */
      overflow: hidden;
      background: #111;
      color: white;
      font-family: system-ui, sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
    }

    .screen {
      width: min(96vw, 1300px);
    }

.stage {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
  }

.console {
  position: relative;
  display: inline-block;

  /* added 06082026 */
  width: min(100vw, calc(100vh * 1.25156));

  
  /* width: 100vw;
  height: 100vh; */
}

/*
.console img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
height: 100vh;
object-fit: contain;
}
*/


.console img {
  display: block;
  width: 100%;
  height: 100%;
}

.hotspot-red {
  position: absolute;
}
.hotspot-green {
  position: absolute;
}
.hotspot {
  position: absolute;
}
 /*
    .console {
      position: relative;
      height: 90%;
      width: 100%;
    }

    .console img {
      height: 90%;
      width: 100%;
      display: block;
      border-radius: 10px;
      object-fit: contain;
    }
*/
    .hotspot-red {
      position: absolute;
/*      border: 2px dashed rgba(255,255,255,0.25);*/
      background: transparent;
      border-radius: 7px;
      cursor: pointer;
      padding: 0;
    }

    .hotspot-green {
      position: absolute;
/*      border: 2px dashed rgba(255,255,255,0.25); */
      background: transparent;
      border-radius: 7px;
      cursor: pointer;
      padding: 0;
    }
    .hotspot {
      position: absolute;
/*      border: 2px dashed rgba(255,255,255,0.25); */
      background: transparent;
      border-radius: 7px;
      cursor: pointer;
      padding: 0;
    }



 /*
    .hotspot-red:hover {
      border-color: rgba(255,255,255,0.65);
    }
*/

    .hotspot-red::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
    }

    .hotspot-red.active::after {
      opacity: 1;
      background: radial-gradient(circle, rgba(255,90,90,0.85), rgba(255,0,0,0.38));
      box-shadow: 0 0 16px rgba(255,0,0,0.95), inset 0 0 8px rgba(255,255,255,0.45);
      transform: scale(1.04);
    }

    .hotspot-green::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
    }

    .hotspot-green.active::after {
      opacity: 1;
      background: radial-gradient(circle, rgba(90,255,120,0.85), rgba(0,180,60,0.38));
      box-shadow: 0 0 16px rgba(0,255,80,0.95), inset 0 0 8px rgba(255,255,255,0.45);
      transform: scale(1.04);
    }

     .hotspot::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
    }

    .hotspot.active::after {
      opacity: 1;
      background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(220,220,220,0.38));
        box-shadow: 0 0 16px rgba(255,255,255,0.95), inset 0 0 8px rgba(255,255,255,0.55);
      /* box-shadow: 0 0 16px rgba(0,255,80,0.95), inset 0 0 8px rgba(255,255,255,0.45); */
      transform: scale(1.04);
    }


    .mp1-live    { left: 4.0%;  top: 57.5%; width: 4.0%; height: 5.0%; }
    .mp1k-live   { left: 8.0%;  top: 57.5%; width: 4.0%; height: 5.0%; }
    .mp2-live    { left: 12.1%; top: 57.5%; width: 4.0%; height: 5.0%; }
    .mp2k-live   { left: 16.2%; top: 57.5%; width: 4.0%; height: 5.0%; }
    .bg1-live    { left: 20.3%; top: 57.5%; width: 4.0%; height: 5.0%; }
    .bg2-live    { left: 24.4%; top: 57.5%; width: 4.0%; height: 5.0%; }
    .black-live  { left: 28.5%; top: 57.5%; width: 4.0%; height: 5.0%; }
    .bars-live   { left: 32.6%; top: 57.5%; width: 4.0%; height: 5.0%; }


    .mp1-prvw    { left: 4.0%;  top: 66.5%; width: 4.0%; height: 5.0%; }
    .mp1k-prvw   { left: 8.0%;  top: 66.5%; width: 4.0%; height: 5.0%; }
    .mp2-prvw    { left: 12.1%; top: 66.5%; width: 4.0%; height: 5.0%; }
    .mp2k-prvw   { left: 16.2%; top: 66.5%; width: 4.0%; height: 5.0%; }
    .bg1-prvw    { left: 20.3%; top: 66.5%; width: 4.0%; height: 5.0%; }
    .bg2-prvw    { left: 24.4%; top: 66.5%; width: 4.0%; height: 5.0%; }
    .black-prvw  { left: 28.5%; top: 66.5%; width: 4.0%; height: 5.0%; }
    .bars-prvw   { left: 32.6%; top: 66.5%; width: 4.0%; height: 5.0%; }

    #cut    { left: 52.8%; top: 66.5%; width: 4.0%; height: 5.0%; }
    .auto   { left: 61.0%; top: 66.5%; width: 4.0%; height: 5.0%; }
/*    .dsk1   { left: 74.2%; top: 63.2%; width: 4.1%; height: 5.2%; }
    .dsk2   { left: 78.4%; top: 63.2%; width: 4.1%; height: 5.2%; } */
    .ftb   { left: 90.1%; top: 66.5%; width: 4.0%; height: 5.0%; }

/* ALL LABEL under buttons */
.atem-label {
  position: absolute;
  top: 72.4%;
  height: 3.1%;
  background: #f2f2ec;
  color: #222;
  border-radius: 1px;
  font-size: clamp(7px, 0.62vw, 10px);
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(0,0,0,0.35);
  letter-spacing: 0.02em;
}

/* Sous MP1 preview */
.label-pc1 {
  left: 4.1%;
  width: 3.2%;
}

/* Sous MP1K preview */
.label-pc2 {
  left: 8.4%;
  width: 3.2%;
}

/* Étiquette plus large sous MP2 / MP2K */
.label-pcloc {
  left: 12.1%;
  width: 4.1%;
  font-size: clamp(11px, 0.62vw, 10px);
}

/* Sous BG1 / BG2 / BLACK */
.label-gauche {
  left: 20.3%;
  width: 4.0%;
}

.label-centre {
  left: 24.4%;
  width: 4.0%;
}

.label-droite {
  left: 28.5%;
  width: 4.0%;
}

/* Etiquette tout en bas */

.bottom-sticker {
  position: absolute;

  /* position sur la tranche basse de l'ATEM */
  left: 30.5%;
  /* bottom: 1.9%; */
  bottom: 4.5%;

  width: 34%;
  height: 4.2%;

  background: linear-gradient(
    to bottom,
    #f7f1d7 0%,
    #eee5bf 55%,
    #d9cfa6 100%
  );

  color: #3d3427;
  font-family: system-ui, sans-serif;
  font-size: clamp(8px, 1.05vw, 18px);
  font-weight: 500;
  letter-spacing: 0.12em;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 2px;

  pointer-events: auto;
  cursor: default;

  /*
    donne l'impression que l'étiquette est collée
    sur la face inclinée vers le bas
  */
  transform-origin: top center;
  transform:
    perspective(500px)
    /* rotateX(28deg) */
    rotateX(-28deg)
    skewX(-1deg);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.75),
    inset 0 -2px 3px rgba(80,60,20,0.22),
    0 6px 8px rgba(0,0,0,0.45);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.bottom-sticker span {
  display: block;
  transform: translateY(-1px);
  white-space: nowrap;
}