footer{
	height : auto;
	padding-top : 1rem;
	width : 100%;
	background-color : #000000;
	display : flex;
	justify-content : center;
	position : relative;
}

footer::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  height: 1rem;
  background: linear-gradient(to bottom, white, black);
  filter: blur(1rem);
  z-index: 1;
}

.footer-container{
	width : 100%;
	max-width : 110rem;
	justify-content : center;
	padding : 0 2rem;
}

.footer-wrapper{
	width : 100%;
	display : flex;
	flex-wrap : wrap;
	flex-direction : row;
	justify-content : space-between;
}

/*********************/
/* Encadré de l'asso */
/*********************/

.footer-wrapper .footer-asso{
	width : calc(20% - 1rem);
	display : flex;
	flex-direction : column;
	align-items : center;
}


.footer-wrapper .footer-asso .footer-logo{
	margin-bottom : 1rem;
	background-color : #FFFFFF;
	border-radius : 5%;
}

.footer-wrapper .footer-asso .footer-address{
	margin: 0 1rem 0 2rem;
	font-weight : 400;
	color : #FFFFFF;
}

.footer-wrapper .footer-asso .footer-name-asso{
	font-weight : 600;
	line-height : 1rem;
	color : #FFFFFF;
}


/*************************/
/* Liens réseaux sociaux */
/*************************/

.footer-wrapper .footer-asso .footer-socials{
	margin : 1rem;
	padding : 0;
	width : 100%;
	display : flex;
	flex-direction : row;
	align-items : center;
	justify-content : center;
}

.footer-wrapper .footer-asso .footer-socials li{
	position : relative;
	list-style : none;
	width : calc(20% - 1.5rem);
	height : 2rem;
	margin-left : 1rem;
	margin-right : 1rem;
	transform : rotate(-30deg) skew(25deg);
}

.footer-wrapper .footer-asso .footer-socials li:hover a span{
	box-shadow : -1px 1px 1px rgba(0,0,0,0.1);
}

.footer-wrapper .footer-asso .footer-socials li a span{
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	transition : 0.5s ease-out;
	display : flex;
	align-items : center;
	justify-content : center;
	color : #FFFFFF;
	border-radius : 5px;
	font-size : 1rem;
}

.footer-wrapper .footer-asso .footer-socials li a:hover span:nth-child(5){
	transform : translate(0.8rem, -0.8rem);
	opacity : 1;
}

.footer-wrapper .footer-asso .footer-socials li a:hover span:nth-child(4){
	transform : translate(0.6rem, -0.6rem);
	opacity : 0.8;
}

.footer-wrapper .footer-asso .footer-socials li a:hover span:nth-child(3){
	transform : translate(0.4rem, -0.4rem);
	opacity : 0.6;
}

.footer-wrapper .footer-asso .footer-socials li a:hover span:nth-child(2){
	transform : translate(0.2rem, -0.2rem);
	opacity : 0.4;
}

.footer-wrapper .footer-asso .footer-socials li a:hover span:nth-child(1){
	transform : translate(0,0);
	opacity : 0.2;
}

.footer-wrapper .footer-asso .footer-socials li:nth-child(1) a span{
	background-color : #0A66C2;
}

.footer-wrapper .footer-asso .footer-socials li:nth-child(2) a span{
	background : radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.footer-wrapper .footer-asso .footer-socials li:nth-child(3) a span{
	background-color : #FF0033;
}

.footer-wrapper .footer-asso .footer-socials li:nth-child(4) a span{
	background-color : #28FEAF;
}

.footer-wrapper .footer-asso .footer-socials li:nth-child(5) a span{
	background-color : #327DF3;
}

/*****************/
/* Liens rapides */
/*****************/

.footer-wrapper .footer-widget{
	margin-top : 2rem;
	width : calc(13% - 1rem);
}


.footer-wrapper .footer-widget .footer-title{
	text-decoration : none;
	margin : 0 0 1rem 0;
	padding : 0;
	font-size : 1rem;
	font-weight : bold;
	color : #FFFFFF;
}

.footer-wrapper .footer-widget .footer-title:hover{
	color : #F37221;
	transition : 0.5s ease-out;
}

.footer-wrapper .footer-widget .footer-links{
	padding : 1rem 0 0 0;
	margin : 0;
}

.footer-wrapper .footer-widget .footer-links li{
	list-style : none;
}

.footer-wrapper .footer-widget .footer-links li a{
	color : #FFFFFF;
	font-size : 1rem;
	font-weight : 400;
	text-decoration : none;
	line-height : 2rem;
	transition : all 0.3s ease-out;
}

.footer-wrapper .footer-widget .footer-links li a:hover{
	color : #F37221;
}

/***************************/
/* Copyright - Bas de page */
/***************************/

.footer-copyright{
	margin : 1rem 0 1rem 0;
	border-top : 1px solid #FFFFFF;
}

.footer-copyright p {
	color : #FFFFFF;
	font-size : 14px;
	font-weight : 400;
	text-align : center;
}

.footer-copyright p a {
	color : inherit;
	font-weight : 400;
	text-decoration : none;
	transition : all 0.3s ease-out;
}

.footer-copyright p a:hover{
	color : #F37221;
}

/*****************************************************/
/* Responsive - En fonction de la largeur de l'écran */
/*****************************************************/

@media screen and (max-width : 80rem){
	.footer-container{
		max-width : 40rem;
	}

	.footer-wrapper .footer-asso{
		width : calc(50% - 2rem);
		padding : 1rem 0 1rem 0;
	}

	.footer-wrapper .footer-widget{
		width : calc(50% - 2rem);
		padding : 1rem 0 1rem 0;
	}
}

@media screen and (max-width : 40rem){
	.footer-container{
		max-width : 20rem;
	}

	.footer-wrapper .footer-asso{
		width : 100%;
		padding : 1rem 0 1rem 0;
	}

	.footer-wrapper .footer-widget{
		width : 100%;
		padding : 1rem 0 1rem 0;
	}

}