#pied { position:relative; z-index:10; background: #9B0000; 
background: linear-gradient(790deg, rgba(155, 0, 0, 1) 0%, rgba(50, 14, 67, 1) 70%, rgba(50, 14, 67, 1) 100%); }
#pied::before,
#pied::after { content: ""; display: block; position: absolute; top: 0; width: 50%; height: 100%; z-index: 1; -webkit-mask-image: url('../images/image-footer.png'); mask-image: url('../images/image-footer.png'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: right bottom; mask-position: right bottom; }
#pied::before {left: 0; transform: scaleX(-1); background-color: var(--secondary-color-soft); }
#pied::after {right: 0; background-color: #482d55; }
#pied .global { position:relative; z-index:10; }

#pied-haut .global {padding: 30px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
#pied-haut .col { flex: 1; margin:15px 0; padding: 0 10px; box-sizing: border-box; }
 
#pied ul li {padding:0; }
#pied ul li::before {display:none; }


#pied-haut #col-logo { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #d0bfcb; padding-right: 20px; margin-right: 35px; }
#pied #logo-pied {width:100%; position:relative; margin:0 auto; }
#pied #logo-pied a,
#pied #logo-pied a:visited {text-decoration:none; color:#000; }
#pied #logo-pied a img {height:auto; width:100%; max-width: 130px; }
#pied-texte { color:#fff; font-weight:400; font-size:14px; }
#pied-texte p {text-align: left; margin-left: 0; line-height: 21px; }

#pied-reseaux-conteneur { }
#pied-reseaux {text-align:center; display: flex; flex-wrap:wrap; justify-content: flex-start; align-items:center; }
#pied-reseaux .pied-social {margin: 0 5px; }
#pied-reseaux .pied-social:not(.social-facebook):not(.social-linkedin):not(.social-twitter-x) a,
#pied-reseaux .pied-social:not(.social-facebook):not(.social-linkedin):not(.social-twitter-x) a:visited { color:#fff; text-decoration:none; display:block; }
#pied-reseaux .pied-social i {color:#fff; font-size: 23px; width:25px; height:25px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; transition: 0.3s ease-out; }

#pied-reseaux .pied-social.social-facebook i { -webkit-mask-image: url('../images/icone-facebook-rond.svg'); mask-image: url('../images/icone-facebook-rond.svg'); }
#pied-reseaux .pied-social.social-linkedin i { -webkit-mask-image: url('../images/icone-linkedin-carre.svg'); mask-image: url('../images/icone-linkedin-carre.svg'); }
#pied-reseaux .pied-social.social-twitter-x i { width: 23px; height: 23px; -webkit-mask-image: url('../images/X_logo.svg'); mask-image: url('../images/X_logo.svg'); }
#pied-reseaux .pied-social.social-facebook i,
#pied-reseaux .pied-social.social-linkedin i,
#pied-reseaux .pied-social.social-twitter-x i {background: #fff; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

#pied-reseaux .pied-social:not(.social-facebook):not(.social-linkedin):not(.social-twitter-x) a:hover i { color: var(--tertiary-color); }
#pied-reseaux .pied-social.social-facebook a:hover i,
#pied-reseaux .pied-social.social-linkedin a:hover i,
#pied-reseaux .pied-social.social-twitter-x a:hover i { background: var(--tertiary-color); }

#pied-haut #col-menu { flex: 0.8 1 0; }

#pied .col .categorie {margin-bottom:15px; }
#pied .col .categorie > a {text-decoration:none; }
#pied .col .categorie > a > span,
#pied .col .categorie > a:visited > span,
#pied .col .categorie > span {text-decoration:none; color:#fff; font-size:18px; font-weight:700; display:block; }
#pied .col .categorie::after {content: ""; display: block; width: 38px; height: 2.5px; background: var(--secondary-color-light); margin: 17px 0; }

#pied .liens {padding:0; margin:0; }
#pied .liens li { margin:0 0 7px 0; list-style:none; position:relative; }
#pied .liens li > a {text-decoration:none; }
#pied .liens li a,
#pied .liens li a:visited {text-decoration:none; }
#pied .liens li a > span,
#pied .liens li a:visited > span,
#pied .liens li > span {color:#fff; font-weight:500; font-size:14px; line-height: 21px; }

/* Col contact*/
#pied-haut #col-contact {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; flex: 1.4 1 0; }
#pied-contact-titre {width: 100%; color:#fff; font-weight:500; font-size:13px; margin-bottom: 10px; }
#pied-contact-titre span {display:block; font-size:26px; font-weight:700; margin-bottom: 10px; }
#col-contact .pied-contact-element {margin-bottom: 15px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; }
#col-contact #pied-adresse,
#col-contact .pied-contact-element a,
#col-contact .pied-contact-element a:visited {text-decoration:none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; }
#col-contact .pied-contact-element .pied-contact-icone {display:flex; flex-wrap: wrap; justify-content: center; align-items: center; width:40px; height:40px; border-radius: 50%; background: #320E43; 
background: linear-gradient(90deg, rgba(50, 14, 67, 1) 0%, rgba(255, 60, 38, 1) 57%, rgba(255, 134, 64, 1) 76%, rgba(255, 197, 120, 1) 100%); }
#col-contact .pied-contact-element i {display:block; width:16px; height:16px; filter: invert(98%) sepia(7%) saturate(343%) hue-rotate(163deg) brightness(118%) contrast(100%); }
#col-contact .pied-contact-element .pied-contact-span { line-height: 21px; font-weight: 500; color:#fff; font-size:14px; flex: 1; }

#col-contact #pied-adresse i {background:url(../images/icone-adresse.svg) no-repeat center center; background-size:contain; margin-top: 4px; }

#col-contact #pied-telephone {}
#col-contact #pied-telephone i {background:url(../images/icone-telephone.svg) no-repeat center center; background-size:contain; }

#col-contact #pied-mail {}
#col-contact #pied-mail i {background:url(../images/icone-mail.svg) no-repeat center center; background-size:contain; }


@media all and (max-width:1200px) {
	#pied-haut #col-logo { margin-right: 20px; }
	#pied-haut #col-menu { flex: 0.9 1 0; }
	#pied-haut #col-contact { flex: 1.2 1 0; }
}

@media all and (max-width:1160px) {
	#pied-haut #col-logo {max-width: 100%; flex: unset; width: 100%; padding: 0px; margin-right: 0; margin-bottom: 15px; padding-bottom: 15px; border-right: 0; border-bottom: 1px solid #d0bfcb; }
	#pied #logo-pied {text-align: center; }
	#pied-texte p {text-align: center; }
	#pied-reseaux { justify-content: center; }
}

@media all and (max-width:990px) {

	#pied-haut .global { gap: 20px 30px; }
	#pied-haut .col {flex: 0 0 calc(33.333% - 15px); max-width: calc(33.333% - 15px); 	}
	#pied-haut #col-contact {flex: unset; max-width: 100%; justify-content: space-between;}
	#pied-contact-titre { margin-bottom: 25px; text-align: center; }
	#col-contact .pied-contact-element  {width: auto;}
}

@media all and (max-width:780px) { 
	#pied { background: #9B0000; background: linear-gradient(180deg, rgba(155, 0, 0, 1) 0%, rgba(50, 14, 67, 1) 70%, rgba(50, 14, 67, 1) 100%); }
	#pied::before {  background-color: #482d55;}
	#pied-haut #col-contact {justify-content: center; gap: 15px 20px;}
}

@media all and (max-width:680px) {
	#pied-haut .col {flex: unset; width: 100%; max-width: 100%; }
	
	#pied-haut #col-menu,
	#pied-haut #col-formations {flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); }
}	

@media all and (max-width:480px) {

	#pied-haut #col-contact {justify-content: flex-start; }
}

@media all and (max-width:380px) {
	#pied-haut .global { gap: 0;} 
	#pied-haut .col { padding: 0; }
	#pied-haut #col-menu,
	#pied-haut #col-formations { flex: unset; width: 100%; max-width: 100%; padding: 0;}

	#pied .col .categorie,
	#pied .liens li {text-align: center;}
	#pied .col .categorie::after {  margin: 10px auto;}
}