#li-div {
    padding: 0 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#li-div > ul {
    list-style-type: none;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position:relative;
    padding: 0;
    margin:0;
}

#li-div > ul > li {
    margin: 20px;
    background-size: cover;
    height: 350px;
    width: 350px;
    z-index: 50;
    transition : all 0.5s ease;
    position: relative;
}

#li-div >ul > li > div {
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-family: 'K2D', sans-serif;
}

#li-div > ul > li > div > p {
    margin: 10px 0;
}

.compte-personne{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/compte_personne.png') left no-repeat;
    background-size: cover;
}

.compte-personne:hover{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.28) 100%),
    url('../img/compte_personne.png') left no-repeat;
    background-size: cover;
}

.Labyrinthe {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/labyrinthe.png') left no-repeat;
    background-size: cover;
}

.Labyrinthe:hover {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.24) 100%),
    url('../img/labyrinthe.png') left no-repeat;
    background-size: cover;
}

.graphs-serveurs{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/graph_serv.png') bottom no-repeat;
}

.bataille{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/bataille.png') left no-repeat;
    background-size: cover;
}

.bataille:hover{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.22) 100%),
    url('../img/bataille.png') left no-repeat;
    background-size: cover;
}

.calcul{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/calcul.png') top no-repeat;
    background-size: cover;
}

.calcul:hover{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.21) 100%),
    url('../img/calcul.png') top no-repeat;
    background-size: cover;
}

.Puissance4{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/Puissance4.png') left no-repeat;
    background-size: cover;
}

.Puissance4:hover{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.18) 100%),
    url('../img/Puissance4.png') bottom left no-repeat;
    background-size: cover;
}

.Sudoku{
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/Sudoku.png') left no-repeat;
    background-size: cover;
}

.Monitoring {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/Monitoring.png') left no-repeat;
    background-size: cover;
}

.Monitoring:hover {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.23) 100%),
    url('../img/Monitoring.png') left no-repeat;
    background-size: cover;
}

.CompilateurPascal {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/CompilateurPascal.png') left no-repeat;
    background-size: cover;
}

.CompilateurPascal:hover {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.23) 100%),
    url('../img/CompilateurPascal.png') left no-repeat;
    background-size: cover;
}

.Avisio {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/Avisio.png') left no-repeat;
    background-size: cover;
}

.Avisio:hover {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.19) 100%),
    url('../img/Avisio.png') left no-repeat;
    background-size: cover;
}

.SearchData {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.46) 100%),
    url('../img/SearchData.png') left no-repeat;
    background-size: cover;
}

.SearchData:hover {
    background: linear-gradient(to bottom,
    rgba(56, 56, 56, 0.46) 0%,
    rgba(38, 38, 38, 0.25) 100%),
    url('../img/SearchData.png') left no-repeat;
    background-size: cover;
}

#li-div >ul > li.default:hover {
    transform: scale(1.1);
}

.year {
    border: 3px solid #fff;
    border-radius: 20px;
}

#liste li.contenuInnactive {
    opacity:0;
    pointer-events: none;
}

#liste li.contenuActive{
    position: absolute;
    width:60%;
    height:auto;
    padding:0;
    display: block;
}

#liste li.contenuActive > div{
    background: rgba(42, 47, 80, 0.67);
    opacity: 1;
    transition: all 1s ease;
}

li.contenuActive .close-icon{
    display: none;
}

.close-icon{
    font-size:30px;
    position:absolute;
    top:20px;
    left:20px;
    display: none;
}

#liste li.contenuActive .close-icon {
    display : block;
}

div.content {
    display: none;
    width: 100%;
}

/* Style projets content */

.content > div.intro {
    display: flex;
    padding: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.lang-list{
    justify-content: left;
    text-align: left;
}

.content h4 {
    justify-content: left;
    text-align: left;
}

.info{
    display: flex;
    font-size: 13px;
    padding-right: 100px;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
}

.info h4{
    font-size: 15px;
}

.desc-intro{
    width:75%;
    text-align: left;
}

.desc-intro h4{
    text-align: left;
    margin-bottom: 15px;
}

.projet-content img {
    width: 30%;
    height: auto;
    max-width: 30%;
    max-height: 30%;
    border-radius: 10px;
}

#liste a{
    color: inherit !important;
    text-decoration: none !important;
}

#liste a:hover{
    color: inherit !important;
    text-decoration: underline !important;
}

.projet-content h4{
    text-align: center;
    padding: 20px 0 0 0;
}

.projet-content p{
    text-align: left;
    padding: 20px;
}

.projet-content{
    margin:20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.lien-comp{
    text-align: left;
    margin: 0 0 20px 40px;
}

.contenuActive h3 {
    margin:20px 30px;
    font-size: 45px;
}

@media (max-width: 1200px) {
    .projet-content{
        flex-wrap: wrap;
    }

    .projet-content p {
        text-align: center;
        padding: 0;
    }

    .contenuActive h3 {
        font-size: 35px;
        font-family: 'K2D', sans-serif;
    }

    .projet-content img {
        width: 80%;
        height: auto;
        max-width: 80%;
        max-height: 80%;
    }

    #liste li.contenuActive{
        width:90%;
    }
}

@media (max-width: 1000px) {
    .content > div.intro {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 20px;
    }

    .lang-list{
        justify-content: center;
        padding-left: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        margin-bottom: 30px ;
    }

    .desc-intro {
        width: 100%;
        text-align: center;
    }

    .desc-intro > h4 {
        text-align: center;
    }

    .projet-content h4 {
        padding: 0 0 8px 0;
    }

    .info{
        font-size: 15px;
        padding:0;
    }

    .info h4{
       font-size:20px;
        text-align: center;
    }
}

@media (max-width: 600px) {
    #li-div > ul  > li {
        width : 68%;
        height : 300px;
    }

    #li-div{
        margin: 0;
        width: 100%;
        padding: 0;
    }

}

.yearSeparator h2 {
    font-size: 45px;
    padding: 10px 0 10px 50px;
    font-family: 'K2D', sans-serif;
    color: aliceblue;
}

.yearSeparator hr {
    width: 300px;
    margin: 0 0 20px 50px;
    border: 2px solid aliceblue;
    justify-content: left;
}