.carte {
position: relative;
z-index: 2;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
max-width: 1045px!important;
padding-bottom: var(--wp--preset--spacing--5);
}
.carte::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://www.metierinterim.com/wp-content/themes/metier-interim/assets/chart/fond-guillemet-2.svg);
background-size: 60%;
background-position: -75px bottom;
background-repeat: no-repeat;
}
.carte-popup {
position: absolute;
top: calc(50% - var(--wp--preset--spacing--5));
left: 0;
}
.carte-popup-item {
display: none;
text-decoration: none;
}
.carte-popup-item.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 279px;
max-width: 100%;
padding: var(--wp--preset--spacing--2);
background-color: var(--wp--preset--color--custom-blanc);
border-radius: 25px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}
.carte-popup-item-city {
padding: 6px 16px;
font-size: var(--wp--preset--font-size--4);
font-weight: 700;
color: var(--wp--preset--color--custom-blanc);
background-color: var(--wp--preset--color--custom-noir);
transform: rotate(3deg);
text-align: center;
}
.carte-popup-item p {
text-align: center;
}
.carte-popup-overlay {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: var(--wp--preset--color--custom-vert);
font-weight: 700;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 25px;
pointer-events: none;
opacity: 0;
transition: 0.3s all;
}
.carte-popup:hover .carte-popup-overlay {
opacity: 1;
}
.carte-popup-overlay img {
margin-left: 8px;
}
.carte-svg {
max-width: 100%;
}
.carte-svg-pin {
position: relative;
cursor: pointer;
transition: 0.3s transform;
transform-origin: center;
transform-box: fill-box;
}
.carte-svg-pin.active {
transform: scale(2);
pointer-events: none;
}
.carte-svg-pin {
transition: all 0.3s;
}
.carte-svg-pin.active ellipse.carte-svg-pin-item {
fill: var(--wp--preset--color--custom-noir);
}
.carte-svg-pin.active g {
transition: 0.3s transform;
transform-origin: center;
transform-box: fill-box;
transform: scale(1.5);
}
.carte-svg-pin.active g ellipse {
stroke: var(--wp--preset--color--custom-noir);
stroke-width: 1px;
}
.carte-svg-line {
opacity: 0;
transition: 0.3s opacity;
}
.carte-svg-line.active {
opacity: 1;
}
.carte-content {
position: absolute;
top: 0;
right: 0;
width: 364px;
max-width: 100%;
padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
background-color: var(--wp--preset--color--custom-blanc);
border-radius: 25px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}
.carte-popup.swiper,
.carte-popup.swiper .swiper-wrapper {
overflow: visible!important;
}
.carte-swiper-pagination {
display: none;
}
@media (max-width: 768px) {
.carte {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: var(--wp--preset--spacing--2);
max-width: var(--wp--style--global--content-size)!important;
padding-bottom: 0;
}
.carte-popup {
position: relative;
top: unset;
left: unset;
width: 100%;
padding-bottom: 60px;
}
.carte-popup-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 279px;
max-width: 100%;
padding: var(--wp--preset--spacing--2);
background-color: var(--wp--preset--color--custom-blanc);
border-radius: 25px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}
.carte-popup-item.active {
width: auto;
}
.carte-popup-item.active p br {
display: none;
}
.carte-popup-item::after {
content: "Découvrir l'agence";
padding: 10px 16px;
background-color: var(--wp--preset--color--custom-vert);
color: var(--wp--preset--color--custom-blanc);
border-radius: 25px;
font-size: var(--wp--preset--font-size--2);
font-weight: 700;
}
.carte-popup-overlay {
display: none;
}
.carte-content {
position: initial;
top: unset;
right: unset;
width: auto;
padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2) var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
}
.carte-popup-item-city {
transform: rotate(1.5deg);
}
.carte-svg-container {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 1/1;
overflow: hidden;
}
.carte-svg {
position: absolute;
top: 50%;
left: 0;
width: 150%;
height: auto;
max-width: unset;
transform: translateY(-54%);
}
.carte-svg-lines {
display: none;
}
.carte-svg-pin {
transform: scale(2);
}
.carte-popup .swiper-wrapper {
width: 100%;
}
.carte-swiper-pagination {
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 96px;
height: 40px;
transform: translateX(-50%);
}
.carte-swiper-pagination .carte-pagination-next,
.carte-swiper-pagination .carte-pagination-prev {
position: absolute;
top: 50%;
left: 0;
width: 40px;
height: 40px;
transform: translateY(-50%);
cursor: pointer;
}  
.carte-swiper-pagination .carte-pagination-next {
left: auto;
right: 0;
}
.carte-swiper-pagination .carte-pagination-next img,
.carte-swiper-pagination .carte-pagination-prev img {
width: 100%;
height: 100%;
}
.carte-swiper-pagination .carte-pagination-prev img {
transform: rotate(180deg);
}
.carte-swiper-pagination .carte-pagination-next.swiper-button-disabled,
.carte-swiper-pagination .carte-pagination-prev.swiper-button-disabled {
opacity: 0.2;
}
}