.carte-agences {
position: relative;
isolation: isolate;
width: 100%;
border-radius: 40px;
overflow: hidden;
background: #e9e9e9;
}
.carte-agences.leaflet-container { font-family: "Open Sans", sans-serif; } .agence-marker { background: none; border: 0; }
.agence-marker__pin { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); } .carte-agences .agence-popup.leaflet-popup { margin-bottom: 0; }
.agence-popup .leaflet-popup-tip-container { display: none; }
.agence-popup .leaflet-popup-content-wrapper {
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
overflow: visible;
filter: drop-shadow(0 4px 7.5px rgba(0, 0, 0, .25));
}
.agence-popup .leaflet-popup-content { margin: 0; line-height: 1.4; }
.agence-popup a.leaflet-popup-close-button {
top: 10px;
right: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
color: #555;
font: 20px/26px Arial, sans-serif;
z-index: 5;
} .agence-card { position: relative; padding-top: var(--drop, 46px); color: #262626; } .agence-card__head {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 118px;
box-sizing: border-box;
padding: 27px 21px 18px;
}
.agence-card__head::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: calc(-1 * var(--drop, 46px) - 2px);
background: #fff;
border-radius: 10px;
transform: skewY(-7.46deg);
transform-origin: left top;
z-index: 0;
}
.agence-card__head > * { position: relative; z-index: 1; }
.agence-card__logo { display: block; max-width: 100%; max-height: 73px; width: auto; height: auto; }
.agence-card__nom { font-size: 18px; color: #232323; }
.agence-card__zone {
padding-left: 12px;
border-left: 1px solid #ccc;
font-size: 13px;
letter-spacing: .02em;
color: #444;
white-space: nowrap;
}
.agence-card__badge {
margin-left: auto;
flex: 0 0 52px;
width: 52px;
height: 52px;
box-sizing: border-box;
padding: 10px;
border-radius: 50%;
background: #eef2f6;
object-fit: contain;
} .agence-card__band {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-height: 94px;
box-sizing: border-box;
padding: 0 30px;
background: #e30613;
}
.agence-card__accroche {
margin: 0;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 25px;
text-align: center;
} .agence-card__body {
position: relative;
z-index: 2;
padding: 24px 36px 40px;
background: #fff;
border-radius: 0 0 10px 10px;
}
.agence-card__list { margin: 0 0 22px; padding-left: 18px; list-style: disc; font-size: 16px; line-height: 25px; color: #262626; }
.agence-card__list li { margin: 0; }
.agence-card__addr {
display: flex;
align-items: center;
gap: 16px;
color: #87919b;
font-size: 16px;
line-height: 25px;
text-decoration: none;
}
.agence-popup a.agence-card__addr,
.agence-popup a.agence-card__addr:hover,
.agence-popup a.agence-card__addr:focus { color: #87919b; text-decoration: none; line-height: 20px; font-size: 16px;}
.agence-popup a.agence-card__addr:hover .agence-card__addr-text { text-decoration: underline; }
.agence-card__pin {
flex: 0 0 45px;
width: 45px;
height: 45px;
border-radius: 50%;
background: #e30613;
display: flex;
align-items: center;
justify-content: center;
} .agence-card__notch {
position: absolute;
left: 50%;
bottom: -45px;
width: 116px;
height: 47px;
margin-left: -58px;
background: #fff;
clip-path: polygon(0 0, 5.9% 5.5%, 44.1% 92.3%, 47.3% 96.8%, 50% 100%, 52.7% 96.8%, 55.9% 92.3%, 94.1% 5.5%, 100% 0);
z-index: 2;
}
@media (max-width: 767px) {
.carte-agences { border-radius: 24px; }
.agence-card__head { padding: 22px 16px 14px; min-height: 100px; flex-wrap: wrap; }
.agence-card__logo { max-height: 60px; }
.agence-card__band { min-height: 80px; padding: 14px 18px; }
.agence-card__body { padding: 20px 24px 36px; }
}
.agence-card__head { gap: 14px; }
.agence-card__logo {
flex: 0 1 260px;
min-width: 0;
max-width: 100%;
object-fit: contain;
object-position: left center;
}
.agence-card__zone { flex: 0 0 auto; }
.agence-card__badge {
flex: 0 0 52px !important;
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
overflow: hidden;
} .agence-panel {
position: absolute;
top: 20px;
z-index: 1000;
max-height: calc(100% - 40px);
box-sizing: border-box;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
filter: drop-shadow(0 4px 7.5px rgba(0, 0, 0, .25));
color: #262626;
font-family: "Open Sans", sans-serif;
line-height: 1.4;
}
.agence-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.agence-panel.is-left { left: 20px; }
.agence-panel.is-right { right: 20px; }
.agence-panel__scroll { max-height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; max-height: inherit; scrollbar-width: thin; }
.agence-panel .agence-card { padding-bottom: 0; }
.agence-panel__close {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
color: #555;
font: 20px/26px Arial, sans-serif;
cursor: pointer;
z-index: 5;
}
.agence-panel .agence-card__body { padding-bottom: 28px; } .agence-marker.is-active { z-index: 900 !important; }
.agence-marker.is-active .agence-marker__pin { filter: drop-shadow(0 0 0 transparent) brightness(1.08); } .agence-panel.is-compact { top: auto; bottom: 12px; left: 12px !important; right: 12px !important; width: auto !important; max-height: 75%; }