.desk-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

.desk {
  position: relative;
  aspect-ratio: 1920 / 1080;
  height: 100%;
  max-width: 100%;
}

.desk-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.obj {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: auto;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: filter 0.2s;
}

/* Cahiers */
.cahier1 {
  left: 43%;
  top: 35%;
  width: 17%;
  height: 46%;
  z-index: 3;
  background-image: url('/user/themes/maison-maugis/images/bureau/cahier1.png');
}

.cahier2 {
  left: 42%;
  top: 30%;
  width: 17%;
  height: 46%;
  z-index: 2;
  background-image: url('/user/themes/maison-maugis/images/bureau/cahier2.png');
  transform: rotate(-15deg);
}

.cahier3 {
  left: 48%;
  top: 30%;
  width: 17%;
  height: 46%;
  z-index: 1;
  background-image: url('/user/themes/maison-maugis/images/bureau/cahier3.png');
  transform: rotate(15deg);
}

/* ====== LIVRE 1 (zone SVG) ====== */
/* 1) La boîte qui positionne la zone (en % du bureau !) */
.zone-livre1 {
  position: absolute;
  left: 10%;   /* à ajuster visuellement */
  top: 3%;     /* à ajuster visuellement */
  width: 24%;     /* largeur de la tranche */
   z-index: 10;pointer-events: none;
}
/* 2) …mais active sur le path */
.zone-livre1 svg{ width:100%; height:100%;pointer-events: none;  }
.zone-livre1 g{ width:100%; height:100%;pointer-events: none;  }
.zone-livre1-path{
  fill: rgba(255,255,255,0.1);
  pointer-events:auto; 
  cursor:pointer; 
  transition:fill .2s ease;
 
}
.zone-livre1-path:hover{
  fill: rgba(0,128,255,.35);
   }


.zone-livre2 {
  position: absolute;
  left: 7.5%;   /* à ajuster visuellement */
  top: 7%;     /* à ajuster visuellement */
  width: 24%;     /* largeur de la tranche */
  z-index: 9;
  pointer-events: none;
}
/* 2) …mais active sur le path */
.zone-livre2 svg{ width:100%; height:100%; pointer-events: none; }
.zone-livre2 g{ width:100%; height:100%;pointer-events: none;  }

.zone-livre2-path{
  fill: rgba(255,255,255,.1);
  pointer-events:auto; 
  cursor:pointer; 
  transition:fill .2s ease;
}
.zone-livre2-path:hover{ fill: rgba(0,128,255,.35);
  filter: brightness(2.12) saturate(2.05); }

.zone-livre3 {
  position: absolute;
  left: -4.5%;   /* à ajuster visuellement */
  top: -32%;     /* à ajuster visuellement */
  width: 80%;     /* largeur de la tranche */
  
}

.zone-livre3 svg{ width:100%; height:100%; pointer-events: none; }
.zone-livre3 g{ width:100%; height:100%;pointer-events: none;  }
.zone-livre3-path{
   fill: rgba(255,255,255,0.1);
  pointer-events:auto; cursor:pointer; transition:fill .2s ease;
}
.zone-livre3-path:hover{ fill: rgba(0,128,255,.35);
  filter: brightness(2.12) saturate(2.05); }


.zone-livre4 {
  position: absolute;
  left: -6.5%;   /* à ajuster visuellement */
  top: -18%;     /* à ajuster visuellement */
  width: 84%;     /* largeur de la tranche */
  pointer-events: none;
}
.zone-livre4 svg{ width:100%; height:100%; pointer-events: none; }
.zone-livre4 g{ width:100%; height:100%;pointer-events: none;  }
.zone-livre4-path{
  fill: rgba(255,255,255,0.1);
  pointer-events:auto; cursor:pointer; transition:fill .2s ease;
}
.zone-livre4-path:hover{ fill: rgba(0,128,255,.35);
  filter: brightness(2.12) saturate(2.05); }


.zone-livre5 {
  position: absolute;
  left: -6.5%;   
  top: -7%;     
  width: 77%;   
  pointer-events: none;
}


.zone-livre5 svg{ width:100%; height:100%; pointer-events: none; }
.zone-livre5 g{ width:100%; height:100%;pointer-events: none;  }
.zone-livre5-path{
  fill: rgba(255,255,255,0.1);
  pointer-events: auto;
  cursor:pointer; 
  transition:fill .2s ease;
}

.zone-livre5-path:hover{
  fill: rgba(0,128,255,.35);
 }

.zone-livre6 {
  position: absolute;
  left: -6%;   /* à ajuster visuellement */
  top: -21%;     /* à ajuster visuellement */
  width: 90%;     /* largeur de la tranche */
  pointer-events: none;
}
.zone-livre6 svg{ width:100%; height:100%; pointer-events: none; }
.zone-livre6 g{ width:100%; height:100%;pointer-events: none;  }

.zone-livre6-path{
  fill: rgba(255,255,255,0.1);
  pointer-events: auto;
  cursor:pointer; 
  transition:fill .2s ease;
}

.zone-livre6-path:hover{ 
 fill: rgba(0,128,255,.35);
 
}




/* Optionnel : les cahiers s’éclairent un peu au survol */
.obj:hover { filter: brightness(2.12) saturate(2.05); }