@charset "utf-8";

/* Intro */




body
{
width: 99vw;
height: 96vh;
background-image: url("Background/stars.jpg");
background-size: cover;
}





header
{
width: 90vw;
height: 75.85vh;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -45vw;
top: 50%;
margin-top: -37.925vh;
}



/* Décors */

#CercleExt
{
position: absolute;
left: 50%;
margin-left: -37.975vh;
border-style: solid;
border-color: #ffffff;
border-width: 1px;
border-radius: 50%;
	width: 75.85vh;
	height: 75.85vh; 
}


#CercleExtCadr
{
position: absolute;
left: 50%;
margin-left: -27.5vh;
top: 50%;
margin-top: -27.5vh;
border-style: solid;
border-color: #ffffff;
border-width: 1px;
border-radius: 50%;
	width: 55vh;
	height: 55vh; 
}

#CercleInterB {
position: absolute;
left: 50%;
margin-left: -6vh;
top: 50%;
margin-top: -5.5vh;
border-style: solid;
border-color: #000000;
background-color: #FFFFFF;
border-width: 1px;
border-radius: 50%;
width: 11vh;
height: 11vh; 
z-index: 6;
}


#CercleInterF {
position: absolute;
left: 50%;
margin-left: -0.8vh;
top: 50%;
margin-top: -0.5vh;
border-style: solid;
border-color: #ffffff;
background-color: #000000;
border-width: 1px;
border-radius: 50%;
width: 1vh;
height: 1vh; 
z-index: 7;
}


#Portion
{
position: absolute;
width: 64vh;
left: 50%;
margin-left: -32vh;
top: 50%;
margin-top: -32vh;
}


#Carre
{
position: absolute;
left: 50%;
margin-left: -19.44vh;
top: 50%;
margin-top: -19.44vh;
border-style: solid;
border-color: #ffffff;
border-width: 1px;
border-radius: 0%;
	width: 38.88vh;
	height: 38.88vh; 
}


#contact {
color: white;
background-color: black;
font-size: 3vh;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
max-height: 100%;
position: relative;
right 1vw;
}


#CercleInterB:hover {
cursor: pointer;
}

/* -------------------------  Rose des vents ---------------------------- */

#Nord_noir, #Nord_blancG, #Nord_blancD,  #CercleNord, #Nord_gris {
position: absolute;
left: 50%;
border-style: solid;
}

#Nord_noir
{
top: -1vh;
margin-left: -4.125vh;
border-width:  0 4.125vh 37.925vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 2;
}


#Nord_blancG, #Nord_blancD {
top: 1.38vh;
width: 0;
height: 0;
border-color: transparent transparent #ffffff transparent;
z-index: 3;
}

#Nord_blancG
{
margin-left: -4.025vh;
border-width: 0 0 36.546vh 3.975vh;
}
#Nord_blancD
{
margin-left: 0vh;
border-width: 0 3.975vh 36.546vh 0;
}


#Nord_gris
{
margin-left: -4.125vh;
border-width:  0vh 4.125vh 37.925vh 4.125vh;
border-color: transparent transparent #ffffff transparent;
z-index: 4;
opacity: 0;
}

#Nord_gris:hover, #Nord_noir:hover bulleN
{
opacity:0.6;
cursor: pointer;
}





#CercleNord
{
margin-left: -1.9vh;
top: 0%;
margin-top: -1.64vh;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vh;
	height: 3.3vh;
background: #ffffff;
z-index: 5; 
}



#NordNE_noir, #NordNE_blancG, #NordNE_blancD {
position: absolute;
left: 50%;
top: 50%;
border-style: solid;
}

#NordNE_noir
{
margin-left: -0.4vh;
margin-top: -18.8vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 1;
transform: rotate(22.5deg);
}


#NordNE_blancG, #NordNE_blancD {
width: 0;
height: 0;
border-color: transparent transparent #ffffff transparent;
z-index: 2;
transform: rotate(22.5deg);
}

#NordNE_blancG
{
margin-left: -0.1vh;
margin-top: -18.8vh;
border-width: 0 0 18.5vh 3.875vh;
}

#NordNE_blancD
{
margin-left: 3.5vh;
margin-top: -17.3vh;
border-width: 0 3.875vh 18.5vh 0;
}



#NordEst_noir, #NordEst_blancG, #NordEst_blancD, #NordEst_gris {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
}

#NordEst_noir
{
margin-top: -23.47vh;
margin-left: 4.72vh;
border-width: 0 5vh 27.5vh 5vh;
border-color: transparent transparent #000000 transparent;
z-index: 2;
transform: rotate(45deg);
}

#NordEst_blancG, #NordEst_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 3;
transform: rotate(45deg);
}

#NordEst_blancG
{
margin-top: -23.65vh;
margin-left: 5.05vh;
border-width: 0 0px 25.85vh 4.7vh;
}
#NordEst_blancD
{
margin-top: -20.33vh;
margin-left: 8.37vh;
border-width: 0 4.7vh 25.85vh 0px;
}

#NordEst_gris
{
margin-top: -23.47vh;
margin-left: 4.72vh;
border-width: 0 5vh 27.5vh 5vh;
border-color: transparent transparent #FF0000 transparent;
z-index: 4;
transform: rotate(45deg);
opacity: 0;
}

#NordEst_gris:hover, #NordEst_noir:hover bulleNE
{
opacity:0.6;
cursor: pointer;
}







#EstEN_noir, #EstEN_blancG, #EstEN_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;

}

#EstEN_noir
{
margin-top: -13.4vh;	
margin-left: 4.9vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(67.5deg);
}

#EstEN_blancG, #EstEN_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(67.5deg);
}

#EstEN_blancG
{
margin-top: -14.6vh;
margin-left: 6.2vh;
border-width:  0 0 18.5vh 3.875vh;
}
#EstEN_blancD
{
margin-top: -11.1vh;
margin-left: 7.6vh;
border-width:  0 3.875vh 18.5vh 0;
}





#Est_noir, #Est_blancG, #Est_blancD, #Est_gris, #CercleEst {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
}


#Est_noir
{
margin-top: -4.125vh;
margin-left: 0px;
border-width:  4.125vh 0 4.125vh 37.925vh;
border-color: transparent transparent transparent #000000;
z-index: 2;
}


#Est_blancD, #Est_blancG
{
border-color:  transparent transparent transparent #ffffff;
z-index: 3;
}

#Est_blancG
{
margin-top: -4.025vh; 
border-width:  3.975vh 0 0px 36.546vh;
}
#Est_blancD
{
margin-left: 0px;
border-width:  0px 0 3.975vh 36.546vh;
}


#Est_gris
{
margin-top: -4.125vh;
margin-left: 0px;
border-width:  4.125vh 0 4.125vh 37.925vh;
border-color: transparent transparent transparent #00FF00;
z-index: 4;
opacity: 0;
}

#Est_gris:hover, #Est_noir:hover bulleE
{
opacity: 0.6;
cursor: pointer;
}



#CercleEst
{
margin-left: 36.275vh;
margin-top: -1.9vh;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vh;
	height: 3.3vh;
background: #ffffff;
z-index: 5; 
}



#EstES_noir, #EstES_blancG, #EstES_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;
}


#EstES_noir
{
margin-top: -6.1vh;	
margin-left: 4.9vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(112.5deg);
}

#EstES_blancG
{
margin-top: -7.4vh;
margin-left: 7.6vh;
border-width:  0 0 18.5vh 3.875vh;
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(112.5deg);
}

#EstES_blancD
{
margin-top: -3.8vh;
margin-left: 6vh;
border-width:  0 3.875vh 18.5vh 0;
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(112.5deg);
}




#SudEst_noir, #SudEst_blancG, #SudEst_blancD, #SudEst_gris {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
}


#SudEst_noir
{
margin-top: -4.03vh;
margin-left: 4.72vh;
border-width: 27.5vh 5vh 0 5vh;
border-color: #000000 transparent transparent transparent;
z-index: 2;
transform: rotate(-45deg);
}

#SudEst_blancG, #SudEst_blancD {
border-color: #ffffff transparent transparent transparent;
z-index: 3;
transform: rotate(-45deg);
}

#SudEst_blancG
{
margin-top: -2vh;
margin-left: 5.1vh;
border-width: 25.85vh 0px 0 4.7vh;
}
#SudEst_blancD
{
margin-top: -5.2vh;
margin-left: 8.6vh;
border-width: 25.85vh 4.7vh 0 0px;
}

#SudEst_gris
{
margin-top: -4.03vh;
margin-left: 4.72vh;
border-width: 27.5vh 5vh 0 5vh;
border-color: #FF8000 transparent transparent transparent;
z-index: 4;
transform: rotate(-45deg);
opacity: 0;
}

#SudEst_gris:hover, #SudEst_noir:hover bulleSE
{
opacity: 0.6;
cursor: pointer;
}




#SudSE_noir, #SudSE_blancG, #SudSE_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;
}

#SudSE_noir
{
margin-top: -0.7vh;	
margin-left: -0.4vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(157.5deg);
}


#SudSE_blancG, #SudSE_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(157.5deg);
}

#SudSE_blancG
{
margin-top: -1vh;
margin-left: 3.5vh;
border-width:  0 0 18.5vh 3.875vh;
}
#SudSE_blancD
{
margin-top: 0.4vh;
margin-left: -0vh;
border-width:  0 3.875vh 18.5vh 0;
}








#Sud_noir, #Sud_blancG, #Sud_blancD, #Sud_gris, #CercleSud  {
position: absolute;
left: 50%;
width: 0;
height: 0;
border-style: solid;
}

#Sud_noir
{
top: 37.925vh; 
margin-left: -4.125vh;
border-width: 37.925vh 4.125vh 0 4.125vh;
border-color: #000000 transparent transparent transparent;
z-index: 2;
}

#Sud_blancG, #Sud_blancD {
border-color: #ffffff transparent transparent transparent;
z-index: 3;
}

#Sud_blancG
{
top: 37.925vh; 
margin-left: -4.025vh;
border-width: 36.546vh 0px 0 3.975vh;
}
#Sud_blancD
{
top: 37.925vh;
margin-left: 0px;
border-width: 36.546vh 3.975vh 0 0px;
}

#Sud_gris
{
top: 37.925vh; 
margin-left: -4.125vh;
border-width: 37.925vh 4.125vh 0 4.125vh;
border-color: #000000 transparent transparent transparent;
z-index: 4;
opacity: 0;
}

#Sud_gris:hover, #Sud_noir:hover bulleS
{
opacity: 0.6;
cursor: pointer;
}

#CercleSud
{
margin-left: -1.9vh;
top: 72.5vh;
margin-top: 1.750vh;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vh;
	height: 3.3vh;
background: #ffffff;
z-index: 5; 
}




#SudSO_noir, #SudSO_blancG, #SudSO_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;

}

#SudSO_noir
{
margin-top: -.7vh;	
margin-left: -7.8vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(-157.5deg);
}

#SudSO_blancG, #SudSO_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-157.5deg);
}

#SudSO_blancG
{
margin-top: 0.5vh;
margin-left: -3.9vh;
border-width:  0 0 18.5vh 3.875vh;
}
#SudSO_blancD
{
margin-top: -1.4vh;
margin-left: -7.3vh;
border-width:  0 3.875vh 18.5vh 0;
}







#SudOuest_noir, #SudOuest_blancG, #SudOuest_blancD, #SudOuest_gris {
position: absolute;
top: 50%; 
left: 50%;
width: 0;
height: 0;
border-style: solid;
}


#SudOuest_noir
{
margin-top: -4.03vh;
margin-left: -14.72vh;
border-width: 27.5vh 5vh 0 5vh;
border-color: #000000 transparent transparent transparent;
z-index: 2;
transform: rotate(45deg);
}


#SudOuest_blancG, #SudOuest_blancD {
border-color: #ffffff transparent transparent transparent;
z-index: 3;
transform: rotate(45deg);
}

#SudOuest_blancG
{
margin-top: -5.4vh;
margin-left: -13.2vh;
border-width: 25.85vh 0px 0 4.7vh;
}
#SudOuest_blancD
{
margin-top: -2.2vh;
margin-left: -9.8vh;
border-width: 25.85vh 4.7vh 0 0px;
}

#SudOuest_gris
{
margin-top: -4.03vh;
margin-left: -14.72vh;
border-width: 27.5vh 5vh 0 5vh;
border-color: #FFFF00 transparent transparent transparent;
z-index: 4;
transform: rotate(45deg);
opacity: 0;
}

#SudOuest_gris:hover, #SudOuest_noir:hover bulleSO
{
opacity: 0.6;
cursor: pointer;
}


#OuestOS_noir, #OuestOS_blancG, #OuestOS_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;
}

#OuestOS_noir
{
margin-top: -6.1vh;	
margin-left: -13.2vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(-112.5deg);
}

#OuestOS_blancG
{
margin-top: -3.8vh;
margin-left: -10.2vh;
border-width:  0 0 18.5vh 3.875vh;
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-112.5deg);
}

#OuestOS_blancD
{
margin-top: -7.4vh;
margin-left: -11.7vh;
border-width:  0 3.875vh 18.5vh 0;
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-112.5deg);
}






#Ouest_noir, #Ouest_blancG, #Ouest_blancD, #Ouest_gris, #CercleOuest {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;

}

#Ouest_noir
{
margin-top: -4.125vh;
margin-left: -37.925vh;
border-width:  4.125vh 37.925vh 4.125vh 0;
border-color: transparent #000000 transparent transparent;
z-index: 2;
}

#Ouest_blancG, #Ouest_blancD {
border-color:  transparent #ffffff transparent transparent;
z-index: 3;
}

#Ouest_blancG
{
margin-left: -36.546vh;
border-width:  0px 36.546vh 3.975vh 0;
}
#Ouest_blancD
{
margin-top: -4.025vh;
margin-left: -36.546vh;
border-width:  3.975vh 36.546vh 0 0px;
}

#Ouest_gris
{
margin-top: -4.125vh;
margin-left: -37.925vh;
border-width:  4.125vh 37.925vh 4.125vh 0;
border-color: transparent #0000FF transparent transparent;
z-index: 4;
opacity: 0;
}

#Ouest_gris:hover, #Ouest_noir:hover bulleO
{
opacity: 0.6;
cursor: pointer;
}

#CercleOuest
{
margin-left: -39.575vh;
margin-top: -1.9vh;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vh;
	height: 3.3vh;
background: #ffffff;
z-index: 5; 
}




#OuestON_noir, #OuestON_blancG, #OuestON_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;
}

#OuestON_noir
{
margin-top: -13.4vh;	
margin-left: -12.9vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(-67.5deg);
}


#OuestON_blancG, #OuestON_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-67.5deg);
}

#OuestON_blancG
{
margin-top: -11.1vh;
margin-left: -11.4vh;
border-width:  0 0 18.5vh 3.875vh;
}
#OuestON_blancD
{
margin-top: -14.6vh;
margin-left: -9.9vh;
border-width:  0 3.875vh 18.5vh 0;
}







#NordOuest_noir, #NordOuest_blancG, #NordOuest_blancD, #NordOuest_gris {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;

}

#NordOuest_noir
{
margin-top: -23.47vh;
margin-left: -14.72vh;
border-width: 0 5vh 27.5vh 5vh;
border-color: transparent transparent #000000 transparent;
z-index: 2;
transform: rotate(-45deg);
}

#NordOuest_blancG, #NordOuest_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 3;
transform: rotate(-45deg);
}

#NordOuest_blancG
{
margin-top: -23.65vh;
margin-left: -10vh;
border-width: 0 4.7vh 25.85vh 0;
}
#NordOuest_blancD
{
margin-top: -20.33vh;
margin-left: -13.2vh;
border-width: 0 0px 25.85vh 4.7vh;
}

#NordOuest_gris
{
margin-top: -23.47vh;
margin-left: -14.72vh;
border-style: solid;
border-width: 0 5vh 27.5vh 5vh;
border-color: transparent transparent #ff00ff transparent;
z-index: 4;
transform: rotate(-45deg);
opacity: 0;
}

#NordOuest_gris:hover, #NordOuest_noir:hover bulleNO
{
opacity: 0.6;
cursor: pointer;
}


#NordNO_noir, #NordNO_blancG, #NordNO_blancD {
position: absolute;
top: 50%;
left: 50%;
border-style: solid;

}

#NordNO_noir
{
margin-top: -18.8vh;	
margin-left: -7.9vh;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(-22.5deg);
}

#NordNO_blancG, #NordNO_blancD {
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-22.5deg);

}

#NordNO_blancG
{
margin-top: -17.4vh;
margin-left: -7.5vh;
border-width:  0 0 18.5vh 3.875vh;
}
#NordNO_blancD
{
margin-top: -19vh;
margin-left: -3.9vh;
border-width:  0 3.875vh 18.5vh 0;
}






/* Menus déroulants au clic */


bulleN, bulleNE, bulleE, bulleSE, bulleS, bulleSO, bulleO, bulleNO {
position: absolute;
display: block;
text-align: center;
font-size: 3.3vh;
font-weight: bold;
width: 20vh;
opacity: 1;
color: #ffffff;
}

bulleN
{
margin-top: -9vh;
margin-left: -10vh;
}
bulleNE
{
margin-top: -16vh;
margin-left: -10vh;
}
bulleE
{
margin-top: -2vh;
margin-left: -4vh;
transform: rotate(90deg);
}
bulleSE
{
margin-top: 12vh;
margin-left: -12vh;
}
bulleS
{
margin-top: 2vh;
margin-left: -10vh;
}
bulleSO
{
margin-top: 12vh;
margin-left: -10vh;
}
bulleO
{
margin-top: -2vh;
margin-left: -15vh;
transform: rotate(-90deg);
}
bulleNO
{
margin-top: -16vh;
margin-left: -9vh;
}









/* dd container */
.ClicDeroule {
	display: block;
  outline: none;
  padding: 0px;
}


/* dd content */
.ClicDeroule .ContenuDeroule {
  min-width: 20vw;
  visibility: hidden;
  opacity: 1;
  position: absolute;
top: -3px;
height: 100%;
    font-size: 4vh;
    font-weight: bold;
display: flex;
	align-items: center;
z-index: 6;
}




droite ~ .ContenuDeroule {
right: -3px;
}




#MenuNord, #MenuNordEst, #MenuEst, #MenuSudEst, #MenuSud, #MenuSudOuest, #MenuOuest, #MenuNordOuest {
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 100%;
max-height: 100%;
position: absolute;
right -3px;
}



#MenuNord{
background-color: #FFFFFF;
}
#MenuNordEst {
background-color: #FF0000;
}	
#MenuEst {
background-color: #00FF00;
}
#MenuSudEst {
background-color: #FF8000;
}
#MenuSud {
background-color: #000000;
}
#MenuSudOuest {
background-color: #FFFF00;
}
#MenuOuest {
background-color: #0000FF;
}
#MenuNordOuest {
background-color: #FF00FF;
}

.ContenuDeroule a {
  padding: 1vh 16px;
  display: block;
  text-decoration: none;
  transition: 0.15s ease-out;

}

.black {
color: #000000;
}
.white {
color: #FFFFFF;
}
.orange {
color: #FF8000;
}
.yellow {
color: #FFFF00;
}
.green {
color: #00FF00;
}
.blue {
color #0000FF;
}
.purple {
color: #FF00FF;
}
.red {
color: #FF0000;
}

.ContenuDeroule a:hover {
font-weight: normal;
}

/* show dd content */
.ClicDeroule:focus .ContenuDeroule {
  outline: none;
  visibility: visible;
  opacity: 1;
}