body{
    background-color:#A477DE;
    font-family: 'Inter', sans-serif;
    margin:0;
    /*box sizing*/
}
main{
    display:flex;
    justify-content:center;
    width:100%;
}
p{
    margin:0;
}
.allcontainer{
    width:68%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    /* background:red; */
    margin-top:1%;
    margin-bottom:1%;
}
.title{
    display:flex;
    /* background:purple; */
    font-size:3rem;
    padding:1.5%;
    font-weight:600;
    margin-bottom:0.8%;
}
.media-container{
    display:flex;
    /* background:rgb(227, 221, 70); */
    justify-content:center;
}
.media{
    width:100%;
}
@media screen and (max-width:780px){
    .media iframe{
        height:32vh;
    }
}
@media screen and (max-width:650px){
    .media iframe{
        height:28vh;
    }
}
@media screen and (max-width:550px){
    .media iframe{
        height:24vh;
    }
}
@media screen and (max-width:450px){
    .media iframe{
        height:20vh;
    }
}
@media screen and (max-width:375px){
    .media iframe{
        height:19vh;
    }
}
.description{
    display:flex;
    flex-direction:column;
    /* background:rgb(94, 204, 92); */
    padding-top:2%;
    padding-bottom:2%;
    height:auto;
    font-weight:none;
}
.descriptiontitle{
    font-size:1.5rem;
    font-weight:600;
    padding-bottom:2%;
}
.othertitle{
    font-size:1.5rem;
    font-weight:600;
    padding-bottom:5%;
}
.tracecontainer{
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill,100%);/*auto fill créer autant de bails possible pour 300px*/
}
.traces{
    max-width:1920px;
    min-width:300px;

    display:grid;
    height:auto;
    justify-content:center;
    gap:3%;
    margin-top:2%;
    margin-bottom:2%;
    grid-template-columns:repeat(auto-fill,22.7%);
}
.trace{
    height:auto;
    width:100%;;
    cursor:pointer;
    transition:0.5s;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}
.trace:hover{
    transform:rotate(-1.5deg);
    transition:0.4s;
}
.trace:active{
    transform:scale(0.7);
}
.trace:hover img{
    transform:scale(1.05);
}
.trace img{
    height:100%;
    width:100%;
    object-fit:cover;
    transition:0.5s linear;
}
.tracepopup{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0, 0, 0, 0.874);
    height:100%;
    width:100%;
    display:none;
}
span{
    position:absolute;
    top:0.5%;
    right:1.5%;
    font-size:3rem;
    font-weight:100;
    color:#fff;
    cursor:pointer;
}
span:hover{
    color:#6e6e6e;
    cursor:pointer;
}
span:active{
    color:#fff;
}
.tracepopup img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    object-fit:cover;
}
@media screen and (max-width:780px){
    .traces{
        flex-direction:column;
        margin-top:4%;
        margin-bottom:4%;
        grid-template-columns:repeat(auto-fill,48%);
    }
    .tracepopup img{
        width:85%;
    }
}
.partenaire{
    width:100%;
    text-align:left;
    margin-top:1%;
    margin-bottom:4%;

}
.partenaire p a{
    text-decoration:underline;
    color:#000;
}
.partenaire p a:hover{
    text-decoration:none;
    color:rgb(58, 58, 58);
}
@media screen and (max-width:780px){
    .partenaire{
        margin-top:9%;
        font-size:0.9rem;
    }
}
.skillsetlogiciels{
    display:flex;
    justify-content:space-between;
    
}
.skills{
    width:58%;
    display:flex;
    flex-direction:column;
    background:#C19DEE;
    padding:3%;
    border-radius:8px;
    height:auto;
}
.containerskills{
    display:grid;
    justify-content:space-around;
    grid-gap:20px;/*gouttière*/
    grid-template-columns:repeat(auto-fill,270px);/*auto fill créer autant de bails possible pour 300px*/
    margin:0;
    width:100%;
}
.containerskills p{
    margin-bottom:4%;
}
:root {
    --skill1:#edc661;
    --skill2:#83cc6a;
    --skill3:#4a79c4;
    --skill4:#ec7d7d;
    --skill5:#d98ddb;
    --skill6:#64d2d7;
}
.progressbars{
    background-color:#0000003b;
    
    color: white;
    border-radius:5px;
    width:100%;
    height:6vh;
}
.progressbar{
    color:#000;
    height:100%;
    display:flex;
    align-items:center;
    padding-left:2%;
    border-radius:5px;
}
.progressbar[title="titleskill1"]{
    background-color: var(--skill1);
}
.progressbar[title="titleskill2"]{
    background-color: var(--skill2);
}
.progressbar[title="titleskill3"]{
    background-color: var(--skill3);
}
.progressbar[title="titleskill4"]{
    background-color: var(--skill4);
}
.skill1{
    width:25%;
}
.skill2{
    width:20%;
}
.skill3{
    width:30%;
}
.skill4{
    width:25%;
}
.logiciels{
    width:28%;
    display:flex;
    flex-direction:column;
    background:#C19DEE;
    padding:3%;
    border-radius:8px;
    height:auto;
}
.logiciels p{
    margin:0;
}
.logiciel{
    display:flex;
    align-items:center;
    font-size:1.1rem;
    /* background:red; */
    margin-top:3%;
    margin-bottom:3%;
}
.logiciel p{
    margin-left:3%;
}
.parentretour{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    /* background:rgb(223, 90, 90); */
    margin-top:3%;
    margin-bottom:1%;
    /* background:red; */
}
.parentretour a{
    text-align:center;
    width:35%;
    background:#000000;
    border:solid rgb(0, 0, 0)3.5px;
    text-decoration:none;
    color:rgb(255, 255, 255);
}
.parentretour a:hover{
    background:rgb(255, 255, 255);
    color:#000000;
}

/* skills */
@media screen and (max-width:1420px){
    .containerskills{
        grid-template-columns:repeat(auto-fill,100%);
    }
    .progressbars{
        height:5vh;
    }  
}
@media screen and (max-width:1373px){
    .containerskills{
        grid-template-columns:repeat(auto-fill,100%);
    }
      
}
@media screen and (max-width:1069px){
    .containerskills{
        grid-template-columns:repeat(auto-fill,100%);
    }
    .progressbars{
        height:4vh;
    }    
}
@media screen and (max-width:913px){
    .containerskills{
        grid-template-columns:repeat(auto-fill,100%);
    }
    .progressbars{
        height:3vh;
    }    
}
@media screen and (max-width:780px){
    .skillsetlogiciels{
        flex-direction:column;
        justify-content:center;
        margin-top:4%; 
    }
    .skills{
        width:auto;
        margin-bottom:5%;
        justify-content:center;
    }
    .containerskills{
        justify-content:flex-start;
    }
    .logiciels{
        width:auto;
    }
    .littletitle{
        font-size:1.3rem;
        font-weight:600;
        padding-bottom:5%;
    }
}

/* retour */
@media screen and (max-width:780px){}
    .parentretour a{
        padding:1%;
    }
@media screen and (max-width:730px){
    .parentretour a{
        width:50%;
        margin-bottom:4%;
        padding:4%;
        font-size:0.9rem;
        border:solid rgb(0, 0, 0)3.2px;
    }
}
@media screen and (max-width:520px){
    .parentretour a{
        width:70%;
        margin-bottom:6%;
        border:solid rgb(0, 0, 0)3px;
    }
}

@media screen and (max-width:780px){
    .title{
        font-size:2.5rem;
        margin-top:5%;
        margin-bottom:5%;
    }
    .descriptiontitle{
        font-size:1.3rem;
    }
    .othertitle{
        font-size:1.3rem;
    }
    .containerskills p{
        font-size:0.9rem;
    }
    .logiciel{
        margin-top:1%;
        margin-bottom:1%;
        
    }
    /* .logiciel p{
        font-size:0.9rem;
    } */
    .logiciel img{
        width:35px;
        height:35px;
    }
    .logiciels{
        width:auto;
        padding:5%;
    }
    .progressbars{
        height:4vh;
    }   
    .progressbar{
        font-size:0.9rem;
        
    }
    .skills{
        width:auto;
        padding:6%;
    }
}
@media screen and (max-width:500px){
    .allcontainer{
        width:80%;
    }
    .title{
        font-size:2.4rem;
        margin-top:6%;
        margin-bottom:6%;
    }
    .descriptiontitle{
        font-size:1rem;
    }
    .description{
        font-size:0.9rem;
    }
    .othertitle{
        font-size:1rem;
    }
    .containerskills p{
        font-size:0.85rem;
    }
    .locigiels{
        width:auto;
        padding:4%;
    }
    .logiciel p{
        font-size:0.85rem;
    }
    .logiciel img{
        width:30px;
        height:30px;
    }
    .progressbar{
        font-size:0.8rem;
    }
}
@media screen and (max-width:500px){
    .containerskills{
        grid-template-columns:repeat(auto-fill,100%);
    }
}