/* Styles pour le footer UPEC moderne 

*/
  .footer-contact {
	flex: 1;
	text-align: center;
	padding: 0 15px;
  }
  
  .footer-contact h3 {
	font-size: 1.4rem;
	margin-bottom: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
	display: inline-block;
  }
  
  .footer-contact h3::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 2px;
	background-color: #3498db;
	bottom: -5px;
	left: 25%;
  }
  
  .footer-contact a {
	color: #ecf0f1;
	text-decoration: none;
	font-size: 1.1rem;
	transition: color 0.3s ease;
	display: block;
	margin-bottom: 8px;
  }
  
  .footer-contact a:hover {
	color: #3498db;
  }
  
  /* Ajout des réseaux sociaux */
  .footer-social {
	flex: 1;
	text-align: right;
  }
  
  .social-title {
	font-size: 1.4rem;
	margin-bottom: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
	display: inline-block;
  }
  
  .social-title::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 2px;
	background-color: #3498db;
	bottom: -5px;
	left: 25%;
  }
  
  .social-icons {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
  }
  
  .social-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
  }
  
  .social-icon:hover {
	background-color: #3498db;
	transform: translateY(-3px);
  }
  
  .social-icon i {
	font-size: 1.3rem;
	color: white;
  }
  
  .social-icon.discord:hover {
	background-color: #7289DA;
  }
  
  .social-icon.facebook:hover {
	background-color: #4267B2;
  }
  
  .social-icon.linkedin:hover {
	background-color: #0077B5;
  }
  
  /* Responsive design */
  @media (max-width: 992px) {
/*

*/
	
	.footer-social {
	  text-align: center;
	  margin-top: 25px;
	}
	
	.social-icons {
	  justify-content: center;
	}
  }
  
  @media (max-width: 768px) {
		
	.footer-contact {
	  margin-bottom: 25px;
	}
	
	.footer-social {
	  width: 100%;
	}
	
	.social-title::after,
	.footer-contact h3::after {
	  left: 25%;
	}
  }
  
  @media (max-width: 576px) {
	.footer-contact h3,
	.social-title {
	  font-size: 1.2rem;
	}
	
	.footer-contact a {
	  font-size: 1rem;
	}
	
	.social-icons {
	  gap: 10px;
	}
	
	.social-icon {
	  width: 35px;
	  height: 35px;
	}
  }