/*
======================================================================
Much Ado
Footer
======================================================================
*/

.site-footer{
	padding:4rem 0 2rem;
	background:var(--color-footerbg);
	color:var(--color-textdarker);
}

.site-footer a{
	color:inherit;
}

.site-footer a:hover{
	color:var(--color-white);
}

/* =====================================================
   Newsletter
===================================================== */

.footer-newsletter{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:5rem;
	margin:3rem auto 3rem;
	padding:3rem;
	background:var(--color-lightbrown);
}

.footer-newsletter__left{
	flex:1;
	max-width:500px;
}

.footer-newsletter__left h2{
	margin-bottom:1rem;
	color:var(--color-white);
}

.footer-newsletter__left p{
	margin:0;
	color:#9d9595;
}

.footer-newsletter__right{
	display:flex;
	/*
	| Manquait : sans flex-direction:column, le formulaire et le paragraphe
	| légal ("Vous recevrez un email...") se retrouvaient côte à côte
	| plutôt qu'empilés, le second se comprimant dans une colonne étroite.
	*/
	flex-direction:column;
	align-items:flex-end;
	gap:.75rem;
	flex:1;
	justify-content:flex-end;
}

/* =====================================================
   Main
===================================================== */

.footer-main{
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	gap:5rem;
	padding-bottom:2rem;
}

.footer-col h3{
	position:relative;
	margin-bottom:1.5rem;
	padding-bottom:1rem;
	color:var(--color-crown);
}

.footer-col h3::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:70px;
	height:1px;
	background:#383434;
}

.footer-col h3 span{
	display:block;
	font-size:1.1rem;
	font-weight:400;
	color:var(--color-white);
}

.footer-contact li,
.footer-links li{
	margin-bottom:.2rem;
	color:var(--color-footertext);
}

.footer-links a{
	color:var(--color-footertext);
}

.footer-links a:hover{
	padding-left:6px;
	color:var(--color-white);
}

/* =====================================================
   Bottom
===================================================== */

.footer-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:1rem;
	border-top:1px solid var(--color-hr);
}

.footer-bottom p{
	margin:0;
	color:#8b8484;
}

.footer-social .social-menu{
	display:flex;
	gap:.75rem;
}

.footer-social a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	font-size:0px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:18px;
	transition:var(--transition);
}

/* =====================================================
   Social icons
===================================================== */

.social-facebook a{
	background-image:url("../images/socials/facebook-colored.svg");
}

.social-facebook a:hover{
	background-image:url("../images/socials/facebook-white.svg");
}

.social-instagram a{
	background-image:url("../images/socials/instagram-colored.svg");
}

.social-instagram a:hover{
	background-image:url("../images/socials/instagram-white.svg");
}

.social-youtube a{
	background-image:url("../images/socials/youtube-colored.svg");
}

.social-youtube a:hover{
	background-image:url("../images/socials/youtube-white.svg");
}

.social-tiktok a{
	background-image:url("../images/socials/tiktok-colored.svg");
}

.social-tiktok a:hover{
	background-image:url("../images/socials/tiktok-white.svg");
}
/* =====================================================
   Tablet
===================================================== */

@media (max-width:1024px){

	.site-footer{
		padding:3rem 0 2rem;
	}

	.footer-newsletter{
		flex-direction:column;
		align-items:flex-start;
		gap:2rem;
		padding:2.5rem;
	}

	.footer-newsletter__left,
	.footer-newsletter__right{
		width:100%;
		max-width:none;
	}

	.footer-newsletter__right{
		justify-content:flex-start;
		align-items:flex-start;
	}

	.footer-main{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:3rem;
	}

	.footer-col:first-child{
		grid-column:1 / -1;
	}

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

	.site-footer{
		padding:3rem 0 2rem;
	}

	.footer-newsletter{
		padding:2rem 1.5rem;
		gap:1.5rem;
	}

	.footer-newsletter__left{
		max-width:none;
	}

	.footer-main{
		grid-template-columns:1fr;
		gap:2.5rem;
		text-align:center;
	}

	.footer-col h3::after{
		left:50%;
		transform:translateX(-50%);
	}

	.footer-bottom{
		flex-direction:column;
		gap:1.25rem;
		text-align:center;
	}

	.footer-social .social-menu{
		justify-content:center;
		flex-wrap:wrap;
	}

}


/* =====================================================
   Small phones
===================================================== */

@media (max-width:480px){

	.footer-newsletter{
		padding:1.5rem;
	}

}