/* groups of gizmo elt */
#gizmoGroup{
	position:absolute;
	top:1em;
	right:3em;
	text-align:center;
	opacity:0.25;
	transition:opacity 0.5s;

	/* filter:url(#gizmoLighting); */
}
#gizmoGroup:hover{
	opacity:1;
}
#gizmoGroup.hidden{
	opacity:0;
	transition:opacity 1.5s 0.5s;
	pointer-events:none;
}
#groupZoomCenter{
	margin-top:8em;
	/* width:0; */
	height:0;
	position:relative;
	text-align:center;
}

/* gizmo up and down arrow */
#gizmoUpDown{
	position:absolute;
	right:0em;
	vertical-align:middle;
	width:80px;
	transform: translate(0,-50%);
}

.arrow{
	display:inline-block;
	border-radius:100%;
	background-color:#333333;
	cursor:pointer;
	border:1px solid white;
	width: 1.5em;
	height: 1.5em;
}
.arrow img{
	width:90%;
	pointer-events:none;
}
.arrow:hover{
	background-color:#86bc24;
}
.hidden .arrow{opacity:0;}
.visible .arrow{opacity:1;}


/* main gizmo */

#gizmo{
	/* stroke:rgba(17; 80; 100; 0.6); */
	width: 9em;
	cursor: pointer;
}

#ButtonBot .inner{
	fill:#eee;
	stroke-width: 0;
}
#ButtonTop .inner{
	stroke:#FFF;
	stroke-opacity:1;
	stroke-width:1;
}
.gizmoButton{
	transition:transform 2s, opacity 1s;
	stroke:#222;
	stroke-opacity:0.5;
	stroke-width:0;
	fill:url(#radgrad);
	-webkit-filter:url(#gizmoLighting);
	filter:url(#gizmoLighting);
}
.gizmoButton:hover{
	stroke: #FFF;
	stroke-width: 1;
	stroke-opacity:1;
	fill:url(#radgradOver);
	/* filter:url(#gizmoFilterHover); */
}

#circleGizmo{
	stroke: #EEE;
    stroke-width: 2;
    stroke-opacity: 1;
    fill: transparent;
	transition:transform 1.5s;
	transform:scale(1);
	transform-origin:50% 50%;
}
.hidden #circleGizmo{
	transition:transform 2.0s 0.1s;
	transform:scale(0.1);
}
#northCircleRadius{
	fill:#FFF;
	stroke-width: 0;
}
#northSVG{
	fill:#333333;
	fill-opacity: 1;
    cursor: pointer;
    stroke-width: 0;
	opacity:1;
	transition:opacity 0.5s 1s;
}
#northSVG:hover{
	fill:#86bc24;
}
.hidden #northSVG{
	opacity:0;
	transition:opacity 0.3s;
}



/* hidden config animation */
.hidden .botRow{transform:rotate(-405deg) scale(0.5);} /*-225 495 */
.hidden .topRow{transform:rotate(675deg) scale(0.2);} /* -405 675 */

/* visible config animation */
.visible .top{transform:rotate(0deg) scale(1);}
.visible .right{transform:rotate(90deg) scale(1);}
.visible .bottom{transform:rotate(180deg) scale(1);}
.visible .left{transform:rotate(270deg) scale(1);}


/* for the Gizmo zoom */
#gizmoZoom {
	width: 0.3em;
	height: 12em;
	margin: auto;
	background-color: #FFF;
	text-align:center;
	transform: translate(0%,-50%);
	opacity:1;
	transition:opacity 1s;
}
.hidden #gizmoZoom{
	opacity:0;
}

.zoomButton{
	font-size:1em;
	width: 1.2em;
	height: 1.2em;
	border-radius:100%;
	background-color:#333333;
	color:#FFF;
	cursor:pointer;
	font-weight:bold;
	line-height:100%;
	border:1px solid #FFF;
	left: 2px;
}
.zoomButton:hover{
	background-color:#86bc24;
}

#zoomBall{
	width: 1.5em;
	height: 1.5em;
	border-radius:100%;
	background:#333333;
	border:1px solid #FFF;
	cursor:pointer;
}
#zoomBall:hover{
	background: #86bc24;
}
/* ===== LEFT MENU ===== */
#leftMenu{
	background-color:#ffffff;
}
#leftMenu.is-desktop, #leftMenu{
	position:absolute;
	top:1.5em;
	width:10em;
	left:0;
	transition: all 0.3s;
	opacity:0.9;
}
#leftMenu.hidden{
	transform:translate(-100%,0);opacity:0;
}
/* ===== LEFT MENU MOBIL ===== */
#leftMenu.is-mobile {
  position: fixed;
  background-color: transparent;
  bottom: 0;
  left: 5%;
  right: 0;
  top: auto;
  width: 90%;
  height: auto;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  transform: translateY(calc(100% - 60px));
  transition: transform 0.3s ease;
  z-index: 1000;
}

#leftMenu.is-mobile.drawer-open {
  transform: translateY(0);
}

/* Poignée swipe */
#leftMenu.is-mobile #drawer-handle {
  display: flex;
  align-items: center;
  border-radius: 15px 15px 0 0;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
  background-color: #F2F2F2;
  text-align: left;
  padding: 10px;
}
#leftMenu.is-mobile #drawer-handle img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  background-color: #fff;
}

#leftMenu.is-mobile #drawer-handle::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 40%;
  width: 20%;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
}

/* Masquer le logo en mobile */
#leftMenu.is-mobile #leftMenuLogo {
  display: none;
}

/* Paysage : bascule en panneau latéral bas */
/* Dans navigation.css — @media (orientation: landscape) */
@media (orientation: landscape) {

  #leftMenu.is-mobile {
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 52px;
    height: 100%;
    transform: translateX(0);
    transition: width 0.3s ease;
    display: flex;
    flex-direction: row;
    border-radius: 0;
    box-shadow: 4px 0 12px rgba(0,0,0,0.15);
  }

  #leftMenu.is-mobile.drawer-open {
    width: 270px;
  }

  #leftMenu.is-mobile #drawer-handle {
    width: 52px;
    height: 100%;
    flex-direction: column;
    border-radius: 0;
    padding: 12px 6px;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  #leftMenu.is-mobile #drawer-handle::before {
    display: none;
  }

  /* Masque contenu quand replié */
  #leftMenu.is-mobile:not(.drawer-open) #layerMenu {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
  }
  #leftMenu.is-mobile.drawer-open #layerMenu {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.15s 0.15s;
  }

}