/* structure du css : 
1. partie du site qui ne change pas entre les pages(navbar, footer, couleur de fond)
2. 1ere page du site (boutique) 
3. 2eme page du site (ecrire)
4. 3eme page du site (partager)
5. 4eme page du site (profil)
6. page produit (celle qui s'ouvre lorsque l'utilisateur clique sur un produit)
7. Page de connexion et d'inscription
8. responsive (même structure que ci-dessus avec des parties en moins*/


/* PARTIE QUI NE CHANGE PAS ENTRE LES PAGES */
*{
    font-family: sans-serif;
}
/* Pour faire en sorte que le footer reste en bas */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wrapper {
    flex: 1;
}

/* navbar */
nav {
    background-color: #d9a3a4;
    padding: 10px 0;
}
nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0 20px;
}
.navText {
    text-align: center;
}
.navText a {
    text-decoration: none;
    padding: 15px 20px;
    background-color: #fae2db;
    border-radius: 20px;
    color: #5406ad;
}
.navText a:hover{
    background-color: #eec0c8;
}
#logo, #profileImg {
    height: 60px;
}
/* Couleur de fond du site */
body{
    background-color: #fae2db;
}
/* footer */
footer {
    background-color: #d9a3a4;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-size: large;
    margin-top: 30px;
}
#footerContact{
    margin-left: 30px;
}
#footerReseauImg{
    display: flex;
    gap: 5px;
    margin-right: 30px;
    margin-left: 30px;
}
.reseau {
    height: 40px; 
}


/* rend le bouton "envoyer" invisible sur la page index et partager (car appuyer sur enter c'est très bien) */
.envoyer{
    display: none;
}



/* PAGE BOUTIQUE */
#sectionBarreRechercheProduit{
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 10px;
}
/* modif barre de recherche et boutons */
#boutonAjouterProduit, #barreRechercheProduit{
    padding: 10px;
    border: #d9a3a4 solid 3px;
    border-radius: 30px;
    background-color: white;
    margin-top: 10px;
}
#boutonAjouterProduit:hover{
    background-color: #eec0c8;
}
#boutonAjouterProduit a{
    text-decoration: none;
    color: black;
}
#sectionProduit{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.produit img{
    height: auto;
    width: 300px;
    margin: 30px;
}

#ajouterProduit{
    margin-left: 30px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}
#titreAjouterProduit{
    color: #d9a3a4;
}
.inputAjouterProduit{
    padding: 10px;
    border: #d9a3a4 solid 3px;
    border-radius: 30px;
    background-color: white;
}


/* PAGE ECRIRE */
#titreEditeurDeTexte{
    color: #d9a3a4;
}
.boutonPourEditer{
    padding: 5px;
    background-color: white;
    border: #d9a3a4 3px solid;
    border-radius: 10px;
}
.boutonPourEditer:hover{
   background-color: #eec0c8;
}
#editeurDeTexte{
    margin-left: 30px;
    margin-right: 30px;
}
#messageTexte{
    margin: 20px;
}
#editeur{
    border: #d9a3a4 solid 3px;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}


/*PAGE PARTAGER*/
#pagePartager{
    margin-left: 30px;
    margin-right: 30px;
}
#sectionBarreRechercheAvis{
    margin-top: 10px;
}
/* modif barre de recherche et boutons */
#barreRechercheAvis, #boutonFiltreAvis, #boutonAjouterPublication{
    padding: 10px;
    border: #d9a3a4 solid 3px;
    border-radius: 30px;
    background-color: white;
    margin-top: 10px;
}
#boutonAjouterPublication a{
    text-decoration: none;
    color: black;
}
#boutonAjouterPublication:hover{
    background-color: #eec0c8;
}
/* publication (déjà publiée) */
#publicationParent{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.publication{
    padding: 10px;
    max-width: 350px;
    margin-top: 20px;
    border: solid 3px #d9a3a4;
    box-shadow: 3px 4px #d9a3a4;
    border-radius: 30px;
    background-color: #fccecf;
}
#photoProfilPublication, #photoLivrePublication{
    height: 50px;
}
#profilAffichage{
    display: flex;
}
#livreAffichage{
    display: flex;
}
/* formulaire pour ajouter une publication --> page produit */
#publicationForm{
    display: flex;
    flex-direction: column;
    margin: 30px;
    gap: 10px;
}
.publicationFormEnfant{
    padding: 10px;
    border: #d9a3a4 solid 3px;
    border-radius: 30px;
    background-color: white;
}
#titreAjouterUnePublication{
    color: #d9a3a4;
}


/* PAGE PROFIL */
#profilUtilisateur{
    margin: 30px;
}
#photoProfil{
    height: 70px;
}
#profilImgEtNom{
    display: flex;
    gap: 20px;
}
.bibliothequeProduit{
    height: 150px;
    width: auto;
    margin-right: 15px;
}
.panierProduit{
    height: 150px;
    width: auto;
    margin-right: 15px;
}
.venteProduit{
    height: 150px;
    margin-right: 15px;
}
#boutonPaiement{
    padding: 10px;
    border: #d9a3a4 solid 3px;
    border-radius: 30px;
    background-color: white;
    box-shadow: 3px 4px #d9a3a4;
}

/* Page produit */
#parentProduit{
    display: flex; 
    margin: 3%;
    flex-wrap: wrap;
}
#imgProduit{
    height: 500px;
    margin-left: 5%;
    margin-right: 10%;
}
#boutonPanier{
    padding: 15px;
    border-radius: 30px;
    border: solid 3px #d9a3a4;
    box-shadow: 3px 4px #d9a3a4;
    margin-top: 15px;
}


/* Page connexion/inscription */
#connexion, #inscription{
    display: flex;
    flex-direction: column;
    border: #d9a3a4 solid 5px;
    border-radius: 30px;
    box-shadow: 3px 4px #d9a3a4;
    text-align: center;
    margin: 3%;
    background-color: #fccecf;
}
#connexionMargin, #inscriptionMargin{
    margin-top: 30px;
    margin-bottom: 30px;
}
.inputConnexion, .inputInscription{
    border: #d9a3a4 solid 5px;
    border-radius: 30px;
    padding: 10px;
    box-shadow: 3px 4px #d9a3a4;
}
.boutonConnexion, .boutonInscrire{
    margin-top: 20px;
    padding: 15px;
    border-radius: 30px;
    border: solid 3px #d9a3a4;
    box-shadow: 3px 4px #d9a3a4;
    background-color: white;
}

@media (max-width: 768px){
    /* navbar */
    nav ul {
        justify-content: center; 
        text-align: center;
    }
    .navText a {
        padding: 10px 15px;
    }

    /* PAGE BOUTIQUE */
    .produit{
        width: 35%;
    }
     /* PAGE PRODUIT */
    #parentProduit{
        justify-content: center;
    }


    /* PAGE PARTAGER */
    #publicationParent{
        flex-direction: column;
    }
    .publication{
        max-width: 300px;
    }
}
@media (max-width: 550px){
    *{
        font-size: large;
    }
    /* navbar */
    nav ul{
        flex-direction: column;
    }
    /* footer */
    footer{
        flex-wrap: wrap;
    }

    /* PAGE BOUTIQUE */
    #sectionProduit{
        flex-direction: column;
    }
    .produit{
        width: 60%;
        margin: 10px;
    }
    .produit img{
    height: auto;
    width: 80%;
    margin: 30px;
    }
    #sectionBarreRechercheProduit{
        margin-left: 10px;
        margin-right: 10px;
    }
    #ajouterProduit{
        margin-left: 10px;
        margin-right: 10px;
    }

    /* PAGE ECRIRE */
    #editeurDeTexte{
        margin-left: 10px;
        margin-right: 10px;
    }

    /* PAGE PARTAGER */
    #pagePartager{
        margin-left: 10px;
        margin-right: 10px;
    }
    #publicationForm{
        margin: 10px;
    }

    /* PAGE PROFIL */
    #profilUtilisateur{
        margin-right: 10px;
        margin-left: 10px;
    }
}