body {
    margin: 0;
    height: 100vh;
    background: url("images/fonsportesvip.png") no-repeat center;
    background-size: cover;
    position: relative; /* pour positionner la zone cliquable par-dessus */
  }
  

  


  

  .click-zone {
    position: absolute;
    top: 23%;
    left: 4%;
    width: 10%;
    height: 70%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;

  
    /* porte en perspective pré-fait */
    clip-path: polygon(
      10% 0%,   /* coin haut-gauche */
      95% 5%,   /* coin haut-droit légèrement plus bas */
      95% 91%, /* coin bas-droit légèrement plus haut */
      10% 100%   /* coin bas-gauche légèrement plus bas */
    );
  
  }
  
  /* Nouvelle zone vidéo pour placement */
.clickzonevideo {
  position: absolute;
  top: 23%;      /* Ajuste selon ton placement */
  left: 20%;     /* Ajuste selon ton placement */
  width: 10%;    /* Ajuste selon ton placement */
  height: 70%;   /* Ajuste selon ton placement */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;


  clip-path: polygon(
    10% 10%,
    95% 13%,
    95% 75%,
    10% 80%
  );

}


/* Zone guide */
.clickzoneguide {
    position: absolute;
    top: 23%;      
    left: 33%;     
    width: 10%;    
    height: 70%;   
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    clip-path: polygon(
      10% 12%,/* coin haut-gauche */
      99% 13%,/* coin haut-droit  */
      95% 73%,/* coin bas-droit  */
      10% 75%/* coin bas-gauche*/
       
    );

}


/* Zone guide */
.clickzonelogo {
  position: absolute;
  top: 23%;      
  left: 57%;     
  width: 10%;    
  height: 70%;   
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;


  clip-path: polygon(
    23% 14%,/* coin haut-gauche */
    93% 13%,/* coin haut-droit  */
    94% 77%,/* coin bas-droit  */
    23% 75%/* coin bas-gauche*/
     
  );

}




/* Zone guide */
.clickzoneaffiche {
  position: absolute;
  top: 23%;      
  left: 69%;     
  width: 10%;    
  height: 70%;   
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;


  clip-path: polygon(
    27% 13%,/* coin haut-gauche */
    95% 11%,/* coin haut-droit  */
    96% 81%,/* coin bas-droit  */
    28% 76%/* coin bas-gauche*/
     
  );

}


/* Zone guide */
.clickzoneloups {
  position: absolute;
  top: 18%;      
  right: 5%;     
  width: 10%;    
  height: 90%;   
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;


  clip-path: polygon(
    10% 11%,/* coin haut-gauche */
    100% 6%,/* coin haut-droit  */
    99% 80%,/* coin bas-droit  */
    10% 72%/* coin bas-gauche*/
     
  );
}


.clickzonefinal {
  position: absolute;
  top: 18%;      
  right: 45%;     
  width: 8%;    
  height: 90%;   
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;


  clip-path: polygon(
    0% 18%,   /* coin haut-gauche */
    100% 18%, /* coin haut-droit */
    100% 60%, /* coin bas-droit */
    0% 60%  /* coin bas-gauche */
);

}


/* ========================================================= */
/* ========================== MOBILE ======================== */
/* ======= L’expérience n'est PAS prévue pour mobile ======= */
/* ========================================================= */

@media (max-width: 500px) {

  .click-zone,
  .clickzonevideo,
  .clickzoneguide,
  .clickzonelogo,
  .clickzoneaffiche,
  .clickzoneloups,
  .clickzonefinal {
      display: none ;
  }

  body {
      background: black !important;
      color: white !important;
      text-align: center;
      padding: 40px;
      font-size: 1.2rem;
  }

  body::before {
      content: "Cette expérience est prévue pour ordinateur 💻";
      display: block;
      margin-top: 30vh;
  }

}