/***************footer-custom***************/

footer-custom {
	padding: 1% 3%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--blanc);
	font-size: 0.9em;
	background-color: var(--noir);
}

footer-custom .logo {
	position: absolute;
	width: min(80%, 500px);
	left: 1%;
	bottom: 99%;
}

footer-custom h4 {
	margin: 0;
	font-size: 1.05em;
}

footer-custom p {
	margin: 0;
}

.categories {
	display: flex;
	justify-content: space-evenly;
	gap:5px;
	width: 90%;
}
.categories article{
	flex: 1 1 33%;
	display: flex;
	flex-direction: column;
	gap:2px;
}

.categories article:first-child {
	align-items: flex-start;
	text-align: left;
}

.categories article:nth-child(2) {
	align-items: center;
	text-align: center;
}

.categories article:last-child {
	align-items: flex-end;
	text-align: right;
}

.categories article a {
	text-decoration: none;
	color: var(--blanc );
	background: linear-gradient(var(--blanc ) 0 0) 
				bottom / var(--largeur, 0) 1px
				no-repeat;
	transition: .25s cubic-bezier(0.4, 0, 1, 1);
}

.categories article a:hover {
	--largeur: 80%;
}

.reseaux a img {
	width: 90%;
}

.credit {
	display: flex;
	color: var(--gris);
	font-size: .75em;
	gap: 10px;
}

.credit a{
	color: var(--gris);
	text-decoration: none;
}

.credit a:hover{
	color: var(--blanc);
}

.reseaux {
	display: flex;
	justify-content: space-evenly;
	gap: 0.5em;
}

.reseaux a {
	padding: 5px;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:50%;
	transition: all .2s ease;
}

.reseaux a:hover {
	background-color: var(--noir);
	filter: invert(1)
}

@media (max-width: 580px) {
	footer-custom{
		font-size: 0.8em;
	}
}