/* COLORS */
:root {
    --primary-color: #0087b8;
    --secondary-color: #005a7a;
    --tertiary-color: rgba(0, 135, 184, 0.2);
    --background-color1: #0f0f0f;
    --background-color: #131313;
    --text-color: #e0e0e0;
}
/* GLOBAL STYLES */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: var(--text-color); 
    text-decoration: none;
    list-style: none;
}
/* Ajoute dans ton fichier CSS */
.menu a.active {
    color: var(--primary-color) !important;
}
.h{
    display: none !important;
}
.hh{
    display: none !important;
}

html{
    height: max-content;
    width: 100%;
    /* overflow: hidden; */
    scroll-behavior: smooth;

    /* STYLE DU BODY */
    body{
        width: 100%;
        height: max-content;
        background-color: var(--background-color1);
        /* STYLE DU CONTENU */
        .contenu{
            width: 80%;
            max-width: 1600px;
            margin: 0 auto;
        }

        .corps{
            width: 100%;
            height: 100%;
            position: relative;
            /* LIENS */
            .liens{
                display: flex;
                position: fixed;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                background: var(--background-color);
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 100000;
                .bx-x{
                    font-size: 30px;
                    color: var(--text-color);
                    cursor: pointer;
                    transition: color 0.3s;
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    &:hover{
                        color: var(--secondary-color);
                    }
                }
                div{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    i{
                        font-size: 24px;
                        color: var(--primary-color);
                    }
                    a{
                        color: var(--text-color);
                        transition: color 0.3s;
                        font-size: 20px;
                        border-bottom: 1px solid var(--primary-color);
                        &:hover{
                            color: var(--secondary-color);
                        }
                    }
                }
            }
            /* CONTACTS */
            .contacts{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 20000;
                background: var(--background-color);
                .bx-x{
                    font-size: 30px;
                    color: var(--text-color);
                    cursor: pointer;
                    transition: color 0.3s;
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    &:hover{
                        color: var(--secondary-color);
                    }
                }
                div{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    width: 400px;

                    i{
                        font-size: 24px;
                        color: var(--primary-color);
                    }
                    a{
                        color: var(--text-color);
                        transition: color 0.3s;
                        font-size: 20px;
                        border-bottom: 1px solid var(--primary-color);
                        &:hover{
                            color: var(--secondary-color);
                        }
                    }
                    p{
                        font-size: 20px;
                        color: var(--secondary-color);
                    }
                }
            }
            /* NAVIGATION */
            .nav{
                width: 100%;
                height: 80px;
                background-color: var(--background-color);
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                z-index: 1000;
                /* NAVIGATION CONTENU */
                .nav-contenu{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 0 auto;
                    height: 100%;
                    /* MENU */
                    .menu{
                        display: flex;
                        width: 400px;
                        align-items: center;
                        justify-content: space-between;
                        li{
                            a{
                                color: var(--text-color);
                                text-decoration: none;
                                font-size: 16px;
                                transition: color 0.3s;
                                text-align: left;
                                &:hover{
                                      color: var(--secondary-color);
                                }
                            }
                         
                        }
                    }
                    /* NAVIGATION AUTRES */
                    .nav-autres{
                        padding: 10px 28px;
                        background: transparent;
                        border: 1px solid var(--secondary-color);
                        border-radius: 8px;
                        box-shadow: 0 2px 8px var(--tertiary-color);
                        cursor: pointer;
                        transition: 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
                        outline: none;
                        text-decoration: none;
                        display: inline-block;

                        &:hover{ 
                            background: var(--primary-color);
                            color: var(--text-color);
                            border-color: var(--background-color);
                            transform: translateY(-2px) scale(1.04);
                            box-shadow: 0 4px 16px var(--tertiary-color);
                        }
                    }
                }

            }

            /* ACCUEIL */
            #accueil{
                position: relative;
                width: 100%;
                height: 800px;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    filter: blur(0px) brightness(0.5);
                    position: absolute;z-index: -2;
                }
  
                .acceuil-contenu{
                    width: 80%;
                    height: 100%;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    h4{
                        font-size: 32px;
                        margin-bottom: 10px;
                    }

                    h1{
                        font-size: 80px;
                        margin-bottom: 20px;
                    }

                    p{
                        font-size: 25px;
                        margin-bottom: 30px;
                    }

                    .btn{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 20px;

                        .btn-secondary{
                            width: 120px;
                            padding: 10px 28px;
                            text-align: center;
                            background: transparent;
                            border: 1px solid var(--secondary-color);
                            border-radius: 8px;
                            box-shadow: 0 2px 8px var(--tertiary-color);
                            cursor: pointer;
                            transition: 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
                            outline: none;
                            text-decoration: none;
                            display: inline-block;

                            &:hover{ 
                                background: var(--secondary-color);
                                color: var(--text-color);
                                border-color: var(--text-color);
                                transform: translateY(-2px) scale(1.04);
                                box-shadow: 0 4px 16px var(--tertiary-color);
                            }
                        }

                        .contact{
                            width: 120px;
                            padding: 10px 28px;
                            text-align: center;
                            background: transparent;
                            border: 1px solid var(--secondary-color);
                            border-radius: 8px;
                            box-shadow: 0 2px 8px var(--tertiary-color);
                            cursor: pointer;
                            transition: 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
                            outline: none;
                            text-decoration: none;
                            display: inline-block;

                            &:hover{ 
                                background: var(--secondary-color);
                                color: var(--text-color);
                                border-color: var(--text-color);
                                transform: translateY(-2px) scale(1.04);
                                box-shadow: 0 4px 16px var(--tertiary-color);
                            }
                        }
                    }
                    .social {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        position: absolute;
                        bottom: 50px;
                        left: 50px;
                        a{
                            font-size: 24px;
                            color: var(--secondary-color);
                            transition: color 0.2s;
                            width: 50px;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            background: rgba(255, 255, 255, 0.1);
                            backdrop-filter: blur(10px);
                            border: 1px solid var(--tertiary-color);
                            i{
                                font-size: 24px;
                                color: var(--text-color);
                            }
                            &:hover i{
                                color: var(--secondary-color);
                            }
                        }

                    }
                }


            } 
        

            /* À PROPOS */
            #apropos {
                padding: 60px 0;
                .apropos-contenu {
                    width: 80%;
                    margin: 0 auto;
                    height: 700px;
                    position: relative;
                    img{
                        position: absolute;
                        right: 0;
                        top: 0;
                        z-index: -1;
                        height: 100%;
                        width: auto;
                        object-fit: cover;
                    }
                    width: 80%;
                    margin: 0 auto;
                    .titre{
                        
                        h2 {
                            font-size: 36px;
                            margin-bottom: 20px;
                            border-bottom: 2px solid var(--secondary-color);
                            width: max-content;
                        }
                        a{
                            font-size: 18px;
                            line-height: 1.6;
                            max-width: 800px;
                            margin-bottom: 30px;
                            width: max-content;
                            cursor: pointer;
                            color: var(--secondary-color);
                            transition: color 0.2s;
                            &:hover {
                                color:  var(--tertiary-color);
                                
                            }

                            i {
                                margin-right: 5px;
                                font-size: 24px;
                                color: var(--secondary-color);
                            }
                        }
                    }
                    .apropos-details {
                        h3{
                            font-size: 24px;
                            margin-bottom: 15px;
                            border-bottom: 2px solid var(--secondary-color);
                            width: max-content;
                        }

                        p {
                            font-size: 18px;
                            line-height: 1.6;
                            max-width: 800px;
                            margin-top: 20px;
                        }
                    }
                    .apropos-localisation {
                        display: flex;
                        align-items: center;
                        gap: 20px;
                        margin-top: 30px;

                        .loc {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            i {
                                font-size: 24px;
                                color: var(--secondary-color);
                            }
                            h3 {
                                font-size: 20px;
                                color: var(--secondary-color);
                            }
                        }

                        p {
                            font-size: 18px;
                            line-height: 1.6;
                            max-width: 800px;
                        }
                    }

                }
            }

            /* COMPÉTENCES */
            #competences {
                .competences-contenu {
                  padding-bottom: 100px;
                    .titre {
                        h2 {
                            font-size: 36px;
                            margin-bottom: 20px;
                            border-bottom: 2px solid var(--secondary-color);
                            width: max-content;
                        }
                        p {
                            font-size: 18px;
                            line-height: 1.6;
                            max-width: 800px;
                            margin-top: 20px;
                        }
                    }
                    .competences-details {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 40px;
                        /* INFORMATIQUE */
                        .informatique {
                            margin-top: 20px;

                            .card {
                                margin-top: 20px;
                                display: flex;
                                flex-wrap: wrap;
                                gap: 20px;
                                /* CARD HTML */
                                .card-html{
                                    width: 380px;
                                    border: 1px solid var(--tertiary-color);
                                    padding: 20px;
                                    border-radius: 10px;
                                    &:hover {
                                        background: var(--tertiary-color);
                                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                                    }
                                    .html-titre {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;
                                        margin-bottom: 10px;
                                        h4 {
                                            font-size: 24px;
                                            width: 120px;
                                        }
                                        .progression {
                                            width: 100%;
                                            height: 6px;
                                            border-radius: 5px;
                                            display: flex;
                                            align-items: center;
                                            position: relative;
                                            border: 1px solid var(--primary-color);
                                            width: calc(100% - 150px);
                                        .principale{
                                            width: 80%;
                                            height: 100%;
                                            background: var(--primary-color);
                                        }
                                            .secondaire {
                                                width: 19px;
                                                height: 19px;
                                                border-radius: 50%;
                                                border: 2px solid var(--primary-color);
                                                position: absolute;
                                                left: 80%;
                                                transform: translateX(-50%);
                                                background: var(--background-color);
                                                cursor: pointer;
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 50%;
                                                    background: var(--primary-color);
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }
                                    }
                                    .html-description {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        width: 100%;
                                        img {
                                            max-width: 120px;
                                            height: 120px;
                                            border: 2px solid var(--secondary-color);
                                            border-radius: 10px;
                                        }
                                        p {
                                            font-size: 16px;
                                            line-height: 1.6;
                                            width: calc(100% - 150px);
                                        }
                                    }
                                }

                                /* CARD CSS */
                                .card-css {
                                    width: 380px;
                                    border: 1px solid var(--tertiary-color);
                                    padding: 20px;
                                    border-radius: 10px;
                                    &:hover {
                                        background: var(--tertiary-color);
                                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                                    }
                                    .css-titre {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;
                                        margin-bottom: 10px;
                                        h4 {
                                            font-size: 24px;
                                            width: 120px;
                                        }
                                        .progression {
                                            width: 100%;
                                            height: 6px;
                                            border-radius: 5px;
                                            display: flex;
                                            align-items: center;
                                            position: relative;
                                            border: 1px solid var(--primary-color);
                                            width: calc(100% - 150px);
                                        .principale{
                                            width: 70%;
                                            height: 100%;
                                            background: var(--primary-color);
                                        }
                                            .secondaire {
                                                width: 19px;
                                                height: 19px;
                                                border-radius: 50%;
                                                border: 2px solid var(--primary-color);
                                                position: absolute;
                                                left: 70%;
                                                transform: translateX(-50%);
                                                background: var(--background-color);
                                                cursor: pointer;
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 50%;
                                                    background: var(--primary-color);
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }
                                    }
                                    .css-description {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        width: 100%;
                                        img {
                                            max-width: 120px;
                                            height: 120px;
                                            border: 2px solid var(--secondary-color);
                                            border-radius: 10px;
                                        }
                                        p {
                                            font-size: 16px;
                                            line-height: 1.6;
                                            width: calc(100% - 150px);
                                        }
                                    }
                                }

                                /* CARD JAVASCRIPT */
                                .card-js {
                                    width: 380px;
                                    border: 1px solid var(--tertiary-color);
                                    padding: 20px;
                                    border-radius: 10px;
                                    &:hover {
                                        background: var(--tertiary-color);
                                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                                    }
                                    .js-titre {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;
                                        margin-bottom: 10px;
                                        h4 {
                                            font-size: 24px;
                                            width: 120px;
                                        }
                                        .progression {
                                            width: 100%;
                                            height: 6px;
                                            border-radius: 5px;
                                            display: flex;
                                            align-items: center;
                                            position: relative;
                                            border: 1px solid var(--primary-color);
                                            width: calc(100% - 150px);
                                        .principale{
                                            width: 70%;
                                            height: 100%;
                                            background: var(--primary-color);
                                        }
                                            .secondaire {
                                                width: 19px;
                                                height: 19px;
                                                border-radius: 50%;
                                                border: 2px solid var(--primary-color);
                                                position: absolute;
                                                left: 70%;
                                                transform: translateX(-50%);
                                                background: var(--background-color);
                                                cursor: pointer;
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 50%;
                                                    background: var(--primary-color);
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }
                                    }
                                    .js-description {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        width: 100%;
                                        img {
                                            max-width: 120px;
                                            height: 120px;
                                            border: 2px solid var(--secondary-color);
                                            border-radius: 10px;
                                        }
                                        p {
                                            font-size: 16px;
                                            line-height: 1.6;
                                            width: calc(100% - 150px);
                                        }
                                    }
                                }
                                /* CARD PHP */
                                .card-php {
                                    width: 380px;
                                    border: 1px solid var(--tertiary-color);
                                    padding: 20px;
                                    border-radius: 10px;
                                    &:hover {
                                        background: var(--tertiary-color);
                                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                                    }
                                    .php-titre {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;
                                        margin-bottom: 10px;
                                        h4 {
                                            font-size: 24px;
                                            width: 120px;
                                        }
                                        .progression {
                                            width: 100%;
                                            height: 6px;
                                            border-radius: 5px;
                                            display: flex;
                                            align-items: center;
                                            position: relative;
                                            border: 1px solid var(--primary-color);
                                            width: calc(100% - 150px);
                                        .principale{
                                            width: 80%;
                                            height: 100%;
                                            background: var(--primary-color);
                                        }
                                            .secondaire {
                                                width: 19px;
                                                height: 19px;
                                                border-radius: 50%;
                                                border: 2px solid var(--primary-color);
                                                position: absolute;
                                                left: 80%;
                                                transform: translateX(-50%);
                                                background: var(--background-color);
                                                cursor: pointer;
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 50%;
                                                    background: var(--primary-color);
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }
                                    }
                                    .php-description {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        width: 100%;
                                        .wriper {
                                            display: flex;
                                            justify-content: center;
                                            width: 120px;
                                            height: 120px;
                                            align-items: center;
                                            border: 2px solid var(--secondary-color) !important;
                                            border-radius: 10px;
                                            img {
                                                filter: brightness(0) invert(1);

                                            }
                                        }
                                        p {
                                            font-size: 16px;
                                            line-height: 1.6;
                                            width: calc(100% - 150px);
                                        }
                                    }
                                }

                                /* CARD MYSQL */
                                .card-mysql {
                                    width: 380px;
                                    border: 1px solid var(--tertiary-color);
                                    padding: 20px;
                                    border-radius: 10px;
                                    &:hover {
                                        background: var(--tertiary-color);
                                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                                    }
                                    .mysql-titre {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;
                                        margin-bottom: 10px;
                                        h4 {
                                            font-size: 24px;
                                            width: 120px;
                                        }
                                        .progression {
                                            width: 100%;
                                            height: 6px;
                                            border-radius: 5px;
                                            display: flex;
                                            align-items: center;
                                            position: relative;
                                            border: 1px solid var(--primary-color);
                                            width: calc(100% - 150px);
                                        .principale{
                                            width: 60%;
                                            height: 100%;
                                            background: var(--primary-color);
                                        }
                                            .secondaire {
                                                width: 19px;
                                                height: 19px;
                                                border-radius: 50%;
                                                border: 2px solid var(--primary-color);
                                                position: absolute;
                                                left: 60%;
                                                transform: translateX(-50%);
                                                background: var(--background-color);
                                                cursor: pointer;
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 50%;
                                                    background: var(--primary-color);
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }
                                    }
                                    .mysql-description {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        width: 100%;
                                        .wriper {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            width: 120px;
                                            height: 120px;
                                            border: 2px solid var(--secondary-color);
                                            border-radius: 10px;
                                            img {
                                                max-width: 100%;
                                                height: auto;
                                            }
                                        }
                                        p {
                                            font-size: 16px;
                                            line-height: 1.6;
                                            width: calc(100% - 150px);
                                        }
                                    }
                                }
                                /* CARD PHOTOSHOP */
                                .card-photoshop {
                                    width: 380px;
                                    border: 1px solid var(--tertiary-color);
                                    padding: 20px;
                                    border-radius: 10px;
                                    &:hover {
                                        background: var(--tertiary-color);
                                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                                    }
                                    .photoshop-titre {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;
                                        margin-bottom: 10px;
                                        h4 {
                                            font-size: 24px;
                                            width: 120px;
                                        }
                                        .progression {
                                            width: 100%;
                                            height: 6px;
                                            border-radius: 5px;
                                            display: flex;
                                            align-items: center;
                                            position: relative;
                                            border: 1px solid var(--primary-color);
                                            width: calc(100% - 150px);
                                        .principale{
                                            width: 30%;
                                            height: 100%;
                                            background: var(--primary-color);
                                        }
                                            .secondaire {
                                                width: 19px;
                                                height: 19px;
                                                border-radius: 50%;
                                                border: 2px solid var(--primary-color);
                                                position: absolute;
                                                left: 30%;
                                                transform: translateX(-50%);
                                                background: var(--background-color);
                                                cursor: pointer;
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 50%;
                                                    background: var(--primary-color);
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }
                                    }
                                    .photoshop-description {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        width: 100%;
                                        .wriper {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            width: 120px;
                                            height: 120px;
                                            border: 2px solid var(--secondary-color);
                                            border-radius: 10px;
                                            img {
                                                width: 120px;
                                                height: 120px;
                                            }
                                        }
                                        p {
                                            font-size: 16px;
                                            line-height: 1.6;
                                            width: calc(100% - 150px);
                                        }
                                    }
                                }  
                                

                            }
                        }
                        /* LANGUES */
                        .card-langues {
                          display: flex;
                          flex-direction: column;
                          h4{
                            font-size: 20px;
                            margin-bottom: 10px;
                          }
                          p{
                            font-size: 16px;
                            line-height: 1.6;
                            span{
                              font-weight: bold;
                              color: var(--primary-color);
                            }
                          }
                        }
                        /* LOISIRS */
                        .card-loisirs {
                          display: flex;
                          flex-direction: column;
                          h4{
                            font-size: 20px;
                            margin-bottom: 10px;
                          }
                          p{
                            font-size: 16px;
                            line-height: 1.6;
                            span{
                              font-weight: bold;
                              color: var(--primary-color);
                            }
                          }
                        }
                    }
                }
            }

            /* PROJETS */
            .projets {
                .projets-contenu {
                    padding-bottom: 100px;
                    .titre {
                        h2 {
                            font-size: 36px;
                            margin-bottom: 20px;
                            border-bottom: 2px solid var(--secondary-color);
                            width: max-content;
                        }
                        p {
                            font-size: 18px;
                            line-height: 1.6;
                            max-width: 800px;
                            margin-top: 20px;
                        }
                    }
                    .projets-cards {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 20px;
                        margin-top: 20px;
                        .card-projet {
                            display: flex;
                            justify-content: space-between;
                            /* background-color: var(--background-color); */
                            border: 1px solid var(--tertiary-color);
                            border-radius: 10px;
                            padding: 20px;
                            width: 550px;
                            height: 200px;
                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                            transition: transform 0.3s;
                            &:hover {
                                background: var(--tertiary-color);
                                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                            }
                            .img{
                                img{
                                    width: 150px;
                                    height: 150px;
                                }
                            }
                            .projets-description{
                                width: 340px;
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                .titre{
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    h3{
                                        font-size: 24px;
                                    }
                                    .sous-titre{
                                        background: var(--background-color);
                                        color: var(--primary-color);
                                        padding: 5px 10px;
                                        border-radius: 5px;
                                        font-size: 16px;
                                        font-weight: bold;
                                    }
                                }
                                .btn{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    width: 100%;
                                   .btn-acheter{
                                        width: 40%;
                                        text-align: center;
                                        margin-top: 8px;
                                        background: var(--primary-color);
                                        color: var(--background-color);
                                        padding: 10px 20px;
                                        border-radius: 5px;
                                        text-decoration: none;
                                        font-size: 16px;
                                        margin-left: 10px;
                                        transition: all 0.3s;
                                        &:hover{
                                            background: var(--primary-color);
                                            color: var(--text-color);
                                    }
                                   }
                                    a{
                                        width: 40%;
                                        text-align: center;
                                        margin-top: 8px;
                                        text-decoration: none;
                                        color: var(--primary-color);
                                        border: 1px solid var(--primary-color);
                                        padding: 10px 20px;
                                        border-radius: 5px;
                                        font-size: 16px;
                                        &:hover{
                                            background: var(--primary-color);
                                            color: var(--text-color);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

/* RESPONSIVE STYLES */
@media (max-width: 600px) {
    .h{
        display: flex !important;
    }
    .hhh{
        display: none !important;
    }

    html{
        body{
            .contenu{
                width: 90%;
            }
            /* NAVIGATION */
            .nav{
                .nav-contenu{
                    .menu-toggle{
                        i{
                            font-size: 25px;
                        }
                    }
                    .nav-autres{
                        color: #0087b8;
                    }
                }
                .menu a.active {
                    color: var(--primary-color) !important;
                }
                .menuprim{
                    position: absolute !important;
                    background-color: var(--background-color) !important;
                    z-index: 1000 !important;
                    top: 0;
                    left: 0;
                    width: 100% !important;
                    height: 100vh !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: flex-start !important;
                    gap: 10px;
                    padding: 50px 20px 20px 20px !important;
                    #close-menu{
                        position: absolute !important;
                        top: 20px !important;
                        right: 20px !important;
                        font-size: 30px !important;
                        color: var(--text-color) !important;
                        cursor: pointer !important;
                    }
                    li{
                        width: 100% !important;
                        a{
                            padding: 12px 16px !important;
                            font-size: 18px !important;
                            color: var(--text-color) !important;
                            text-decoration: none !important;
                            width: 100% !important;
                            

                        }
                    }
                    
                }
            }
            
            /* ACCUEIL */
            #accueil{
                height: 88vh !important;
                img{
                    filter: blur(0px) brightness(0.4) !important;
                }
                .acceuil-contenu{
                    h4{
                        font-size: 30px !important;
                        margin-bottom: 25px !important;
                    }

                    h1{
                        font-size: 60px !important;
                        margin-bottom: 20px;
                    }

                    p{
                        font-size: 20px !important;
                        margin-bottom: 30px;
                    }

                    .social {
                        bottom: 15% !important;
                        left: 50% !important;
                        transform: translateX(-50%);
                    }
                }
            } 

            /* À PROPOS */
            #apropos {
                padding: 40px 0 !important;
                .apropos-contenu {
                    width: 90% !important;
                    height: max-content !important;
                    margin-bottom: 20px;
                    .titre{
                        
                        h2 {
                            font-size: 30px !important;
                        }
                    }
                    .apropos-details {
                        h3{
                            display: none;
                        }
                    }
                }
            }
            
            /* COMPÉTENCES */
            #competences {
                .competences-contenu {
                    padding-bottom: 60px !important;
                    .titre {
                        h2 {
                            font-size: 30px !important;
                        }
                    }
                    .competences-details {
                        /* INFORMATIQUE */
                        .informatique {
                            margin-top: 20px;

                            .card {
                                margin-top: 20px;
                                display: flex;
                                flex-wrap: wrap;
                                gap: 20px;
                                /* CARD HTML */
                                .cards-style{
                                    width: 100% !important;
                                }

                            }
                        }
                    }
                }
            }

            /* PROJETS */
            .projets {
                .projets-contenu {
                    .titre {
                        h2 {
                            font-size: 30px !important;
                        }
                        p {
                            font-size: 16px !important;
                        }
                    }
                    .projets-cards {
                        width: 100% !important;
                        .card-projet {
                            padding: 10px !important;
                            width: 100% !important;
                            height: max-content !important;
                            &:hover {
                                background: var(--tertiary-color);
                                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                            }
                            .img{
                                img{
                                    width: 100px !important;
                                    height: 100px !important;
                                }
                            }
                            .projets-description{
                                width: calc(100% - 120px) !important;
                   
                                .titre{
                           
                                    h3{
                                        font-size: 16px !important;
                                    }
                                    .sous-titre{
                                        font-size: 12px !important;
                                    }
                                }
                                p{
                                    font-size: 12px !important;
                                }
                                .btn{
                                    a{
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 0 !important;
                                        height: 35px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /* LIENS */
            .liens{
                display: flex;
                position: fixed;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                background: var(--background-color);
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 100000;
                .bx-x{
                    font-size: 30px;
                    color: var(--text-color);
                    cursor: pointer;
                    transition: color 0.3s;
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    &:hover{
                        color: var(--secondary-color);
                    }
                }
                div{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    i{
                        font-size: 24px;
                        color: var(--primary-color);
                    }
                    a{
                        color: var(--text-color);
                        transition: color 0.3s;
                        font-size: 20px;
                        border-bottom: 1px solid var(--primary-color);
                        &:hover{
                            color: var(--secondary-color);
                        }
                    }
                }
            }
            /* CONTACTS */
            .contacts{
                div{
                    width: 90% !important;

                    i{
                        font-size: 18px !important;
                    }
                    a{
                        font-size: 18px !important;
                    }
                    p{
                        font-size: 18px !important;
                    }
                }
            }
        }
    }
}