/**************************************************************************************************************************/
/***Modification de mise-en-page.CSS pour les écrans de plus 1800px de large*******************************************************************/
/**************************************************************************************************************************/


div.responsiveframe {
	width:100%;/***Responsive desing********/
	max-width:1100px;
	margin:auto;
	
}
body {
	height:100%;
}



/**************************************************************************************************************************/
/***Mise en page pour le header********************************************************************************************/
/**************************************************************************************************************************/

header img {
	position:relative;
	z-index:51;
	
}
@media screen and (width<800px){
	header nav {
		margin-right:0;
		padding-right:3em;
	}
	header nav>ul#menu-menu-du-haut {
		float:none;
		border:0px solid red;
		position:absolute;
		display:block;
		gap:0;
		top:1.5em;
		right:0;
		left:50%;
		padding:0.5rem;
		transform:scaleY(0);
		opacity:0;
		transition:transform 0.22s ease, opacity 0.22s ease;
		z-index:50;
		background-color:#172239;
	}
	header nav>ul#menu-menu-du-haut>li {
			
	}
	header nav>button.toggle{	
		display:inline-block;		
		position:absolute;
		right:3em;
		z-index:51;
	}
	header nav li>ul {
		display:block;
	}
	header nav li:hover>ul{
		position:relative;
	}
	header nav>button.toggle[aria-expanded="true"]+ul#menu-menu-du-haut{	
		transform:scaleY(1);
		opacity:1;
	}
}



/**************************************************************************************************************************/
/***Mise en page pour section (caroussel)**********************************************************************************/
/**************************************************************************************************************************/
/* Toutes les images du caroussel pour ce design doivent faire 1800x750px */
section {}    

/**************************************************************************************************************************/
/***Mise en page pour main*************************************************************************************************/
/**************************************************************************************************************************/
	
main {
	margin:0 10px 0 10px;

} 

/**************************************************************************************************************************/
/***Mise en page pour aside ******************/
/**************************************************************************************************************************/	

aside {} 




/**************************************************************************************************************************/
/***Mise en page pour footer***********************************************************************************************/
/**************************************************************************************************************************/

footer section:first-child {
	border:0px solid yellow;
	
} 
footer section:nth-child(2) div.logo { 
	border :0px solid white;
	background-color:white;
}
footer section:nth-child(2) div.logo ul { 
	border :0px solid yellow;
}
footer section:nth-child(2) div.logo ul>li { 
	border :0px solid pink;
}
footer section:nth-child(2) div.logo ul>li>a>img { 
	border :0px solid black;
}
footer section:nth-child(2) div.logo ul li:first-child a img {
    border: 0px solid red;
    width: 25%;
    float: left;
    margin-top: 5em;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:5em;
} 
footer section:nth-child(2) div.logo ul li:nth-child(2) a img {
    border: 0px solid red;
    width: 25%;
    float: left;
    margin-top: 3.5em;
	margin-bottom:5em;	
}
footer section:nth-child(2) div.logo ul li:nth-child(3) a img {
    border: 0px solid red;
    width: 28%;
    float: right;
    margin-top: 4.5em;
	margin-bottom:5em;
	margin-right:1em;  
}
footer section:nth-child(2) div.logo ul li:nth-child(4) a img {
    border: 0px solid red;
    width: 40%;
    float: left;
	clear: both;/* S'assure que cette section est en dessous des sections flottantes */
	margin-left:1.2em;
	margin-bottom:3em;
}
footer section:nth-child(2) div.logo ul li:nth-child(5) a img {
    border: 0px solid red;
    width: 40%;
    float: right;
	margin-right:1em;	  
}
footer section:nth-child(2) div.logo ul li:nth-child(6) a img {
    border: 0px solid red;
    width: 20%;
	clear: both;/* S'assure que cette section est en dessous des sections flottantes */
    float: left;
	margin-left:7%;
	margin-top:3em;
}
footer section:nth-child(2) div.logo ul li:nth-child(7) a img {
    border: 0px solid red;
    width: 30%;	
    float: left;
	margin-left:7%; 
	margin-top:3.5em;
}
footer section:nth-child(2) div.logo ul li:nth-child(8) a img {
    border: 0px solid red;
    width: 20%;	
    float: right;
	margin-left:5%;
	margin-right:1em;
	margin-top:2.5em;
}