@import "../../commun.css";

h4 {
	margin-left: 3em;	
	margin-top: 3em
}

.code {
	width: 80%;
	min-height: 600px;	
	display: block;	
	margin-left: auto;
    margin-right: auto;    
    margin-bottom: 1em;
}

.code_petit {
	width: 50%;
	min-height: 400px;	
	display: block;	
	margin-left: auto;
    margin-right: auto;    
    margin-bottom: 1em;
}

.code_petit_large {
	width: 80%;
	min-height: 400px;	
	display: block;	
	margin-left: auto;
    margin-right: auto;    
    margin-bottom: 1em;
}

.img_grand {	
	width:50%;
	height:50%;	
	display: block;		
	margin-left: auto;
    margin-right: auto;
    transition: width 1s linear, height 1s linear;
    margin-top: 2em;
    margin-bottom: 2em;
}

.img_grand:hover {
	width: 90%;
	height:90%;	
}

.img_petit {	
	width:25%;
	height:25%;	
	display: block;		
	margin-left: auto;
    margin-right: auto;
    transition: width 1s linear, height 1s linear;
    margin-top: 2em;
    margin-bottom: 2em;
}

.img_petit:hover {
	width: 40%;
	height:40%;
}

.img_moy {	
	width:40%;
	height:40%;	
	display: block;		
	margin-left: auto;
    margin-right: auto;
    transition: width 1s linear, height 1s linear;
    margin-top: 2em;
    margin-bottom: 2em;
}

.img_moy:hover {
	width: 60%;
	height:60%;
}

.blue {
	color: blue
}

h1, h5 {
	text-align: center;
	margin-top: 3em
}

.commande {
	font-weight: bold;
	font-size:1.1em
}


.conteneur_code {
	display: flex;
	flex-direction: row; 	
	justify-content: center;
	align-items: center;
}

.element_code {
	width:49%;	
	text-align: center;
}




@media screen and (max-width: 1000px) {
	.img_petit {
		width:80%;
		height:80%;	
		display: block;		
		margin-left: auto;
		margin-right: auto;
		transition: width 1s linear, height 1s linear;
		margin-top: 2em;
		margin-bottom: 2em;
	}  
		.img_petit:hover {
		width: 95%;
		height:95%;
		}
	.img_moy {
		width:80%;
		height:80%;	
		display: block;		
		margin-left: auto;
		margin-right: auto;
		transition: width 1s linear, height 1s linear;
		margin-top: 2em;
		margin-bottom: 2em;
	}  
	.img_moy:hover {
		width: 95%;
		height:95%;
	}
	.img_grand {
		width:80%;
		height:80%;	
		display: block;		
		margin-left: auto;
		margin-right: auto;
		transition: width 1s linear, height 1s linear;
		margin-top: 2em;
		margin-bottom: 2em;
	}  
	.img_grand:hover {
		width: 95%;
		height:95%;
	}

	.matos {
		width:25%;
		height:25%;		
		margin: 0 auto;
		vertical-align: middle;
		transition: width 1s linear, height 1s linear;
	}

	.matos:hover {
		width: 40%;
		height:40%;
	}

	ul { 
		margin: 0; 
	}
	ul li { 
		margin-left:1em; 
	}

	.code_petit {
		width: 90%;
	}

	.conteneur, .conteneurflex, .conteneurborar {
		flex-direction: column; 
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		text-align: center;
		vertical-align: middle;
		width: 95%;
	}
	
	.element, .elementflex, .elementborar {
		width:90%;	
	}
	
	.chat2  {  
	  width: 150px;  
	}
}