/*
Theme Name: Portfolio Dev Fullstack
Author: David Mbougueng
Description: Thème custom pour portfolio développeur fullstack
Version: 1.0
*/


    /* Réglages Globaux */


    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #FFFBFF;
    }

    h1,
    h2 {
        font-family: "Righteous";
    }



    h3 {
        font-family: "Revalia";
    }

    p,
    caption,
    li,
    blockquote {
        font-family: "Roboto";
        font-weight: 500;
        font-size: 2.5vh;
    }

    /* Addition Chatgpt pour Scroll fluide et Navbar*/

    html {
        scroll-behavior: smooth;
    }


    /* Navigation style */
/*
    #nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: fixed;

        background-color: #33023A;
        width: 50px;
        padding: 2%;
        margin: 0.2%;
        border-radius: 10px;
        box-shadow: 3px 3px 4px #352B36;
    }

    #nav img {
        width: 30px;
        height: 30px;
        margin: 0%;
        padding: 10%;
    }


    #nav button {
        width: fit-content;
        height: fit-content;
        border: none;
        color: aliceblue;
        margin: 20px 0 20px 0;
        background-color: #33023A;
    }

    #nav a {
        width: fit-content;
        height: fit-content;
        border: none;

        margin: 20px 0 20px 0;

    }


    #nav a :hover {

        width: 50px;
        height: 50px;
        border: 2px solid #FFF9EF;
        border-radius: 30%;
        background-color: #cf4ce046;
        box-shadow: 3px 3px 4px #352B36;

        transform: translateX(3%);
        cursor: pointer;
    }

*/


/* Navigation */

#nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    position: fixed;

    background-color: #33023A;

    width: 50px;
    height: fit-content;

    padding: 10px;
    margin: 0.2%;

    border-radius: 10px;

    box-shadow: 3px 3px 4px #352B36;
}


/* Menu */

#nav menu {
    width: 100%;
}


/* Chaque élément du menu */

#nav li {
    position: relative;

    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;

    list-style: none;

    margin: 10px 0;
}


/* Images */

#nav img {
    width: 30px;
    height: 30px;

    display: block;
}


/* Liens */

#nav a {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    border-radius: 30%;
}


/* Effet au survol de l'icône */

#nav a:hover {
    border: 2px solid #FFF9EF;

    background-color: #cf4ce046;

    box-shadow: 1px 1px 2px #352B36;

    cursor: pointer;
}

#showmenu {
    cursor: pointer;
}


/* Texte */

#nav span {
    position: absolute;

    left: 60px;

    white-space: nowrap;

    color: white;

    font-family: "Roboto";
    font-weight: 500;
    font-size: 16px;

    background-color: #33023A;

    padding: 8px 12px;

    border-radius: 5px;

    box-shadow: 3px 3px 4px #352B36;

    /* Invisible par défaut */
    opacity: 0;

    /* Petit déplacement vers la gauche */
    transform: translateX(-10px);

    /* Animation */
    transition: opacity 0.2s ease, transform 0.2s ease;

    pointer-events: none;
}


/* Apparition du texte au survol */

#nav li:hover span {
    opacity: 1;

    transform: translateX(0);
}





 footer {
        background-color: #33023A;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 0.5fr;
        color: #EFECE9;
        font-size: larger;
        text-align:justify;
        padding-bottom: 20px;
    }


    footer img {
        width: 25px;
        height: 25px;
    }

    .menu-footer1,
    .menu-footer2,
    .menu-footer3 {
        border-right: 2px solid;
        padding: 20px;
        margin-left: 3%;
    }

    .menu-footer4 {
        padding: 20px;
    }


    footer li {
        padding-right: 10px;
        list-style: none;
        cursor: pointer;
    }

    footer li :hover {
        font-size: 101%;

    }

    footer a {
        text-decoration: none;
        color: #FFF9EF;
    }



    /* CONTENEUR GLOBAL */
    #Prezcomplet {
        width: 100%;
    }


     #deconnexion {

display: inline-block;
    padding-inline-start: 15%;
    padding-left: 20%;

}
 

 #deconnexion a {


    color: #CF4CE0;
    text-decoration: underline;
    font-weight: bolder;
    font-size: large;
    cursor: pointer;
    width: fit-content;
}



  #connexionInscrip {

display: inline-block;
    padding-left: 70%;
    margin-top: 2%;
    

}


#connexion, #inscription {
    
    margin-top: 2%;
    color: #CF4CE0;
    text-decoration: underline;
    font-weight: bolder;
    font-size: large;
    cursor: pointer;
    width: fit-content;
}


#homeprez {
    margin: 3%;
    display :grid;
    grid-template-columns: 1fr 3fr 1fr;
}


#homeprez img {
    
  max-width: 1421px;  
  width: 60vw;
  
}

#idprez  {
    display: grid;
    justify-content: right;
    align-items: center;
    align-content: center;
font-family: "Righteous";

 }

#idprez span {
    padding-top: 15%;
    font-size: large;
    text-align: center;
}


 #idprez p {
writing-mode:sideways-lr;
text-orientation:upright;
font-size:4em;
font-family: "Righteous";
text-transform:uppercase;
padding: 3%;
 }

#portfoliotitre {
    writing-mode:sideways-lr;
text-orientation:upright;
font-size:4em;
text-transform:uppercase;
padding: 3% 3% 9% 3%;
text-align:justify;
color: #33023A;

}

#quoteprez {
    text-align: center;
    padding: 2%;
}

   #Home {
  
        margin: 0%;
        padding: 0%;
        color: #33023A;
    }


    /* État visible */


    /* Boutons style */


    .allseesend {
display: flex;
flex-direction: row;

    }

     .allseesend a {
margin-left: 2%;

    }


    .seesend {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 150px;
        background-color: #FFF9EF;
        color: #2D2C2A;
        font-weight: bolder;
        border: 2px solid #352B36;
        border-radius: 10px;
        padding: 7px 2px 5px 7px;
        margin-top: 3%;
        text-decoration: none;
        cursor: pointer;
    }

    .seesend div {
        background-color: #352B36;
        color: #FFF9EF;
        width: fit-content;
        height: fit-content;
        font-weight: bolder;
        border-radius: 7px;
        padding: 3% 9% 3% 9%;
        margin-left: 10px;
    }




    /* Partie à propos*/

    #Groupapropos {
         display: flex;
        flex-direction: column;
       align-items:center;
       justify-content: center;
        text-align: center;
        margin-top: 2%;
      width: 100%;
     
    }

    #Groupapropos h3, #Groupapropos p {
        
        padding-top: 2%;
        color: #33023A;
        width: 35%;
      
    }




    #Boutonpropos {
        width: 170px;
    }

    /* Partie Skills*/

    .skills img {
        width: 40px;
        height: 40px;
        padding-right: 5%;
    }


    .skills {
        background-color: #352B36;
        display: flex;
        border-radius: 10px;

        flex-direction: row;
        margin: 0.5%;
        padding: 0.5% 0.5% 0.5% 0.5%;
        width: fit-content;
        height: fit-content;
        transform: rotate(-1.8deg);
        overflow-x: hidden;
    }

    #skillpart2 {
        margin-left: 20%;

    }

    .skill {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #FFFBFF;
        margin: 2%;
        padding: 2%;
        width: 150px;
        height: fit-content;
        border-radius: 4%;
        box-shadow: 5px 2px 1px #CF4CE0;
        font-weight: 800;
        color: #33023A;

    }


    #skilllist {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10%;

    }

    

    #titrecompétences {
        font-size: 7vh;
        margin: 5% 40% 2% 0%;
        color: #33023A
    }

    @keyframes slide-in {
        from {
            transform: translateX(-350%);
        }

        to {
            transform: translateX(200%);
        }
    }

    @keyframes slide-out {
        from {
            transform: translateX(200%);
        }

        to {
            transform: translateX(-350%);
        }
    }

    #skillpart1 div {
        animation: 7s linear 0s infinite alternate slide-in;

    }

    #skillpart2 div {
        animation: 7s linear 0s infinite alternate slide-out;

    }

    /* Partie projets*/

  #Projetdev {
     display: grid;
     grid-template-rows: 1fr; 
     width: 100%;
        justify-items:center ;

    }

    #Projetunsuite,
    #Projetdeux,
    #Projettrois {

        border-radius: 3vh;
        margin: 2% 0 2% 0 ;
        padding: 5%;
        width: 90%;

    }
   
    #Projetunsuite {
        background-color: #352B36;
        color: #FFFBFF;
   
    }

    #Projettrois {
        background-color: #33023A;
        color: #FFFBFF;
    
    }


    #Projetdeux {
       background-color: #CF4CE0;
        color: #FFFBFF;

    }




 #Allpart1,
    #Allpart2,
    #Allpart3,
    #Allpart4 {
      
        display: grid;
        grid-template-columns: 1fr 1fr;
         justify-items:center ;

    }


.stackUsed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100px;

}

.stackUsed img {
 width: 40px;
        height: 40px;
        padding-right: 5%;

}


    /* Textes projets */

.alltextepart {
   
    
    margin-right: 5%;
    padding: 3%;
    width: 100%;
   
}
    

    .texteproject {
        text-align: justify;
    }

    #Projetdev h2 {
        font-size: 7vh;
        color: #FFFBFF;
    }

   




.Introprojet {
    
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 3%;
   
    
}


    .Projet {
        background-color: #CF4CE0;
        color: #FFFBFF;
        border-radius: 10px;
        width: fit-content;
        padding: 1%;
        margin: 2%;

    }

    #Projetx{
 background-color: #2D2C2A;
        color: #FFFBFF;
        border-radius: 10px;
        width: fit-content;
        padding: 1%;
        margin: 2%;

    }

.imageProjetDev {
max-width: fit-content;
max-height: fit-content; 
width: 100%;
height: 100%;

border-radius: 2%;
margin: 2%;
transform: rotate(-2.5);
border: #FFFBFF 2px solid;
}



    .Projectnumber,
    .Projectnumber2,
    .Projectnumber3 {
       
        font-size: 7vh;

    }

    .Projectnumber,
    .Projectnumber3 {
       
        color: #CF4CE0;

    }


    .Projectnumber2 {
       
        color: #352B36;

    }
    

    .Projettitre {
        margin: 2%;
        padding-left: 10%;
        font-size: 7vh;
        color: #33023A;
    }

.techniques {
    width: 100%;
}


/*   Reactions projet web */

    .reactions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;

        width: 100%;
        height: fit-content;
        margin-bottom : 5%;
       
       
    }





    .reactions button {
        background-color: #FFFBFF;
        border: none;
       margin: 0% 3% 3% 3%;
       font-size: 65px;
         width: 70px;
         height: 70px;
         cursor: pointer;
    }


    .reactions button:hover  {
        transform: scale(110%);
    }

.alertReact {
    display: none;
    background-color: #FFF9EF;
    color: #33023A;
    border: 2px solid #352B36;
    border-radius: 5px;

    width: max-content;
    padding: 10px;
    
}

.alert {
    margin-bottom: 7%;
}

.alert:hover .alertReact {
    display: block;
}
    
 

    /* Projet UX */

#Partieprojetsux {
width: 100%;
margin-bottom: 3%;
     }

    #Projetux {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #Uxpart1, #Uxpart2 {
        background-color: #352B36;
        color: #FFFBFF;
        width: 80%;
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        text-align: center;
       margin-bottom: 3%;
     
    }



    #Uxpart1 {

  display: grid;
 grid-template-columns: 1fr 1fr;
      padding: 2%;
    }



     #Uxpart2 {
  display: flex;
  flex-direction: column;

  padding: 2%;
 margin: 2%;
 
    }


 #Breakfirsttexte,
    #Unclejtexte {
        width: 100%;
        padding: 2%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;


    }


 #Parcoursclienttexte {
        width: 100%;
         display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;


    }



#Uxpart1 p  {

    width: 300px;
    text-align: center;
}


#Uxpart2 p  {

    width: 500px;
}
    .texte {
        padding-bottom: 3%;
        
    }





 #Uxpart1 video {
       max-width: 70%;

       width: 40vw;
        height: 100vh;
        border-radius: 15px;
        object-fit: contain;
        background-color: #352B36;
    }


    
    #Uxpart2 video {
       
        width: 70vw;
        max-width: 800px;
        height: 60vh;
        border-radius: 15px;
        object-fit: contain;
        
    }

   #Allbreakfirst,
    #Allunclej,#Axsolclient  {
       width: 100%;
        
        
    }



    /* Partie Contact */

#Partiecontact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items:center ;
    margin-bottom: 10%;
    
}

    #Form {
        display:grid;
        grid-template-rows: auto;
        background-color: #CF4CE0;
        max-width: 773px;
        max-height: 894px;
        width: 550px;
        border-radius: 10px;
        padding: 3%;
    }

    #Form h3 {
        padding: 3%;
    }

    #Form input {
        width: 250px;
        height: 30px;
        margin: 2%;
        border: 2px solid #2D2C2A;
        border-radius: 5px;


    }

    #Form textarea {
        width: 450px;
        height: 150px;
        border: 2px solid #2D2C2A;
        margin: 2%;
        border-radius: 5px;

    }


    #Form label {
        padding: 2%;
        font-size: medium;
        font-family: roboto;
        font-weight: bold;

    }


#formpart {
    display: flex;
    flex-direction: column;
    width: fit-content;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 3%;
}

#formpartB {
    display: flex;
    flex-direction:row ;
   padding: 3%;
 
}
    

#formpartB a {
    margin-left: 3%;
}

#Partiecontact span {
    font-size: 2.5em;
    text-align: center;
    font-family: Revalia;
    padding: 3% 3% 0% 3%;
}


#buttonEn {
    margin-left: 2%;
}


   
   


 @media (max-width: 1300px) {

/*
    #homeprez {
    display :flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0%;
    padding-top: 7%;
   
}

#idprez span {

    text-align: justify;
    
    width: fit-content ;
padding: 0%;
}


 #idprez p {
writing-mode:horizontal-tb;
text-orientation:upright;

text-align: justify;
width: fit-content ;

 }



#portfoliotitre {
    writing-mode:horizontal-tb;
text-orientation:upright;

text-align: justify;
width: fit-content ;
    

}


 .imageProjetDev {

width: 55vw;
height: 55vh;
}




   /* Partie Contact */

   /*

#Partiecontact {
    display: grid;
    grid-template-columns: 1fr;
  margin-top: 7%;
    
}




#Form {
    width: fit-content;
}

#formpart  {
    width: 70%;
}



*/
    
 }





    @media (max-width: 900px) {


body {
    
     margin: 0%;
}

main {
   
    margin: 0%;
    
}


/*  Nav Bar */


#nav {
       
        width: 35px;
        padding: 2%;
        margin: 0.2%;
        border-radius: 10px;
        box-shadow: 1px 1px 2px #352B36;
         
    }

    #nav img {
        width: 22px;
        height: 22px;
        
    }


    #nav li {
        
        margin: 10px 0 10px 0;
    }

    #nav a {
       
        margin: 10px 0 10px 0;

    }

#nav span { 

    left: 30px;

    font-size: 12px;

}



/* Reactions*/

 .reactions button {
       font-size: 30px;
         width: 40px;
         height: 40px;
    }

        /* footer style */

        footer {

             grid-template-columns: 1fr;
             padding: 0%;
             width: 100%;
        }



    .menu-footer1,
    .menu-footer2,
    .menu-footer3 {
        border-right: 0px solid;
        padding: 20px;
        margin-left: 3%;
    }

    .menu-footer4 {
        padding: 20px;
        margin-left: 3%;
    }



        /*font size All */
        h2 {
            font-size: 1.2rem;
        }

        h3 {
            font-size: 1.2rem;
        }

        p {
            font-size: 0.7rem;
        }




#quoteprez {

    width: 100%;
    text-align: center;
    font-size: small;
    padding: 3%;
  
}



    /* Partie à propos*/

    #Groupapropos {
         
        margin: 5% 0% 5% 0%;
     
    }

     #Groupapropos p {
        
        width: 65%;
        
    }




/*  Prez portfolio*/


#homeprez {
    display :flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0%;
    padding-top: 7%;
   
}


#homeprez img {
    
  
  width: 80vw;
  
}



#connexion, #inscription {
    
    font-size: small;
    margin-bottom: 3%;
}

#deconnexion {
    
    font-size: small;
    margin-bottom: 3%;
}


#idprez span {

    text-align: justify;
    font-size:1.2em;
    width: fit-content ;
padding: 0%;
}


 #idprez p {
writing-mode:horizontal-tb;
text-orientation:upright;
font-size:1.2em;
text-align: justify;
width: fit-content ;

 }



#portfoliotitre {
    writing-mode:horizontal-tb;
text-orientation:upright;
font-size:1.2em;
text-align: justify;
width: fit-content ;
    

}




    #titrecompétences {
        font-size: 1.7rem;
    }

     
        /* Boutons style */

        .seesend {
            width: 150px;
            font-weight: bold;
            font-size:small;

        }



        /* Partie Skills*/

        .skills img {
            width: 15px;
            height: auto;
            padding-right: 3%;
        }

        .skill {
            width: 70px;
        }

        .skills {
            max-width: fit-content;
            width: 250px;
            font-size: 60%;
            margin: 3%;

        }

        #skillpart1 div {
            
            animation: none;
        }

        #skillpart2 div {
            animation: none;

        }

/**/

 #skilllist h2 {
    margin: 3%;
    
 }


/* Projet dev*/



    .Projet {
        
        padding: 1%;
        margin: 0%;

    }


.imageProjetDev {

width: 70vw;
height: auto;
}



    .Projectnumber,
    .Projectnumber2,
    .Projectnumber3 {
       
        font-size: 5vh;

    }

  
/*

    .Projettitre {
     
        font-size: 4.5vh;
        text-align: center;
        
    }
*/



 #Allpart1,
    #Allpart2,
    #Allpart3,
    #Allpart4 {
      
        display: grid;
        grid-template-columns: 1fr ;

    }


        /* Textes projets */


        .Projettitre {
            font-size: 1.7rem;
            padding: 5%;
            text-align: center;
        }

        #Projetdev h2, h3 {
            font-size: 1.2rem;
            padding: 5%;

        }

  
    .texteproject {
       
        padding: 3% 5% 3% 5%;

    }      

        /* Projet UX */


        #Uxpart1 {

         grid-template-columns: 1fr;
        }


        #Uxpart1 p,#Uxpart2 p  {

    width: 200px;
    
}

      
#Allbreakfirst, #Allunclej {

    padding : 7% 0 7% 0;
}




     #Uxpart1 video, #Uxpart2 video {
        height: 300px;
        border-radius: 8px;
    }



        /* Partie Contact */

#Partiecontact {
    display: grid;
    grid-template-columns: 1fr;
  margin-top: 7%;
    
}

 #Form textarea {
        width: 300px;
       
 }



 #Partiecontact span {
       font-size: 1em;
 }

#Form {
    width: fit-content;
}

#formpart  {
    width: 70%;
}




    
 }