
/* PIED */
#pied { position:relative; z-index:10;background: #293345;
background: -webkit-linear-gradient(0deg, rgba(41, 51, 69, 1) 0%, rgba(77, 113, 153, 1) 100%);
background: -moz-linear-gradient(0deg, rgba(41, 51, 69, 1) 0%, rgba(77, 113, 153, 1) 100%);
background: linear-gradient(0deg, rgba(41, 51, 69, 1) 0%, rgba(77, 113, 153, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#293345", endColorstr="#4D7199", GradientType=0); }
#pied .global {padding: 60px 20px; }
#pied .global .contenu-wrapper {display: grid; grid-template-columns: repeat(24, [col-start] 1fr); -ms-flex-wrap: wrap; 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:65px 0 15px; grid-row: 1;}
 
#col-menu { grid-column: col-start 1 / span 8;}
#col-centre { margin: 15px 0; grid-column: col-start 10 / span 6; display: -webkit-box;display: -ms-flexbox;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; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
#col-contact {grid-column: col-start 17 / span 8;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  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 .global .contenu-wrapper #col-centre { margin: 15px 0;}
#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:#b3d7fc; font-size:27px; font-weight: 500; display:block; }
#pied .col .categorie > a > span::after,
#pied .col .categorie > span::after { content:""; width:100%; max-width: 280px; height:2px; display:block; background:#b3d7fc; margin-top: 10px; } 

#pied .menu {padding:0; margin:0 0 25px 0;  font-size:0;}
#pied .menu li {list-style:none; margin:0 0 5px 0; }
#pied .menu li > a {text-decoration:none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }

#pied .menu li > a > span,
#pied .menu li > a:visited > span,
#pied .menu li > span {text-decoration:none; color:#ffffff; font-weight:400; font-size:18px; 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:#4d7199; font-weight:400; font-size:18px; line-height: 19px; }

#pied #logo-pied {width:100%; position:relative; margin:0 auto; max-width: 252px;}
#pied #logo-pied a,
#pied #logo-pied a:visited {text-decoration:none; color:#000; }
#pied #logo-pied a img {height:auto; width:100%; }
	

/** 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: 15px; width: 15px; text-align: center; margin-right: 10px;  margin-top: 3px; display:block; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);}
#pied .pied-contact-element .pied-contact-span { -webkit-box-flex:1; -ms-flex:1; flex:1; font-size:18px; line-height: 19px; color: #ffffff; word-break: break-word;}
#pied #pied-telephone a,
#pied #pied-mail a {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
#pied #pied-telephone {}
#pied #pied-telephone a,
#pied #pied-telephone a:visited {color:#fff; text-decoration:none; }
#pied #pied-telephone i {background:url(../images/icone-portable-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: #fff; }
#pied #pied-mail > a > span,
#pied #pied-mail > a:visited > span {background:none; padding:0; }
/** END **/

@media all and (max-width:1100px) {
	#pied .global { padding: 20px 20px 35px; }
	#pied .global .contenu-wrapper .col {grid-row: 2;margin: 15px 0;}  
	#pied #col-centre {  grid-row: 1; grid-column: col-start 1 / span 24; display:block;}
	#pied #logo-pied {  max-width: 210px;}
	#pied #col-menu { grid-column: col-start 1 / span 11;}
	#pied #col-contact {grid-column: col-start 13 / span 12;  }
	
	#pied .col .categorie > a > span,
	#pied .col .categorie > a:visited > span,
	#pied .col .categorie > span {  font-size: 23px;}
	#pied .col .categorie > a > span::after, #pied .col .categorie > span::after {  max-width: 210px;}
}
@media all and (max-width:740px) {
	#pied #col-menu { grid-column: col-start 1 / span 24;}
	#pied #col-contact {grid-row: 3; grid-column: col-start 1 / span 24; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;  }
}	

@media all and (max-width:500px) {  
	#pied .global { padding: 20px 10px 35px;}
	#pied .col .categorie > a > span, 
	#pied .col .categorie > a:visited > span, 
	#pied .col .categorie > span { font-size: 20px;}
	#pied .menu li > a > span, #pied .menu li > a:visited > span, #pied .menu li > span,
	#pied .liens li > a > span, #pied .liens li > a:visited > span, #pied .liens li > span { font-size: 17px;}
	#pied #logo-pied {  max-width: 180px;}
	#pied .pied-contact-element .pied-contact-span {  font-size: 16px;}
}