.inactive {
    opacity: .6;
    cursor: not-allowed;
}

@media screen and (max-width: 767px) {
    .delete-on-mobile {
        display: none !important;
    }
}

.purple-underline {
    position: relative;
    display: inline-flex;
    padding-bottom: 0px !important;
    margin-bottom: 10px;
}
.purple-underline::after {
    --left: 10px;
    content: "";
    position: absolute;
    width: 30%;
    min-width: 40px;
    max-width: clamp(80px, 100%, 150px);
    height: 3px;
    background-color: var(--font-purple);
    left: 10px;
    bottom: 0;
}
.border-gradient {
    position: relative;
    border-radius: 3px;
    z-index: 0;
    background: none;
}

.border-gradient::before {
    --size: -2px;
    content: '';
    position: absolute;
    inset: var(--size);
    border-radius: 5px;
    z-index: -1;
    background: linear-gradient(60deg, var(--font-purple), var(--blue));
}

.border-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background-color: var(--black-dark);
    transition: background-color var(--transition-3);
    z-index: -1;
}
.border-gradient:hover::after {
    background-color: transparent;
}

.container.global {
    max-width: clamp(300px, 90%, 1200px);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;
    gap: 20px 50px;
    padding-top: clamp(20px, 3vw, 50px);
}

.container.global > * {
    flex: 1 1 300px;
    min-width: 280px;
    max-width: clamp(280px, 100%, 500px);
}

li.tools {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
li.tools::before {
    content: "•";          /* bullet personnalisé */
    margin-right: 8px;
    color: var(--font-white);           /* couleur du bullet */
    font-size: 1em
}

.tools .text {
    display: inline-block;
    margin-left: 8px;
    font-weight: 500;
    color: var(--font-white);
}

.tools .icon {
    width: var(--fs-18);
    height: var(--fs-18);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.tools.bash .text::before { content: 'Bash';}
.tools.css .text::before { content: 'CSS';}
.tools.html .text::before { content: 'HTML';}
.tools.java .text::before { content: 'Java';}
.tools.javafx .text::before { content: 'Javafx';}
.tools.js .text::before { content: 'JavaScript';}
.tools.mysql .text::before { content: 'MySQL';}
.tools.php .text::before { content: 'PHP';}
.tools.psql .text::before { content: 'PostgreSQL';}
.tools.sql .text::before { content: 'SQL';}

.tools.eclipse .text::before { content: 'Eclipse';}
.tools.git .text::before { content: 'Git';}
.tools.jetbrains .text::before { content: 'JetBrains Suites';}
.tools.vscode .text::before { content: 'Visual Studio Code';}
.tools.scenebuilder .text::before { content: 'Scene builder';}

.tools.flask .text::before { content: 'Flask';}
.tools.laravel .text::before { content: 'Laravel';}

.tools.junit .text::before { content: 'JUnit';}
.tools.gradle .text::before { content: 'Gradle';}


.tools.bash .icon { background-image: url('/images/competences/langage/bash.png'); }
.tools.css .icon { background-image: url('/images/competences/langage/css.png'); }
.tools.html .icon { background-image: url('/images/competences/langage/html.png'); }
.tools.java .icon { background-image: url('/images/competences/langage/java.png'); }
.tools.javafx .icon { background-image: url('/images/competences/langage/javafx.png'); }
.tools.js .icon { background-image: url('/images/competences/langage/js.png'); }
.tools.mysql .icon { background-image: url('/images/competences/langage/mysql.png'); }
.tools.php .icon { background-image: url('/images/competences/langage/php.png'); }
.tools.psql .icon { background-image: url('/images/competences/langage/psql.png'); }
.tools.sql .icon { background-image: url('/images/competences/langage/sql.png'); }

.tools.eclipse .icon { background-image: url('/images/competences/tools/eclipse.png'); }
.tools.git .icon { background-image: url('/images/competences/tools/git.png'); }
.tools.jetbrains .icon { background-image: url('/images/competences/tools/jetbrains.png'); }
.tools.vscode .icon { background-image: url('/images/competences/tools/vscode.png'); }
.tools.scenebuilder .icon { background-image: url('/images/competences/tools/scene-builder.png'); }


.tools.flask .icon { background-image: url('/images/competences/frameworks/flask.png'); }
.tools.laravel .icon { background-image: url('/images/competences/frameworks/laravel.png'); }

.tools.junit .icon { background-image: url('/images/competences/autre/junit.png'); }
.tools.gradle .icon { background-image: url('/images/competences/autre/gradle.png'); }