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

.conteneurH {
 display: flex;
 flex-direction: row; 
 justify-content: space-around;
 align-items: center;
 vertical-align: middle;  
 text-align: center; 
 width: auto;
}

.conteneurV {
 display: flex;
 flex-direction: column; 
 justify-content: space-around;
 align-items: center;
 vertical-align: middle;    
 text-align: center;
}

.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;
}

.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
}

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

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

.commandeVS {
	color: blue;
	font-weight: bold;
	font-size: 1.1em
}

ul, ol { 
 margin-left:3em; 
}

.desc {	
	width:70%;	
	margin-left: auto;
    margin-right: auto;
}

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

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


@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; 
	}
}