
/* PIED */
#pied { background:#ffffff; position:relative; z-index:10; }
#pied .global {padding: 20px; }
#pied .global .contenu-wrapper {display: grid; grid-template-columns: repeat(24, [col-start] 1fr);  flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
/** PIED COLONNES LOGO CENTRE **/
#pied .global .contenu-wrapper .col { margin:15px 0; grid-row: 1; }
 
#col-menu { grid-column: col-start 1 / span 8; max-width: 225px;}
#col-centre { grid-column: col-start 10 / span 6; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; align-items:center; }
#col-contact {grid-column: col-start 17 / span 8; display: flex;  flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
 
#pied ul li {padding:0; }
#pied ul li::before {display:none; }

#pied .col .categorie {margin-bottom:20px; }
#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:#000024; font-size:20px; font-weight: 700; text-transform:uppercase; display:block; }

#pied .menu {padding:0; margin:0 0 15px 0; font-size:0; }
#pied .menu li {list-style:none; display:inline-block; vertical-align:top; margin:0 0 5px 0; }
#pied .menu li > a {text-decoration:none; display: flex;  flex-wrap:wrap; align-items:center; }
#pied .menu li > a::after {content: ""; background: #2a3e54; width: 1px; height: 12px; display:block; margin:0 5px; }
#pied .menu li:last-child > a::after {display:none; }
#pied .menu li > a > span,
#pied .menu li > a:visited > span,
#pied .menu li > span {text-decoration:none; color:#2a3e54; font-weight:500; font-size:13px; text-transform: uppercase; position: relative; }
 
#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 > span,
#pied .liens li > a:visited > span,
#pied .liens li > span {text-decoration:none; color:#8b9fb7; font-weight:500; font-size:13px; line-height: 19px; }
#pied .liens li:hover > a > span,
#pied .liens li:hover > span {}

#pied #logo-pied {width:100%; position:relative; margin:0 auto;  text-align: center; }
#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: 183px; }
	
#pied-reseaux {text-align:center; display: flex;  flex-wrap:wrap; justify-content: center; align-items:center; }
#pied-reseaux .pied-social {margin: 0 5px; }
#pied-reseaux .pied-social a,
#pied-reseaux .pied-social a:visited { color:#fff; background:rgba(24, 63, 111, 0.5); border-radius:60px; width:26px; height:26px; text-decoration:none; display:block; transition: background ease-out 0.1s;  display:flex;  flex-wrap:wrap; justify-content:center; align-items:center; }
#pied-reseaux .pied-social i {color:#fff; font-size: 17px;  display:flex;  flex-wrap:wrap; justify-content:center; align-items:center; }
#pied-reseaux .pied-social.social-twitter-x i {width:14px; height:14px; filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(359deg) brightness(103%) contrast(103%); }
#pied-reseaux .pied-social i.fa-facebook { padding: 8px 0 0 3px; box-sizing: border-box; font-size: 20px;}
#pied-reseaux .pied-social a:hover { background:rgba(24, 63, 111, 1);}


/** VERSION AVEC FONT AWESOME **/
#pied .pied-contact-element { overflow: hidden; padding: 0 0 7px 4px; text-align:left; margin:0px 0 8px; }
#pied .pied-contact-element i {height:20px; width: 20px; text-align: center; margin-right: 10px; display:block; filter: invert(20%) sepia(29%) saturate(746%) hue-rotate(170deg) brightness(98%) contrast(91%);}
#pied .pied-contact-element .pied-contact-span {width: calc(100% - 33px); display: inline-block; vertical-align: top;  flex:1; font-size:15px;  line-height: 22px; font-weight: 600; color: #2a3e54; }
#pied #pied-adresse, #pied #pied-telephone a,
#pied #pied-mail a { display: flex;  flex-wrap: wrap;  justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#pied #pied-adresse {-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }	
#pied #pied-adresse i {background:url(../images/icone-adresse-o.svg) no-repeat center center; background-size:contain; }
#pied #pied-telephone {}
#pied #pied-telephone a,
#pied #pied-telephone a:visited {color:#000; text-decoration:none; }
#pied #pied-telephone i {background:url(../images/icone-telephone-o.svg) no-repeat center center; background-size:contain; }
#pied #pied-mail {}
#pied #pied-mail i {background:url(../images/icone-mail-o.svg) no-repeat center center; background-size:contain; }
#pied #pied-mail a {text-decoration:none; color: #000; }
#pied #pied-mail > a > span,
#pied #pied-mail > a:visited > span {background:none; padding:0; }
/** END **/


@media all and (max-width:960px) {
	#pied .global { padding: 20px 20px 35px; }
	#pied .global .contenu-wrapper .col {grid-row: 2; }
	#pied #col-centre { grid-row: 1; grid-column: col-start 1 / span 24; display:block; }
	#pied-reseaux-conteneur {  margin: 30px 0;}
	#pied #col-menu { grid-column: col-start 1 / span 11; }
	#pied #col-contact {grid-column: col-start 14 / span 11; }
}

@media all and (max-width:605px) {
	#pied #col-menu { grid-column: col-start 1 / span 24; }
	#pied #col-contact {grid-row: 3; grid-column: col-start 1 / span 24;  justify-content: flex-start; }
}	
