/* ------- Trucs à changer pour la mise à jour ------- */


#hero {
    background-image: url(../imgs/Proj_5/hero_Hero%20copy.webp);
    
}


#process{
        background-image: url(../imgs/Proj_5/process_Sketches%20.webp);
}

#process-droite{
    background-color: #0a192f;
    padding-left: 70px;
    padding-bottom: 10px;
}

#solution { /* à changer selon la longueur du texte */
    height: 525px;
}

#sol { /* à changer selon la longueur du texte */
    height: 40vh;
}

/* Les parallax du logo, c'est du cas par cas - va directement à la section

La meme pour les variations*/  





#normes-graphiques img{
    width: 100%;
}

#conclusion{
    background-image: url(../imgs/Proj_5/portfplio_web_logo_final.png);
    filter: opacity(50%);
    
}





/* ---------------- PLUS LES BG IMAGES DANS LE CSS MODILE ------------------- */














/* ------- Contruction de la mise en page ------- */

body {
    max-width: 1920px;
    display: flex;
    overflow-x: hidden;
    
}

p{
    line-height: 25px;
}




#hero {    
    background-size: cover;
    height: 80vh;
    width: 100%;
    font-size: 100px;
    background-position: center;
    background-attachment: fixed;
}


/* --------- Intro projet ---------*/


#info {
    height: 61vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: -5vh;
}



#prez    {
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 90%;
    }

#prez h2{
    color: #f2e3a3;
}

#contenu {
    display: flex;
    flex-direction: row;
    height: 39%;
    justify-content: space-between;

}


#contenu h3{
    margin-bottom: 25px
}

.defis {
    width: 38%;
    margin-right: 4%;
    /*background-color: brown;*/
}

#d {
    width: 60%;
    display: flex;
}
.client{
    display: flex;
    flex-direction: column;
    width: 50%
}

#nom{
    width: 40%;
}

.listes{
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
}



#image-intro{
    width: 100%;
    
}




/* --------- À propos de l'entreprise client --------- */



#about{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#client {
    height: 60%; /* TU PEUX CHANGER LA HAUTEUR DE LA SECTIION SI TU LE SOUHAITES */
    /*background-color: #0a192f;*/
    display: flex;
    margin-left: 100px;
    align-items: center;
    
}

#client div {
    height: 50%;     /* TU PEUX CHANGER LA HAUTEUR DE LA SECTIION SI TU LE SOUHAITES */
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


    





/* --------- Process --------- */

#process {
    height: 65vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
        
}

#process-droite {
    width: 50%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#process-droite p {
    margin-right: 100px;

}

#ig {
    display: flex;
    justify-content: center;
    margin-top: -100px;
    width: 100%;
}

#infographie {

    background-size: cover;
    height: 30vh; /*may que j'aurais basoin de le remettre en pixels*/
    width: 100%;

}



/* --------- Solution --------- */





/*--------- Moodboard --------- */




/* --------- Palette et typographie --------- */





/*--------- Logo ---------*/

#logo {
    height: auto;
}



#parallax-1 {
    height: auto;
    width: 100%;
    background-image: url(../imgs/Proj_5/SAUVAGE.webp);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}


#bal-3{
    margin-top: 37vh;
    width: 100%;
    margin-bottom: -4px;
}





#para-un {
    color: #dea2a2;
    font-weight: 600;
    margin-right: 1250px;
}

#para-deux {
    color: #f4efdc;
    font-weight: 600;
    margin-right: 200px;
}

#para-trois {
    color: #19293b;
    font-weight: 600;
    margin-right: 1200px;
}

#variantes-logo {
    /*changer la DIV pour une IMGdanshtml*/
    background-color: #f2f2f2;
    height: 38vh;
    width: 100%;
    font-size: 100px;
    display: flex;
    justify-content: space-evenly;
    /*margin-top: -180px;*/
}

.variante {

    width: 23%;
    background-color: red;
}



/* --------- Visuels sans mockup --------- */

#visuels {

    background-size: cover;
    margin-bottom: 105px;
    margin-top: -20px;
}



/* --------- Mockups --------- */

#mu-full {
    
    background-size: cover;
    margin-bottom: 105px;
}

.mu-petit { /* Quand ça va être une image vectoriel, yaura peut etre pas besoin de rien faire / J'ai aggrndit la taiille du artboard alors aura pu besoin de mettre des margin (display flex et content center) */
    size: 9%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 10vh;
    padding-bottom: 10vh;
    background-color: #02072b;
    margin-top: -2px;
}






/* --------- Charte des normes graphiqes --------- */




/* --------- Conclusion ---------*/

#conclusion {

    height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    
}



.menu {
    /*background-color: aqua;*/
    height: 170px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 55px 0 55px;
}

.navigation {
    font-size: 20px;
    line-height: 50px;
    color: aliceblue;
    opacity: 60%;
    /*background-color: aqua;*/
    padding: 0 20px 0 20px
}