#tech-skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--skill-height);
    padding: var(--padding);
    box-sizing: border-box;
    color: var(--font1);
    text-align: center;
}

#skill-container {
    display: flex;
    flex-direction: column;
}

#skill-description,
#skill-visualisation {
    width: 100%;
}

#skill-description {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    padding: 0 20px;

    #skill-resume {
        position: relative;

        h3 {
            display: inline-block;
            font-size: 1.3rem;
            /* font-size: 1.6rem; */
            /* margin-bottom: 30px; */
            margin-bottom: 15px;
        }

        p {
            /* margin-left: 31px; */
            /* margin-bottom: 12px; */
            margin-bottom: 20px;
        }
    }

    #skill-detail-box {
        display: none;
    }
}

#skill-visualisation {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 36px;
}

/* #skill-visualisation-result{

} */

/* 📱 Mobile large (481px et plus) */
@media (min-width: 481px) {}

/* 📲 Tablettes (768px et plus) */
@media (min-width: 768px) {}

/* 💻 Ordinateurs portables (1025px et plus) */
@media (min-width: 1025px) {

    #skill-visualisation {
        margin-top: 0px;
    }

    #tech-skill {
        text-align: start;
    }

    #skill-container {
        margin-top: 40px;
    }

    #skill-container {
        flex-direction: row;
    }

    #skill-description,
    #skill-visualisation {
        width: 50%;
    }

    #skill-detail-box {}

    #skill-visualisation {}

    #skill-visualisation-choice {
        display: flex;
        justify-content: space-between;
    }

    #skill-description {

        #skill-detail-box {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background-color: var(--background-light);
            margin-top: 40px;
            width: 100%;
            height: 150px;

            .golder-border {
                position: relative;
                width: 100%;
                height: 100%;

                span {
                    position: absolute;
                    width: 100%;
                    height: 6px;
                    background: linear-gradient(to bottom,
                            var(--gold4)0%,
                            var(--gold3)25%,
                            var(--gold2)40%,
                            var(--gold1)50%,
                            var(--gold2)60%,
                            var(--gold3)70%,
                            var(--gold4)100%);
                }

                span:nth-child(1n),
                span:nth-child(2n) {
                    width: 100%;
                    height: 6px;
                    background: linear-gradient(to bottom,
                            var(--gold4)0%,
                            var(--gold3)25%,
                            var(--gold2)40%,
                            var(--gold1)50%,
                            var(--gold2)60%,
                            var(--gold3)70%,
                            var(--gold4)100%);
                }

                span:nth-child(2n) {
                    bottom: 0px;
                }

                span:nth-child(3n),
                span:nth-child(4n) {
                    width: 6px;
                    height: 100%;
                    background: linear-gradient(to left,
                            var(--gold4)0%,
                            var(--gold3)25%,
                            var(--gold2)40%,
                            var(--gold1)50%,
                            var(--gold2)60%,
                            var(--gold3)70%,
                            var(--gold4)100%);
                }

                span:nth-child(3n) {
                    left: 0;
                    border-bottom-right-radius: 10px;
                    border-top-right-radius: 10px;
                    corner-shape: bevel;
                }

                span:nth-child(4n) {
                    right: 0px;
                    border-bottom-left-radius: 10px;
                    border-top-left-radius: 10px;
                    corner-shape: bevel;
                }
            }

            p {
                text-align: center;
                font-style: italic;
                position: absolute;
                color: var(--background1);
                padding: 0 20px;
            }
        }
    }

}

/* 🖥 Grands écrans (1367px et plus) */
@media (min-width: 1367px) {

    #skill-description {
        padding-right: 58px;

        #skill-resume {

            h3 {
                font-size: 1.6rem;
                margin-bottom: 15px;
            }

            p {
                margin-left: 31px;
                margin-bottom: 20px;
            }
        }
    }
}

/* 🖥📺 Ultra-large (1920px et plus) — optionnel */
@media (min-width: 1920px) {
    #skill-description {
        #skill-detail-box {
            margin-top: 72px;
        }
    }
}