.skills-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .skill-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .skill-item {
            flex: 0 0 45%;
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .skill-name {
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
        }

        .progress-container {
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            width: 0;
            border-radius: 10px;
            transition: width 1.5s ease-in-out;
        }

        /* Couleurs personnalisées pour chaque barre */
        .progress-bar.photoshop { background-color: #3ca8f8; }
        .progress-bar.illustrator { background-color: #ff9a01; }
        .progress-bar.indesign { background-color: #cd1654; }
        .progress-bar.aftereffects { background-color: #9a9afe; }
        .progress-bar.premiere { background-color: #01005b; }
        .progress-bar.xd { background-color: #ff61f6; }
        .progress-bar.html { background-color: #254bdd; }
        .progress-bar.mailchimp { background-color: #f7d919; }
        .progress-bar.wordpress { background-color: #207196; }
        .progress-bar.suiteoffice { background-color: #f73900; }

        .progress-value {
            text-align: right;
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }

@media (max-width: 600px) {
.skill-row{
    margin-bottom: 0px;
}

    .skill-item {
        flex: 0 0 100%; /* 1 barre par ligne sur smartphone */
        margin-bottom: 20px;
        
    }
}