html{
	
	
	display: flex;
	flex:1;
//*	
v2025
--color1:#219EBC; bleu foncé
--color2: #023047; rouge intro	
--color3: #FFB703; cyan
--color4: #605F5E;
--color5: #E2E2E2;
--color1dark: #8ECAE6;
--color2dark: #126782;
--color3dark: #FB8500;

*//
}

.couleur1{
background-color:#219EBC;
}
.couleur1 a{
color:#219EBC;
}
.couleur2{
background-color:#023047;
}
.couleur2 a{
color:#023047;
}
.couleur3{
background-color:#FFB703;
}

.couleur3 a{
color:#FFB703;
}
.couleur4{
background-color:#1D4851;


}
.couleur4 a{
color:#1D4851;


}
body {
		
	font-family: LGC, Verdana, sans-serif;
	
	font-size: 18px;
	font-weight: normal;
	
	 word-wrap: break-word;

	height: auto;
	
	margin: 0;
	padding: 0;
	display:flex;
	flex-direction: column;
	justify-content:flex-start;
	align-items:center;
flex:1;
}
p{
	
}

.bodyjeu{
	height:100vh;
}
#couverture{
height: 2000px;
}
@font-face {
	font-family: "LGC";

	src: url("font/LGC/LGC.otf") format("opentype");
	src :url("font/LGC/LGC.woff") format("woff"),
	url("font/LGC/LGC.woff2") format("woff2");
	

}
@font-face {
	font-family: "LM";

	src: url("font/LM/lm.otf") format("opentype");
	src: url("font/LM/lm.woff") format("woff"),	
	url("font/LM/lm.woff2") format("woff2");
	

}


.bodyintro{
	height:100vh;
	width:100%;

display: flex;
text-align: center;
flex-direction: column;

justify-content:flex-start;
	align-items: stretch;
font-family: LM,Helvetica, sans-serif;


 
background-color: white;

}
.nom{
font-size: 90px;

}

.menu {
width: 100%;

display: flex;
text-align: center;
flex-direction: column;
justify-content:space-between;

flex-wrap: wrap;
align-content: center;
	align-items: stretch;

}

.menu img{
	width: 30px;

}

.categorie{
padding-bottom:2vh;
display: flex;
width:100%;
flex-direction: column;
	justify-content: space-around;
	align-items:center;
	align-content:center;
	


}

.menu .sousmenu{
	width:100%;
	display : none;
	flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		
	
		align-content:flex-start;

}
.menu .sousmenu .box{
margin : 10px;
		height:80px;
}
/*premiere zone*/
.menu .categorie:nth-child(1) {
	background-color:#219EBC;
flex-grow: 10;

}
.menu  .categorie:nth-child(1) .box{
	border :1px solid #219EBC;
}
.menu  .categorie:nth-child(1) .box:hover{

	background-color:#8ECAE6;
	color:white;
	
}
/*Deuxieme zone*/
.menu  .categorie:nth-child(2) {
	background-color:#023047;

}
.menu  .categorie:nth-child(2) .box{
	border :1px solid #023047;
}
.menu  .categorie:nth-child(2) .box:hover{

	background-color:#126782;
	color:white;
	
}
/*troisieme zone*/
.menu .categorie:nth-child(3) {
	background-color:#FFB703;

}

.menu  .categorie:nth-child(3) .box{
	border :1px solid #FFB703;

}

.menu  .categorie:nth-child(3) .box:hover{

background-color:#FB8500;
	color:white;
	
}

.menu  .categorie .titre{
	color:white;
flex-shrink :1;


}
/*attention .box tout seul est def en bas*/
.bodyintro  .box{

word-wrap: break-word;
width:250px;
max-width:80vw;
margin: 20px 0px;

	text-align: center;
	background-color:white;
	font-size: 16px;
	display : flex;
	flex-direction: column;
	justify-content:center;
	align-content:center;
	text-decoration:none;
	color:black;
	
}
#box1{
display:flex;}
#i1{
	display:none;
}

.bodyintro  .boxfantome{
flex:0 1 75px;
word-wrap: break-word;
width:250px;
max-width:80vw;
margin: 20px 0px;


}

#info{
font-family: LM,Helvetica, sans-serif;
flex : 0.5 0 30px;
display: flex;
	flex-direction: row;
flex-wrap: wrap;
	justify-content: space-around;
width:100%;

}
#info .box {

	
	
} 
#info .box:hover{
	background-color :#E2E2E2;
	color:white;
} 

#couverture .box{
	height: 75px;
	
	   

}
#explain{
margin-top:0;
color:#808080;
font-style: italic;
}
#body #titre {
	
	font-size: 40px;
	
}






/*about*/

#texte1 {
background-color:white;
	display: flex;
text-align: justify;

flex-direction: column;
width:70%;


margin: 10% auto;

padding: 3%;
justify-content: center;
align-items: flex-start;

	
}
#texte1 p{
	width:100%;
}

#texte1 h1{
	font-family: LM,Helvetica, sans-serif;
	width:100%;
}

#texte1 img{
	
	width:500px;
	max-width:80vw;
	height: auto;
	align-self:center;

}

#texte1 .box{
	align-self:center;
	
}

/*pagelem*/

#textelem {

background-color:white;
	display: flex;
text-align: center;

flex-direction: column;
width:70%;


margin: 10% auto;

padding: 3%;
justify-content:center;
align-items: center;

	

}
#textelem h3{

}
#textelem p{
	width:100%;
}

#textelem a{
	 text-decoration:none; 
}
#textelem a:visited {

}
#textelem h1{
	text-align: center;
	font-family: LM,Helvetica, sans-serif;
	width:100%;

}
#textelem h2{
	text-align: center;
	font-family: LM,Helvetica, sans-serif;
	width:100%;
	
}
#textelem .box{
		font-family: LM,Helvetica, sans-serif;


}
.marquepage{
	
	color :#FFB703;
	font-size: 20px;
}

/*MARIAGE*/

#textewed {
font-family: 'Abhaya Libre', serif;
	font-variant: small-caps; 
	
background-color:white;
color:#1D4851;
	display: flex;
text-align:center;

flex-direction: column;
width:80%;


margin: 5% auto;

padding: 3%;
justify-content: center;
align-items: center;

	
}
#textewed h1{
	width:100%;
}
#textewed p{
width:100%;

margin-bottom:5px;
margin-top: 5px;
font-size: 25px;

}

#textewed .gara{
		width:100%;
font-family: 'Cormorant Garamond', serif;
font-variant: normal;
font-size: 20px;
text-align:left;
}


#textewed .lien{
	display: flex;
	flex-direction:row;
	width:100%;
	
	text-decoration:none;
	justify-content:space-around;
	align-content:center;
	flex-wrap: wrap;
	align-items:center;
	text-align:center;
	
	padding :0;
	
}

#textewed .box{

word-wrap: break-word;

padding: 10px 0 10px 0;
margin-left: 1%;
margin-right:  1%;

	text-align: center;

}

#textewed .lien p{
margin-bottom:0px;
margin-top: 0px;
font-size: 20px;
}

/*corps du texte theatre*/
#explication{
background-color:#e8e8e8;
font-style:italic;
width:100%;
padding: 2%;
max-width:80vw;
}


#spotify {
margin-top:20px;	
}
#corps2{
font-family: Baskerville, Baskerville Old Face, Hoefler Text, Garamond, Times New Roman, serif;	
width:100%;
max-width:80vw;
padding: 2%;
}
#corps2 p {
	
Line-Height:1.5;
	margin-top:6px;
}
/*peura*/
#rap{

margin:5%;
padding:3%;
}
#rap p{
color:#808080;
 font-style: italic;
Line-Height:1.5;
margin:0;

}
#rap h2{
	font-size:18px;
	
	margin-top: 20px;
	margin-bottom:20px;
	
}
/* lien du bas*/
.lien{
	display: flex;
	flex-direction:row;
	width:100%;
	text-decoration:none;
	justify-content:space-around;
	align-content:center;
	flex-wrap: wrap;
	align-items:space-around;
	text-align:center;
	
}
.lien a{
	text-decoration:none;
	
}
.box{
width: 250px;
max-width:80vw;
word-wrap: break-word;

margin: 10px 0px 10px 0px;

	text-align: center;
	background-color:white;
	border: 3px solid;
		text-decoration:none;
	
}

.couleur1 .box:hover{
background-color: #8ECAE6;
border-color :#8ECAE6;
color:white;
}
.couleur2 .box:hover{
background-color: #126782;
border-color :#126782;
color:white;
}
.couleur3 .box:hover{
background-color: #FB8500;
border-color :#FB8500;
color:white;
}
.couleur4 .box:hover{
background-color: #1D4851;
border-color :#1D4851;
color:white;
}


/*Intro du jeu*/
#introjeu{
	margin-top: 10px;
	background-color:white;

	display : flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width:70%;


margin: 10% auto;
}
	
#introjeu .choixperso{
	background-color:white;
	margin-top:3%;
	width :70%;
	  display: flex;
	  flex-wrap: wrap;

    flex-direction: row;
    justify-content: space-around;
	 align-items: center;
	font-family: LM,Helvetica, sans-serif;
}
#introjeu .choixperso a{
text-decoration:none;
background-color:none;
width: 200px;
	color: white;
}
#introjeu .choixperso a div{
	  display: flex;
    flex-direction: column;
}
#introjeu  p{

	width:100%;
text-align:center;
}
#introjeu .choixperso a :hover{


background-color:#4c4c4c;

}

#introjeu .choixperso div {
display: flex;
flex-direction: row;
justify-content:center;
align-items:center;

	  border-radius: 10px;
	background-color:#00004d;
	color: white;
}
#introjeu .choixperso a img{
	
	height:50px;
	width:50px;
}
/* Cest le jeu */
#jeu {
display:flex;
touch-action: manipulation;

flex-direction: column;	

align-items: center;
align-content:center;	
	width:100%;
height:100%;

}
#terrain{
position:relative;	
height:80%;
border-style: solid;
border-width:3px;
    border-color: black;

}
#terrain p{


}
#terrain .bloc{
position:absolute;	
width:30px;
height:30px;
top:0px;
left:0px;

	
}
#terrain .mechant{
position:absolute;	
width:30px;
height:30px;
top:0px;
left:0px;

	
}
#modernmonks {
position:absolute;

 
	width:30px;
	height:30px;

}
#modernmonks img{

	height:100%;	
}
#direction {
position:relative;


background-color:red;
padding:0px;


}
#direction img{
	width:50px;
	height:50px;
	position:absolute;
	margin:0px;
	
}
#direction #haut{
		position:absolute;
	top:0;

	
}
#direction #bas{
		position:absolute;

	
}
#direction #gauche{
		position:absolute;


}
#direction #droite{
	position:absolute;

}