@charset "utf-8";

/* Intro */

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

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



/* Décors */

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


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


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


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



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


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

address
{

font-size: 2vw;
border-radius: 4px;
box-shadow: -1px 8px 16px 0px rgba(0,0,0,0.2);
height: 6vw;
}


#contact {
color: white;
background-color: #000000;
position: relative;
bottom: -85vh;
padding: 0 0;
}

#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: -1vw;
margin-left: -4.125vw;
border-width:  0 4.125vw 37.925vw 4.125vw;
border-color: transparent transparent #000000 transparent;
z-index: 2;
}

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

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

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


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



#CercleNord
{
margin-left: -1.9vw;
top: 0%;
margin-top: -1.64vw;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vw;
	height: 3.3vw;
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.4vw;
margin-top: -18.8vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
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.1vw;
margin-top: -18.8vw;
border-width: 0 0 18.5vw 3.875vw;
}

#NordNE_blancD
{
margin-left: 3.5vw;
margin-top: -17.3vw;
border-width: 0 3.875vw 18.5vw 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.47vw;
margin-left: 4.72vw;
border-width: 0 5vw 27.5vw 5vw;
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.65vw;
margin-left: 5.05vw;
border-width: 0 0px 25.85vw 4.7vw;
}
#NordEst_blancD
{
margin-top: -20.33vw;
margin-left: 8.37vw;
border-width: 0 4.7vw 25.85vw 0px;
}

#NordEst_gris
{
margin-top: -23.47vw;
margin-left: 4.72vw;
border-width: 0 5vw 27.5vw 5vw;
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.4vw;	
margin-left: 4.9vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
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.6vw;
margin-left: 6.2vw;
border-width:  0 0 18.5vw 3.875vw;
}
#EstEN_blancD
{
margin-top: -11.1vw;
margin-left: 7.6vw;
border-width:  0 3.875vw 18.5vw 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.125vw;
margin-left: 0px;
border-width:  4.125vw 0 4.125vw 37.925vw;
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.025vw; 
border-width:  3.975vw 0 0px 36.546vw;
}
#Est_blancD
{
margin-left: 0px;
border-width:  0px 0 3.975vw 36.546vw;
}


#Est_gris
{
margin-top: -4.125vw;
margin-left: 0px;
border-width:  4.125vw 0 4.125vw 37.925vw;
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.275vw;
margin-top: -1.9vw;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vw;
	height: 3.3vw;
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.1vw;	
margin-left: 4.9vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(112.5deg);
}

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

#EstES_blancD
{
margin-top: -3.8vw;
margin-left: 6vw;
border-width:  0 3.875vw 18.5vw 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.03vw;
margin-left: 4.72vw;
border-width: 27.5vw 5vw 0 5vw;
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: -2vw;
margin-left: 5.1vw;
border-width: 25.85vw 0px 0 4.7vw;
}
#SudEst_blancD
{
margin-top: -5.2vw;
margin-left: 8.6vw;
border-width: 25.85vw 4.7vw 0 0px;
}

#SudEst_gris
{
margin-top: -4.03vw;
margin-left: 4.72vw;
border-width: 27.5vw 5vw 0 5vw;
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.7vw;	
margin-left: -0.4vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
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: -1vw;
margin-left: 3.5vw;
border-width:  0 0 18.5vw 3.875vw;
}
#SudSE_blancD
{
margin-top: 0.4vw;
margin-left: -0vw;
border-width:  0 3.875vw 18.5vw 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.925vw; 
margin-left: -4.125vw;
border-width: 37.925vw 4.125vw 0 4.125vw;
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.925vw; 
margin-left: -4.025vw;
border-width: 36.546vw 0px 0 3.975vw;
}
#Sud_blancD
{
top: 37.925vw;
margin-left: 0px;
border-width: 36.546vw 3.975vw 0 0px;
}

#Sud_gris
{
top: 37.925vw; 
margin-left: -4.125vw;
border-width: 37.925vw 4.125vw 0 4.125vw;
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.9vw;
top: 72.5vw;
margin-top: 1.750vw;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vw;
	height: 3.3vw;
background: #ffffff;
z-index: 5; 
}




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

}

#SudSO_noir
{
margin-top: -.7vw;	
margin-left: -7.8vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
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.5vw;
margin-left: -3.9vw;
border-width:  0 0 18.5vw 3.875vw;
}
#SudSO_blancD
{
margin-top: -1.4vw;
margin-left: -7.3vw;
border-width:  0 3.875vw 18.5vw 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.03vw;
margin-left: -14.72vw;
border-width: 27.5vw 5vw 0 5vw;
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.4vw;
margin-left: -13.2vw;
border-width: 25.85vw 0px 0 4.7vw;
}
#SudOuest_blancD
{
margin-top: -2.2vw;
margin-left: -9.8vw;
border-width: 25.85vw 4.7vw 0 0px;
}

#SudOuest_gris
{
margin-top: -4.03vw;
margin-left: -14.72vw;
border-width: 27.5vw 5vw 0 5vw;
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.1vw;	
margin-left: -13.2vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(-112.5deg);
}

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

#OuestOS_blancD
{
margin-top: -7.4vw;
margin-left: -11.7vw;
border-width:  0 3.875vw 18.5vw 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.125vw;
margin-left: -37.925vw;
border-width:  4.125vw 37.925vw 4.125vw 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.546vw;
border-width:  0px 36.546vw 3.975vw 0;
}
#Ouest_blancD
{
margin-top: -4.025vw;
margin-left: -36.546vw;
border-width:  3.975vw 36.546vw 0 0px;
}

#Ouest_gris
{
margin-top: -4.125vw;
margin-left: -37.925vw;
border-width:  4.125vw 37.925vw 4.125vw 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.575vw;
margin-top: -1.9vw;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vw;
	height: 3.3vw;
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.4vw;	
margin-left: -12.9vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
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.1vw;
margin-left: -11.4vw;
border-width:  0 0 18.5vw 3.875vw;
}
#OuestON_blancD
{
margin-top: -14.6vw;
margin-left: -9.9vw;
border-width:  0 3.875vw 18.5vw 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.47vw;
margin-left: -14.72vw;
border-width: 0 5vw 27.5vw 5vw;
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.65vw;
margin-left: -10vw;
border-width: 0 4.7vw 25.85vw 0;
}
#NordOuest_blancD
{
margin-top: -20.33vw;
margin-left: -13.2vw;
border-width: 0 0px 25.85vw 4.7vw;
}

#NordOuest_gris
{
margin-top: -23.47vw;
margin-left: -14.72vw;
border-style: solid;
border-width: 0 5vw 27.5vw 5vw;
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.8vw;	
margin-left: -7.9vw;
border-width:  0 4.125vw 19.5vw 4.125vw;
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.4vw;
margin-left: -7.5vw;
border-width:  0 0 18.5vw 3.875vw;
}
#NordNO_blancD
{
margin-top: -19vw;
margin-left: -3.9vw;
border-width:  0 3.875vw 18.5vw 0;
}






/* Menus déroulants au clic */


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

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









/* dd container */
.ClicDeroule {
  outline: none;
  margin: 10px;
}


/* dd content */
.ContenuDeroule {
  visibility: hidden;
  opacity: 1;
  position: fixed; 
  z-index: 10;
  transition: 0.05s ease-out;
    font-size: 3vw;
    font-weight: bold;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 38%;
left: 31%;
border-radius: 5px;
}

.ClicDeroule, .ContenuDeroule {
    top: 1vh;
}


#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;
  margin: auto;
  text-decoration: none;
  transition: 0.05s ease-out;
  text-align: center;
}


.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 {
  background-color: #eaeaea;
font-weight: normal;
}

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