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;
}

.joystick {
    position: relative;
    display: inline-block;
}

.joystick img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
}


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


.hotspot-green::after, .hotspot-preset-green::after, .preset-button-green::after {
    /* content: ""; */
    content: attr(data-tooltip);
    position: absolute;

    
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
}

.hotspot-green.active::after, .hotspot-preset-green.active::after, .preset-button-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-green:hover::after, .hotspot-preset-green:hover::after {
    opacity: 1;
}

.camera1-select    { left: 27.05%;  top: 60%; width: 5.9%; height: 6.9%; }
.camera2-select    { left: 37.05%;  top: 60%; width: 5.9%; height: 6.9%; }
.camera3-select    { left: 47.05%;  top: 60%; width: 5.9%; height: 6.9%; }

#preset-store    { left: 9.6%;  top: 44.7%; width: 3.2%; height: 3.6%; }
#preset-delete    { left: 18.3%;  top: 44.7%; width: 3.2%; height: 3.6%; }
#preset-1    { left: 27%;  top: 32.6%; width: 5.9%; height: 6.9%; }
#preset-2    { left: 37%;  top: 32.6%; width: 5.9%; height: 6.9%; }
#preset-3    { left: 47%;  top: 32.6%; width: 5.9%; height: 6.9%; }
#preset-4    { left: 57%;  top: 32.6%; width: 5.9%; height: 6.9%; }
#preset-5    { left: 67%;  top: 32.6%; width: 5.9%; height: 6.9%; }
#preset-6    { left: 27%;  top: 43.0%; width: 5.9%; height: 6.9%; }
#preset-7    { left: 37%;  top: 43.0%; width: 5.9%; height: 6.9%; }
#preset-8    { left: 47%;  top: 43.0%; width: 5.9%; height: 6.9%; }
#preset-9    { left: 57%;  top: 43.0%; width: 5.9%; height: 6.9%; }
#preset-10   { left: 67%;  top: 43.0%; width: 5.9%; height: 6.9%; }

/* .joystick {
    position: relative;
    display: inline-block;
    line-height: 0;
} */

/* Bouton ZOOM */
.panasonic-controller {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Image du bouton TELE ou WIDE.
 * Ajuste left, top et width pour la placer parfaitement.
 */
.zoom-overlay {
    position: absolute;
    pointer-events: none;
    display: none;

    /* transform: scale(0.88); */

    left: 0%;
    top: 0%;
    /* width: 20.5%; */

    height: auto;
    z-index: 10;
    pointer-events: none;
    user-select: none;

    display: none;
}

/*
 * Zone globale correspondant au bouton Zoom.
 * La rotation permet de suivre l'orientation du bouton.
 */
.zoom-zone {
    position: absolute;
    z-index: 20;

    top: 73.2%;
    width: 8%;
    height: 8%;

    

    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;

    transform: rotate(35deg);
}

.zoom-zone::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 40%;
    transform: translateX(-50%) rotate(-35deg);
    background: #222;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    line-height: normal;
    opacity: 0;
    pointer-events: none;
    font-size: large;
}

.zoom-zone:hover::after {
    opacity: 1;
}


/* Partie haute/gauche : TELE */
.zoom-tele {
    left: 9.00%;
}

/* Partie basse/droite : WIDE */
.zoom-wide {
    left: 18%;
    top: 81.00%;
}

/* À activer temporairement pour visualiser les zones */
.zoom-zone.debug {
    background: rgba(255, 0, 0, 0.35);
}


.joystick-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    pointer-events: none;
}