@charset "utf-8";
/* CSS Document */
/* --- ton bouton --- */
/* --- ton bouton --- */
.toolbox-btn{
  display:flex;

}
.toolbox-btn label{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.toolbox-btn span{
  font-weight:600;
  font-size:14px;
  opacity:.9;
}

/* --- mini dé 3D (adapté du principe du codepen) --- */
.dice-wrap{
  width: 42px;
  height: 42px;
  perspective: 620px;
  display:grid;
  place-items:center;
}



.dice{
  width: 38px;
  height: 38px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 750ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}




.side{
  position:absolute;
  inset:0;
  background:#fff;
  border-radius:7.5px;
  border:1px solid #e6e6e6;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  image-rendering: -webkit-optimize-contrast;
}

.dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1f6feb; /* bleu */
  box-shadow: inset 1px 1px rgba(0,0,0,.15);
  transform: translate(-50%,-50%) translateZ(0);
}

/* profondeur (28px => ~14px de demi-profondeur) */
.side:nth-child(1){ transform: translateZ(19px); }
.side:nth-child(2){ transform: rotateY(180deg) translateZ(19px); }
.side:nth-child(3){ transform: rotateY(-90deg) translateZ(19px); }
.side:nth-child(4){ transform: rotateX(90deg) translateZ(19px); }
.side:nth-child(5){ transform: rotateX(-90deg) translateZ(19px); }
.side:nth-child(6){ transform: rotateY(90deg) translateZ(19px); }

/* positions points (en %) */
.p11{ left:50%; top:50%; }

.p21{ left:28%; top:28%; }
.p22{ left:72%; top:72%; }

.p31{ left:28%; top:28%; }
.p32{ left:50%; top:50%; }
.p33{ left:72%; top:72%; }

.p41{ left:28%; top:28%; }
.p42{ left:72%; top:28%; }
.p43{ left:28%; top:72%; }
.p44{ left:72%; top:72%; }

.p51{ left:28%; top:28%; }
.p52{ left:72%; top:28%; }
.p53{ left:50%; top:50%; }
.p54{ left:28%; top:72%; }
.p55{ left:72%; top:72%; }

.p61{ left:28%; top:28%; }
.p62{ left:28%; top:50%; }
.p63{ left:28%; top:72%; }
.p64{ left:72%; top:28%; }
.p65{ left:72%; top:50%; }
.p66{ left:72%; top:72%; }

/* rotations finales par face (même principe show-1..6 du codepen) */
.show-1{ transform: rotateX(720deg) rotateZ(-720deg); }
.show-2{ transform: rotateX(450deg) rotateZ(-720deg); }
.show-3{ transform: rotateY(810deg) rotateZ(720deg); }
.show-4{ transform: rotateY(-450deg) rotateZ(-1440deg); }
.show-5{ transform: rotateX(-810deg) rotateZ(-1080deg); }
.show-6{ transform: rotateX(-900deg) rotateZ(1080deg); }

/* petit lift au hover 
.toolbox-btn:hover .dice-wrap{ transform: scale(1.03); }*/