@font-face {
  font-family: OpenSans;
  src: url("../FONT/Open_Sans/OpenSans-Regular.ttf") ;
}




@font-face {
  font-family: akrobat;
  src: url(../FONT/akrobat/Akrobat-Regular.otf) ;
}
@font-face {
  font-family: akrobatBold;
  src: url(../FONT/akrobat/Akrobat-Bold.otf) ;
}
@font-face {
  font-family: akrobatBlack;
  src: url(../FONT/akrobat/Akrobat-Black.otf) ;
}

@font-face {
  font-family: notoMed;
  src: url(../FONT/noto_sans/NotoSans-Medium.ttf) ;
}


 
#DIV_MESSAGE{
	position: absolute;
	left: 20%;
	top:-200px;
	background-color: antiquewhite;
	height: 150;
	width: 400px;
	padding: 5px; 
	color: black;
		
	
	
	
}


        /* Conteneur principal de la navigation, positionné en bas */
        #IDV_NAV_PLAN {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%); /* Centre horizontalement la div */
            width: 90%; /* Largeur en pourcentage pour la responsivité */
            max-width: 500px; /* Limite la largeur sur les grands écrans */
            height: 80px;
            background-image: url('../minimap.svg'); 
            background-size: 85% 90%;
			background-repeat: no-repeat;
			background-position: center center;
			background-color: rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            border: 1px solid #ccc;
            touch-action: none; /* Empêche le défilement sur mobile lors du toucher */
        }
 
        /* Le curseur déplaçable par l'utilisateur */
        #DIV_NAV_CURSOR {
            position: absolute;
            top: 2.5px; /* Centre verticalement par rapport au conteneur */
            left: 200px; /* Position de départ */
            width: 50px; 
            height: 70px;
             /* background-color: rgba(255, 0, 0, 0.6);Rouge semi-transparent */
            border: 2px solid #ffffff;
            border-radius: 6px;
            cursor: ew-resize; /* Curseur indiquant un déplacement horizontal */
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
			
			/*transition : left 2s;*/
        }


#MENU{ 
	
	position: absolute;
	right: 50px;
	top : 50px;
	width:30px;
	height: 5px;
	/*background-image:url("../images/menu_50.png");*/
	background-color: white;
	background-size: contain;
	background-position: center center;
	z-index: 900;
	
}

#menuMain{
	
	position: absolute;
	right: 50px;
	top : 85px;
	visibility:hidden;
	z-index: 900;
}

.menuBt:hover{
	
	opacity: 1;
	cursor: pointer;
	
}

.menuBt{
	height: 35px;
	line-height: 35px;
	witdh: 200px;
	opacity: 0.5;
	margin: 3px;
	text-align: right;
	
}

#MENU:hover{
	
	background-image:url("../images/menu_on.png");
	cursor: pointer;
}


body { 
	
	margin: 0%; 

	overflow: hidden;
	background-color: black; 
	color: #FFF ;
	padding: 0%;
	height: 100%;
   width: 100%;
	overflow: hidden;
	font-family: akrobat;
	
}

html {
   margin: 0px;

}




 
#DIV_MEDIA{

	opacity: 100%;
	width: 90%;
	height: 0%;
	top: 5%;
	left:5%;
	
	border-radius: 10px;
	position: absolute;
	z-index: 600;
	background-color: black;
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	overflow: hidden;
	text-align: center;
	line-height: 90%;
	
}


.myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

#GLOABL_FRAME{

	

	opacity: 1;

	width: 100%;

	height: 100%;

	top : 0px;

	position: absolute;

	z-index: 50;

	/*background-color: red;*/

	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;

	overflow: hidden;

	



}


#DIV_BKG{

	width:100%;
	height: 100%;
	
	position: absolute;
	z-index: -1;
	background-color: black;
	/*background-image: radial-gradient(#102032,#030609, #000000);*/
	background-image: url('../RESSOURCES/BKG_00.jpg');
	
	
	
	background-repeat: no-repeat;
	color: #FFF;
	overflow: hidden;
	background-size:cover;
	background-position: center center ;
} 

#DEBUG
{
	
	text-align:  left bottom;
}

#DIV_LOADING{
	
	
	width:100%;
	height: 0;
	top:50%;
	position: absolute;
	z-index: 100;
	/*background-color: red;*/
	color: #FFF;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 20px;
	text-align: center;
	line-height: 100%;
	
	
}


 


#DIV_INFO{

	opacity: 0%;
	width: 400px;
	
	height: 100%;
	top : 5%;
	left: -50%;
	position: absolute;
	z-index: 300;
	background-color:rgba(0,0,0,0.0);
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 3s, border 2s, transform 2s;
	font-family: akrobatBold;
	
}


@media  (max-width: 1000px) {
	
	#DIV_INFO{ 
		width: 100%;
		top : -20px;
		transform: scale(0.6);
		
		margin-left: -20%;
	}
}


#DIV_THREEJS_3D{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    /*background-color: red;*/
    color: #FFF;
    overflow: hidden;
    left: 4px;
	
	
}
#DIV_BT_BAS{
	
	
	height: 70px;
	position: absolute;
	bottom: 0px;
	padding: 5px;
	left :50%;
	width :200px;
	margin-left: -100px;
	
	z-index: 100;
	
	opacity: 0;
	transition: opacity 2s;
	
}




#DIV_LAYER_2D{
	
	opacity: 1;
	width: 100%;
	height: 00px;
	top : 0px;
	position: absolute;
	z-index: 50; 
	/*background-color: red;*/
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	
}


#DIV_LAYER_NAV{
	
	opacity: 1;
	width: 100%;
	height: 00px;
	top : 0px;
	position: absolute;
	z-index: 60; 
	/*background-color: red;*/
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 2s, border 2s, transform 2s;
	
}



#DIV_LAYER_CANEVAS {
	
	opacity: 1;
	width: 100%;
	height: 100%;
	top : 0px;
	position: absolute;
	z-index: 60; 
	/*background-color: red;*/
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	
}

#DIV_LAYER_SETTING{
	
	opacity: 1;
	width: 100%;
	height: 1px;
	top : 0px;
	position: absolute;
	z-index: 80;
	/*background-color: red;*/
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	
}
#DIV_BT_HAUT{
	top:0px;
	left:0px;
	height: 50px;
	width: 100%;
	position: absolute;
	z-index: 70;
	padding: 20px; 

	
}



.loading{
	
	font-family: akrobat;
	opacity: 0;
	transition: opacity 2s;
	
}




.FullScreen{
	
	background-image: url("/ARIANNE_DEMO/images/circleMaximize.png");
	background-size: contain;
	width: 50px;
	height: 50px;
	right: 50px;
	position: absolute;
	
}




.lineUp {
	
	border-radius: 35px;
	background-color: #233287;
	/*width: auto;*/
	height: 30px;
	padding: 20px;
	padding-left: 30px;
	padding-right: 30px;

	transition: top 0.2s, bottom 0.2s, left 0.2s, right 0.2s, width 0.2s, height 0.2s, opacity 0.5s, border 2s, transform 0.5s;
}

.buttonRead {
	
	position: absolute;
	display: block;
	float: left;
	
	margin: 0px;
	margin-top: 15px;
	padding: 6px;
	padding-left: 0px;
	
	text-align: center;
	color:#dddddd ;
	font-family: akrobat;
	
 

	transition: background-color 0.5s, color 0.5s, padding-left 0.5s ;
}

.buttonRead:hover {
	
	background-color: #1352D1;
	cursor: pointer;
	color:#ffffff ;
	padding-left: 6px;
}

.button {
	

	background-color: #193463 ;
	padding: 6px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	color:#dddddd ;
	font-family: akrobat;
	right:5px;
 

	transition: background-color 0.5s, color 0.5s ;
}


.button:hover {
	
	background-color: #1352D1;
	cursor: pointer;
	color:#ffffff ;
}

.trans{
	background-color:"";
	
}


.button2 {
	

	background-color: #555555 ;
	height: 30px;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;

	transition: top 0.2s, bottom 0.2s, left 0.2s, right 0.2s, width 0.2s, height 0.2s, opacity 0.5s, border 2s, transform 0.5s;
}


.button2:hover {
	
	background-color: #1655FB;
	cursor: pointer;
	
}





.buttonFocus{
	
			
		
 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	
			
			font-family: notoMed;
			font-size : 25px;
			color:#FFF;
			opacity:1;
			cursor : pointer;
			margin-top: -20px;
			border-radius :50%;
			background-color:"rgba(255,255,255,0.3)";
			opacity: 1;
	

			background-image: url("../RESSOURCES/icone_plus_on.png");

			background-size: cover;
			
			backdrop-filter: blur(5px) brightness(120%) contrast(70%); 
			-webkit-backdrop-filter: blur(5px) brightness(120%) contrast(70%);
	
			transition: background-image 0.2s, color 0.5s, opacity 0.5s;
	
	
}

.buttonFocus:hover{
	

	background-image: url("../RESSOURCES/icone_plus_off.jpg");
	color: white;
	opacity: 0.9;

	 
	
}



.buttonFocusLine{
	
	opacity:0.9;
	color: #AAAAAA;
	height: 200px;
	width: 1.5px;
	 
	
background-image: url("../images/DOT_V01.png");
	
	transition: background-image 0.5s, color 0.5s, opacity 0.5s;
	
	
}.buttonFocusTxt{
	
	opacity:0.9;
	color: #BBBBBB; 
	font-size: 15px;
	
	font-family: notoMed;

	height: 100%;
	line-height: 100%;
	
	transition: background-image 0.5s, color 0.5s, opacity 0.5s;
}

.buttonFocusTxt:hover{
	
	opacity:1;
	color: white;
	
}




.closeCross{
	
	
	background-image:  url("/MAIA_DIGITAL/DEV_V02/images/close_off.png");
	background-size: cover;
	transition: background-image 1s;
	
	
}




.closeCross:hover{
	
	
	background-image:  url("/MAIA_DIGITAL/DEV_V02/images/close_on_gris50.png");
	
	transition: background-image 1s;
}



.video {

float : right;
height : 80px;
width : 80px;
background-size: cover;
margin-Left: 10px;
border-Radius : 50px;
filter : saturate(0);
cursor: pointer;
}
opacity:100;
transition:  top 0.2s, bottom 0.2s, left 0.2s, right 0.2s, width 0.2s, height 0.2s, opacity 1s, border 1s, transform 0.5s"



.video:hover{
	
	filter: saturate(100);
	transition: width 0.2s, height 0.2s, opacity 0.5s, filter 0.5s, opacity 0.5s;
	opacity : 100;
	cursor: pointer;
}






.infoDiv{
	display: block;
	float: left;
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 3s, border 2s, transform 2s;
	font-family: akrobatBold;
	font-size: 40;
	font-weight: 800;
}




.image-plus-claire {
  /* On combine plusieurs effets en une seule ligne */
  filter: brightness(1.2) contrast(0.9) saturate(1.2); 

  /* Ajoute une transition douce si on veut changer les valeurs avec JavaScript */
  transition: filter 0.3s ease;
}