/* Styles pour les icônes SVG de la Tech Stack */
.mxd-tech-stack-cards__icon svg {
    width: auto;
    height: 100%;
    max-height: 7rem;
    display: block;
    transition: all 0.3s ease;
}

/* Par défaut : couleur sombre pour tous les path SVG */
.mxd-tech-stack-cards__icon svg path {
    fill: #1a1a1a !important;
    transition: fill 0.3s ease;
}

/* Couleurs spécifiques pour chaque technologie au hover */
.mxd-tech-stack-cards__item[data-tech="angular"]:hover svg path { fill: #DD0031 !important; }
.mxd-tech-stack-cards__item[data-tech="react"]:hover svg path { fill: #61DAFB !important; }
.mxd-tech-stack-cards__item[data-tech="vuejs"]:hover svg path { fill: #4FC08D !important; }
.mxd-tech-stack-cards__item[data-tech="symfony"]:hover svg path { fill: #000000 !important; }
.mxd-tech-stack-cards__item[data-tech="php"]:hover svg path { fill: #777BB4 !important; }
.mxd-tech-stack-cards__item[data-tech="postgresql"]:hover svg path { fill: #336791 !important; }
.mxd-tech-stack-cards__item[data-tech="mysql"]:hover svg path { fill: #4479A1 !important; }
.mxd-tech-stack-cards__item[data-tech="docker"]:hover svg path { fill: #2496ED !important; }
.mxd-tech-stack-cards__item[data-tech="aws"]:hover svg path { fill: #FF9900 !important; }
.mxd-tech-stack-cards__item[data-tech="nodejs"]:hover svg path { fill: #339933 !important; }
.mxd-tech-stack-cards__item[data-tech="laravel"]:hover svg path { fill: #FF2D20 !important; }
.mxd-tech-stack-cards__item[data-tech="flutter"]:hover svg path { fill: #02569B !important; }
.mxd-tech-stack-cards__item[data-tech="react-native"]:hover svg path { fill: #61DAFB !important; }

/* JavaScript - logo avec rect (fond) et text */
.mxd-tech-stack-cards__item[data-tech="javascript"]:hover svg rect { fill: #F7DF1E !important; }
.mxd-tech-stack-cards__item[data-tech="javascript"]:hover svg text { fill: #000000 !important; }

/* TypeScript - logo avec rect (fond) et text */
.mxd-tech-stack-cards__item[data-tech="typescript"]:hover svg rect { fill: #3178C6 !important; }
.mxd-tech-stack-cards__item[data-tech="typescript"]:hover svg text { fill: #FFFFFF !important; }

@media only screen and (min-width: 768px) {
    .mxd-tech-stack-cards__icon svg {
        max-height: 9rem;
    }
}

/* Assurer que les SVG sont visibles */
.mxd-tech-stack-cards__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
}

@media only screen and (min-width: 768px) {
    .mxd-tech-stack-cards__icon {
        min-height: 9rem;
    }
}