.map-agences-block {
width: 100%;
margin: 2rem 0;
}
.map-agences-wrapper {
position: relative;
width: 100%;
}
.map-search-container {
position: absolute;
top: 10px;
left: 50px;
z-index: 11;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.map-search-container .select2-container {
width: 320px !important;
}
.leaflet-pane{z-index: 10;}
.leaflet-control-container .leaflet-top{z-index: 10;}
.map-search-container .select2-container--default .select2-selection--single {
border: 1px solid #ddd;
border-radius: 6px;
height: 40px;
padding: 5px 10px;
}
.map-search-container .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 28px;
color: #555;
}
.map-search-container .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.map-search-container .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px;
}
@media (max-width: 768px) {
.map-search-container {
width: calc(100% - 60px);
left: 10px;
right: 10px;
}
.map-search-container .select2-container {
min-width: 100% !important;
width: 100% !important;
}
}
.map-agences-container {
width: 100%;
height: 550px;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e1e5e9;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.map-agences-no-data {
padding: 2rem;
text-align: center;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e1e5e9;
}
.map-agences-no-data p {
margin: 0;
color: #6c757d;
font-size: 1.1rem;
} .custom-marker-icon {
position: relative;
width: 40px;
height: 40px;
}
.custom-marker-icon .round-marker {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
}
.custom-marker-icon .marker-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 20px;
object-fit: contain;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
} .popup-address-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e1e5e9;
}
.popup-text{
p{margin: 10px 0;}
}
.popup-marker {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.popup-marker img {
width: 40px;
height: 20px;
object-fit: contain;
}
.popup-address-text {
font-size: 13px;
color: #555;
line-height: 1.4;
} .leaflet-popup-content .agence-card {
height: 100%;
background: #fff;
border: 1px solid #e1e5e9;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
max-width: 320px;
min-width: 280px;
}
.leaflet-popup-content .agence-color-bar {
height: 6px;
width: 100%;
margin-bottom: 0;
}
.leaflet-popup-content .card-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: .5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.leaflet-popup-content .card-body {
padding: .2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.leaflet-popup-content .agence-thumbnail {
width: 100%;
margin-bottom: 1rem;
position: relative;
height: 150px;
border-radius: 3px;
overflow: hidden;
}
.leaflet-popup-content .agence-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.leaflet-popup-content .agence-infos {
padding: 0 .8rem;
}
.leaflet-popup-content .agence-address {
background: #f8f9fa;
padding: .5rem;
border-radius: 6px;
font-weight: 500;
margin-top: auto;
}
.leaflet-popup-content .agence-contact-info > div {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1;
}
.leaflet-popup-content .card-body a {
color: #333;
font-weight: 500;
}
.leaflet-popup-content .card-body a:hover {
color: #000;
text-decoration: underline;
} .agence-popup {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
min-width: 250px;
max-width: 300px;
}
.agence-popup h3 {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
color: #333;
border-bottom: 2px solid #007cba;
padding-bottom: 6px;
}
.agence-popup a {
color: #007cba;
text-decoration: none;
}
.agence-popup a:hover {
color: #005a8c;
text-decoration: underline;
} .leaflet-popup-content-wrapper {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.leaflet-popup-tip {
background: white;
}