.s4Communes.noJsAndAction * {pointer-events: none!important;}
.s4Communes {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 30px 0;}
.s4Communes>* {width: 50%; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
.s4Communes .mapContent {}
.s4Communes .mapContent svg {height: 800px; width: 100%;}
.s4Communes .mapContent svg path {transition: all 0.2s ease-in-out;}
.s4Communes .mapContent svg path.activePath:hover, .s4Communes .mapContent svg path.fakingHover {cursor: pointer; fill: #BF643F;}
.s4Communes .txtContent {}
.s4Communes .txtContent .divContent {padding: 60px;}
.s4Communes .txtContent .divContent .title2 {color: #529AAE; padding-bottom: 0; margin-bottom: 0;}
.s4Communes .txtContent .divContent .title2::before {content: unset; display: none;}
.s4Communes .txtContent .divContent>*:not(:first-child) {margin-top: 30px;}
.s4Communes .txtContent .divContent label.select {display: block; margin-top: 60px; position: relative;}
.s4Communes .txtContent .divContent label.select::before {content: ''; position: absolute; top: 50%; right: 15px; width: 15px; height: 15px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(//www.epinal-labelleimage.fr/wp-content/themes/test-commune/images/arrow-right-blue.svg); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none;}
.s4Communes .txtContent .divContent label.select select {-webkit-appearance: none; appearance: none; outline: none; width: 100%; background-color: transparent; border: 1px solid #529AAE; color: #529AAE; font-weight: 700; padding: 10px; font-size: 1.2rem;}
.s4Communes .txtContent .divContent .commune-info:not(.showIt) {display: none!important;}
.s4Communes .txtContent .divContent .commune-info .box-ville {background-color: #FFFFFF; color: #000000; position: relative; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); width: 100%; max-width: 350px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .img-ville {position: relative; height: 130px; overflow: hidden;}
.s4Communes .txtContent .divContent .commune-info .box-ville .img-ville .fond {position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center; filter: blur(5px); -webkit-filter: blur(5px);}
.s4Communes .txtContent .divContent .commune-info .box-ville .img-ville svg {position: relative; height: 80%; margin: auto; margin-bottom: 0;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville {padding: 30px; text-align: center;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .titre {font-weight: 700; text-transform: uppercase;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .titre::after {content: ''; display: block; width: 100%; max-width: 50px; margin: auto; margin-top: 15px; height: 2px; background-color: #29617C;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu {margin-top: 20px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu>* + * {margin-top: 10px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu>ul {text-align: left;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu>ul li {font-size: 1rem;}
@media (max-width: 991px) {
main .s4Communes .mapContent svg {height: auto;}
.s4Communes .txtContent .divContent {padding: 40px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville {padding: 20px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .titre::after, .s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu {margin-top: 10px;}
}
@media (max-width: 767px) {
.s4Communes {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.s4Communes>* {width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%;}
.s4Communes .txtContent {margin-top: 30px;}
.s4Communes .txtContent .divContent {padding: 0;}
main .s4Communes .mapContent svg {height: 300px;}
.s4Communes .txtContent .divContent label.select {margin-top: 20px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu p {font-size: 1.2rem; line-height: 1.3;}
.s4Communes .txtContent .divContent .commune-info .box-ville {margin: auto;}
}.s4MapZones.noJsAndAction * {pointer-events: none!important;}
.s4MapZones {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 30px 0;}
.s4MapZones>* {width: 50%; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
.s4MapZones .mapContent {}
.s4MapZones .mapContent svg {height: 800px; width: 100%;}
.s4MapZones .mapContent svg #Villes path {cursor: pointer;}
.s4MapZones .mapContent svg #Labels_villes path {pointer-events: none;}
.s4MapZones .txtContent {}
.s4MapZones .txtContent .divContent {padding: 60px;}
.s4MapZones .txtContent .divContent .title2 {color: #529AAE; padding-bottom: 0; margin-bottom: 0;}
.s4MapZones .txtContent .divContent .title2::before {content: unset; display: none;}
.s4MapZones .txtContent .divContent>*:not(:first-child) {margin-top: 30px;}
.s4MapZones .txtContent .divContent label.select {display: block; margin-top: 30px; position: relative;}
.s4MapZones .txtContent .divContent label.select::before {content: ''; position: absolute; top: 50%; right: 15px; width: 15px; height: 15px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(//www.epinal-labelleimage.fr/wp-content/themes/test-commune/images/arrow-right-blue.svg); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none;}
.s4MapZones .txtContent .divContent label.select select {-webkit-appearance: none; appearance: none; outline: none; width: 100%; background-color: transparent; border: 1px solid #529AAE; color: #529AAE; font-weight: 700; padding: 10px; font-size: 1.2rem;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info:not(.activeZone) {display: none!important;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info {background-color: #FFFFFF; color: #000000; position: relative; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); width: 100%; max-width: 350px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .img-zone {position: relative; min-height: 100px; overflow: hidden; padding: 20px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .img-zone .fond {position: absolute; height: 100%; width: 100%; top: 0; left: 0;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .img-zone .titre-zone {position: relative; margin: auto; font-size: 1.5rem; color: #FFFFFF; text-transform: uppercase; font-weight: 500;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone {padding: 30px; text-align: left;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>h3 {font-weight: 700; text-transform: uppercase; text-align: center; font-size: 1.4rem;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>h3:before {content: unset; display: none;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>h3::after {content: ''; display: block; width: 100%; max-width: 50px; margin: auto; margin-top: 15px; height: 2px; background-color: #29617C;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>* + * {margin-top: 10px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>ul {text-align: left; padding-left: 0;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>ul li {font-size: 1rem;}
@media (max-width: 991px) {
main .s4MapZones .mapContent svg {height: auto;}
.s4MapZones .txtContent .divContent {padding: 40px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone {padding: 20px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .titre::after {margin-top: 10px;}
}
@media (max-width: 767px) {
.s4MapZones {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.s4MapZones>* {width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%;}
.s4MapZones .txtContent {margin-top: 30px;}
.s4MapZones .txtContent .divContent {padding: 0;}
main .s4MapZones .mapContent svg {height: 300px;}
.s4MapZones .txtContent .divContent label.select {margin-top: 20px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu>h3 {font-size: 1.3rem;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .txt-zone .contenu p {font-size: 1.2rem; line-height: 1.3;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .img-zone {min-height: 80px;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info .img-zone .titre-zone {font-size: 1.4rem;}
.s4MapZones .txtContent .divContent .HDD-zones .HDD-zone_info {margin: auto;}
}