html
{
	background-color : #fff7f5;
	
	margin-left : 0px;
	margin-right : 0px;
}

body 
{
	background : url(fond.png) no-repeat center fixed;
	
	margin-left : 0px;
	margin-right : 0px;
}

#corps
{
	background-color : #FEFEFE;
	
	border-radius : 10px;
	
	width : 900px; /* Modifier seon la taille de l'écran */
	
	margin : auto;
	margin-top : -20px;
	
	border : 1px solid rgb(247, 148, 30)
}

h2, h3
{
	color : rgb(151, 21, 34);
}


.groupe
{
	padding-left : 2%;
	padding-right : 2%;
}

/******************/
/* Design du menu */
/******************/

nav
{
	padding : 0px;
	margin : 0px;
	
	width : 900px;
	
	position: fixed;

	background-color : rgb(233, 179, 116);
	
	background-image : linear-gradient(rgb(247, 148, 30), rgb(233, 179, 116));
	
	padding-top : 10px;
}

ul #navigation
{
	padding : 0px;
	margin : 0px;
}

nav ul
{
	padding : 0px;
	margin : 0px;
	list-style-type : none;

	border-bottom : 2px solid rgb(233, 179, 116);
}

nav ul:hover
{
	border-bottom : 2px solid rgb(190, 30, 45);
}

nav li
{
	display : inline-block;
	width : 20%;
	margin : 0px;
	padding : 0px;
	
	padding-top : 5px;
	padding-bottom : 5px;
	
	text-align : center;
	color : rgb(151, 21, 34);
}

nav li:hover
{
	background-color : rgb(211, 54, 69);
	background-image:linear-gradient(rgb(190, 30, 45), rgb(211, 54, 69));
	
	color : rgb(247, 148, 30);
}

nav a
{
	text-decoration : none;
	color : black;
}

/**********************/
/* Design lié au logo */
/**********************/

#div_logo
{
	text-align : center;
}

#logo
{
	margin-top : 20px;

	width : 200px;
}


/*************************/
/* Design de description */
/*************************/

#description
{

}

/**********************/
/* Design de la vidéo */
/**********************/

#video
{

}

/*******************************/
/* Gestion du design des liens */
/*******************************/

#liens
{

}

.lien
{
	display : inline-block; 
	
	margin-left : 2%;
	margin-right : 2%;
	width : 45%;

	border-radius : 10px;
}

.lien h3
{
	text-align : center;
	
	margin-top : 2px;
	margin-bottom : 2px;
}

.lien2
{
	display : inline-block; 
	
	margin-bottom : 20px;
	
	margin-left : 7%;
	margin-right : 7%;
	width : 84%;

	border-radius : 10px;
}

.lien2 h3
{
	text-align : center;

	margin-top : 2px;
	margin-bottom : 2px;
}

.img_lien
{
	display : inline-block; 
	
	margin-top : 2%;
	
	width : 80%;
	margin-left : 10%;
	margin-right : 10%;
}

.img_lien2
{
	display : inline-block; 
	
	text-align : center;
	
	width : 24%;
	margin-left : 38%;
	margin-right : 38%;
	
	height : 100px;
}

#liens a
{
	color : black;
	
	text-decoration: none;

	background-image : linear-gradient(rgb(255, 235, 206), rgb(246, 184, 190));
}

#liens a:hover
{
	background-color : #f0f0f0;
	
	background-image : linear-gradient(rgb(255, 216, 169), rgb(243, 150, 158));
}

/*******************************************************/
/* Gestion du design des notices (description et lien) */
/*******************************************************/


#telechargement a
{
	color : black;
	
	text-decoration: none;

	background-image : linear-gradient(rgb(246, 184, 190), rgb(255, 235, 206));
}

#telechargement a:hover
{
	background-color : #f0f0f0;

	background-image : linear-gradient(rgb(243, 150, 158), rgb(255, 216, 169));
}


/*******************************************************/
/* Gestion du design des notices (description et lien) */
/*******************************************************/

#notices
{

}

.notice
{
	display : inline-block;
	
	width : 100%;
	margin : auto;
	
	border-radius : 10px;
}

.img_notices
{
	float : left;
	
	display : inline-block;
	
	border-radius : 5px;
	
	width : 100px;
	
	
	margin-left : 10px;
}

.description_notices
{
	margin-left : 125px;
}

#notices a
{
	color : black;
	
	text-decoration: none;
}

#notices a:hover
{
	background-color : #777777;
	
	margin : 1px solid black;
	
	background-image:linear-gradient(rgb(255, 235, 206), rgb(246, 184, 190));
	
	color : black;
}

#img_notice_install
{
	margin-top : 22px;
}

#img_notice_utilisation
{
	margin-top : 65px;
}

#img_notice_interface
{
	margin-top : 37px;
}

#img_notice_technique
{
	margin-top : 50px;
}

/*********************************/
/* Design pour les petits écrans */
/*********************************/

@media only screen and (max-width: 1000px) 
{
	body 
	{
		background-color : #ffffff;
		
		background : none;
		
		padding : 0px;
		margin : 0px;
	
	}

    #corps 
    {
		width : 100%;
		
		margin : none;
		
		border : none;
    }
    
    nav 
    {
		width : 100%;
		
		margin-top : 10px;
    }
}