.bloc-icon {
    position: fixed;
    left: 30px;
    top: 100px;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bloc-one-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 42px;
    height: 42px;

    background-color: white;
    color: var(--text-color);

    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    text-decoration: none;

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bloc-one-icon svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.bloc-one-icon:hover {
    color: white;

    transform: translateY(-7px) scale(1.1);
}

.linkedin:hover {
    background-color: #0a66c2;
}

.github:hover {
    background-color: black;
}

.gitlab:hover {
    background-color: #e24329;
}

.bloc-one-icon:hover svg {
    transform: rotate(-10deg) scale(1.1);
}

@media screen and (max-width: 768px) {
    .bloc-icon {
        /* Sur mobile, on les passe en bas de l'écran à l'horizontale pour ne pas gêner la lecture */
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row; /* Aligné de gauche à droite */
        background: rgba(255, 255, 255, 0.9); /* Petit fond semi-transparent global */
        padding: 10px 20px;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .bloc-one-icon {
        width: 45px;
        height: 45px;
        box-shadow: none; /* On retire l'ombre individuelle sur mobile */
    }
}