:root {
  --mid_point_y_accueil: 60%;
}

html, body {
    margin:0; padding:0;
    width:100%; height:100%;
    overflow:hidden;
    background:#000;
}

.zone {
    position:absolute;
    width:50%;
    height:50%;
    overflow:hidden;
    cursor:pointer;
}

#zoneC {
    top:0; left:0%;
    width:100%; height:var(--mid_point_y_accueil);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#zoneD {
    bottom:0; left:0;
    width:50%; height:100%;
    clip-path: polygon(0 0, 100% var(--mid_point_y_accueil), 100% 100%, 0 100%);
}

#zoneK {
    bottom:0; right:0;
    width:50%; height:100%;
    clip-path: polygon(0 var(--mid_point_y_accueil), 100% 0, 100% 100%, 0 100%);
}
 
.zonemvt img {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.2s;
}
    
.zone img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* garde les proportions */
}

#centreY {
  position: absolute;
  top: var(--mid_point_y_accueil); left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); /* couleur semi-transparente */
  border: 0px solid #fff;
  cursor: pointer;
  z-index: 10; /* pour qu'il reste au-dessus des images */
}