/* site technologiques carte vs */
#sitetech-maps-ctn {
    min-width: 500px;
}
#sites-anchor {
    overflow-x: clip;
}
/* Container paramter ================================================================ */
.site-tech-card-ctn {
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: nowrap;
    overflow-y: visible;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    cursor: grab;
    max-width: 100% !important;
}
.site-tech-card-ctn::-webkit-scrollbar {
    display: none;
}

/* pin parameter ===================================================================== */
.sitetech-map-pin {
    cursor: pointer;
    position: absolute;
    display: flex;
    translate: -50% -50%;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    transition: scale 0.3s ease-out;
    & .sitetech-map-label {
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
    }
    & .sitetech-map-city {
        font-size: var(--text-s);
        line-height: 125%;
        font-weight: bold;
        transition: text-shadow 0.3s ease-out;
    }
    & .sitetech-map-name {
        font-size: var(--text-xs);
        line-height: 110%;
        text-align: center;
    }
}
.sitetech-map-pin svg {
    width: 2.925rem;
    height: 3.65625rem;    
    fill: white;
    transition: fill 0.3s ease-out;
}
.sitetech-map-pin.active, .has-hover .sitetech-map-pin:hover {
    scale: 1.05;
    & .sitetech-map-city {
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.60);
    }
    & svg {
        fill: var(--primary-color);
        animation: bounce 0.8s ease-in-out infinite;
    }
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}
/* positionning des pins */
#sitetech-map-pin-monthey {
    top: 52%;
    left: 9%;
}
#sitetech-map-pin-martigny {
    top: 68%;
    left: 16%;
}
#sitetech-map-pin-chable {
    top: 78%;
    left: 24%;
}
#sitetech-map-pin-conthey {
    top: 60%;
    left: 34%;
}
#sitetech-map-pin-sion {
    top: 56%;
    left: 43%;
}
#sitetech-map-pin-sierre {
    top: 50%;
    left: 53%;
}
#sitetech-map-pin-viege {
    top: 53%;
    left: 67%;
}


/* layout card ======================================================================= */
@property --colorsiteTechCard1 {
    syntax: '<color>';
    initial-value: white;
    inherits: false;
}
@property --colorsiteTechCard2 {
    syntax: '<color>';
    initial-value: white;
    inherits: false;
}
@property --siteTechCardPourcent1 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}
@property --siteTechCardPourcent2 {
    syntax: '<percentage>';
    initial-value: 75%;
    inherits: true;
}

.site-tech-card {
    margin: 0px 0.5rem;
    position: relative;
    user-select: none;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    height: 29rem;
    min-width: 19.25rem;
    border-radius: 1rem;
    display: flex;
    padding: 1rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--bg-color);
    transition: border 0.3s ease-out,
                box-shadow 0.3s ease-out;
    & h5 {
        line-height: 150%;
    }
    & .bg-site-tech-card {
        left: 0px;
        top: 0px;
        border-radius: 1rem;
        position: absolute;
        height: 100%;
        width: 100%;
        --colorsiteTechCard1: rgba(23, 73, 222, 0.1);
        --colorsiteTechCard2: rgba(27, 6, 54, 0.80);
        --siteTechCardPourcent1: 0%;
        --siteTechCardPourcent2: 75%;
        transition:                
            --colorsietTechCard1 0.6s ease-out,
            --colorsiteTechCard2 0.6s ease-out,
            --siteTechCardPourcent1 1s ease-out,
            --siteTechCardPourcent2 1s ease-out;
        background: linear-gradient(202deg, var(--colorsiteTechCard1) var(--siteTechCardPourcent1), var(--colorsiteTechCard2) var(--siteTechCardPourcent2));
        z-index: 1;
        pointer-events: none;
    }
}
.site-tech-card.disabled {
    opacity: 0.4 !important;
}

.site-tech-card:has(a:hover) {
    border: 1px solid var(--primary-light-color);
    box-shadow: 0px 4px 45px 0px rgba(138, 38, 255, 0.30);
    & .bg-site-tech-card {
        --colorsiteTechCard1: rgba(52, 7, 110, 0.00);
        --colorsiteTechCard2: rgba(52, 7, 110, 0.88);
        --siteTechCardPourcent1: 10%;
        --siteTechCardPourcent2: 60%;
    }
    & .brxe-button {
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.60);
    }
    & .brxe-button svg {
        rotate: 90deg;
    }
}
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 768px) {
    .site-tech-card {
        scroll-snap-align: center;
    }
    .sitetech-map-name {
        display: none;
    }
    .sitetech-map-pin svg {
        width: 1.8rem;
        height: auto;
    }
}