main{
   overflow-x: hidden;
}
.introduction{
   margin-bottom: 3%;
}
.carte-associations{
   background-color:var(--gris-bleu-clair-B);
   margin-bottom: 5%;
   z-index: 2;
   padding-top: 3%;
   overflow: hidden;
}
.carte-associations *{
   transition: all .2s;
}
.carte-associations h2{
   z-index: 2;
}
.carte-container{
   width: 110vw;
   right: 6%;
}
.carte-pin:hover{
   pointer-events:none
}
.cadre-associations{
   background-color: white;
   position: absolute;
   z-index: 99;
   height: fit-content;
   max-height: 60vh;
   overflow-y: auto;
   width: 25%;
   transition: all .5s;
   padding: 0 30px;
   margin-top: 5%;
}
.nom_region{
   margin-top: 0px;
   margin-bottom: 0px;
}
.associations .reseau_groupe{
   display: none;
   padding-top: 20px;
}
.associations .reseau_groupe h4{
   padding-bottom: 10px;
}
.associations .association{
   border-left: 4px solid transparent;
   border-image-slice: 20!important;
   padding: 0 20px 0 30px;
   margin-bottom: 30px;
}
.association .logo{
   padding-bottom: 10px;
   margin-left: 20px;
}
.association .logo img{
   width: 100%;
   padding-bottom: 10px;
   margin-left: 10px;
}
.association a{
   font-size: 14px;
}
.pin_Else{
   pointer-events: auto !important;
   cursor: pointer !important;
}
.pin_Else img{
   padding: 5px;
   top: -5px;
   left: -5px
}
.pin_Else:hover img{
   filter: invert(39%) sepia(9%) saturate(1480%) hue-rotate(184deg) brightness(60%) contrast(110%) !important;
}
.cls-1:hover {
   opacity: .8 !important;
   cursor: pointer;
}

@media screen and (max-width: 64em) and (min-width: 48em) {
   .carte-container{
      width: 380%;
      right: 130%;
      margin-top: -250px;
   }
   .carte-associations{
      padding-top: 40px;
   }
   .carte-associations h2{
      padding-bottom: 80px;
   }
   .carte-pin p{
      font-size: 1.2vw;
   }
   .cadre-associations{
      width: calc(100% - 40px);
      margin-top: -15%;
      position: relative;
      max-height: 300px;
   }
 }
@media screen and (max-width: 48em) {
   .carte-container{
      width: 360%;
      right: 125%;
      margin-top: -250px;
   }
   .carte-associations{
      padding-top: 40px;
   }
   .carte-associations h2{
      padding-bottom: 80px;
   }
   .carte-pin p{
      font-size: 2.6vw;
   }
   .cadre-associations{
      width: calc(100% - 60px);
      position: relative;
      margin-top: -10%;
      margin-bottom: 10%;
      max-height: 100%;
   }
}