/*
Theme Name: WPavance
Theme URI: https://www.agence-alchimy.fr
Author: Mathias CLAVELIN
Author URI: https://www.agence-alchimy.fr
Description: Thème de base
Requires at least: WordPress 5.0
Version: 1.0
*/


header{
    height: 162px;
    margin-bottom: 20px;
    background-color: #84C1B1;

}

header.header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

header.header img {
    width: 80px;
    align-content: center;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 10px;
    box-shadow: -3px 7px 22px -1px rgba(0,0,0,0.36);
    -webkit-box-shadow: -3px 7px 22px -1px rgba(0,0,0,0.36);
    -moz-box-shadow: -3px 7px 22px -1px rgba(0,0,0,0.36);
}

.menu-menu-principal-container{
	width: 100%;
    height :100px;
	background-color: #84C1B1;
}

#menu-menu-principal {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
    list-style : none;
    margin-top: 95px;
    background-color: #84C1B1;
    padding: 10px;
    margin-bottom: 15px;
}

#menu-menu-principal > li > a {
	text-decoration: none;
	list-style : none;
	color: #FFFFFF;
}

#menu-menu-principal > li > a:hover {
	opacity: 0.5;
}

#menu-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style : none;
    width: 100%;
    height: 100px;
    background-color: #84C1B1;
}

#menu-footer > li > a {
    text-decoration: none;
	list-style : none;
	color: #FFFFFF;
    margin: 0 15px;
}

#menu-footer > li > a:hover {
    opacity: 50%;

}

body{
    font-family: Inter;
}

/*carousel*/

table{
    text-align: center;

    width: 50%;
    margin: auto;
}

#precedent {
    visibility: hidden;
}

#nord{
    visibility: hidden;
}

#suivant{
    visibility: hidden;
}



/*front-page.php*/

.front-h1, .front-h2{
    text-align : center;
    /* grand text */
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color : #995D7A;
    margin-top: 60px;
}

.produits {
    background-color: var(--rose-fond, rgba(153, 93, 122, 0.60));
}

.produits > section > a {
    text-decoration: none;
    color: black;
    font-size: 1.1em;
}

.produits > section > a:hover {
    color: rgb(111, 101, 101);
}


#produit{

    display: flex;
    flex-wrap :wrap;
    align-items : center;
    justify-content : space-around;
}

#produit p{
    text-align: center;
}



.bleu{
    width: 200px;
    height: 70px;
    margin: auto;
    border: none;
    border-radius: 49px;
    background: #84C1B1;
    cursor: pointer;
}

.bleu:hover {
    background: #61bea5;
}

.rose{
    width: 200px;
    height: 70px;

    border: none;
    border-radius: 49px;
    background: var(--rose-fond, rgba(153, 93, 122, 0.60));
    cursor: pointer;

}

.rose:hover{
    background: var(--rose-fond, rgba(140, 62, 100, 0.6));

}

.container-boutton{
    display: flex;
    justify-content: center;
    padding: 20px 0px;
}



.ingredient{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.image{
    display: flex;
    align-items: center;
    justify-content: center;
}

#img-ingredients{
    height: 450px;
}

.description{
    margin-right: 200px;
}

.velo {
    margin-top: 40px;
    width: 100%;
}

/*Archive-produit.php*/

#titre_produit{
    text-align: center;
    color: var(--rose-fond, rgba(153, 93, 122, 0.60));
    font-family: Inter;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.touslesproduits{
    display : grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-auto-rows: auto;
    
    grid-gap: 70px;
    margin-left: 25px;

}

.touslesproduits > a {
    text-decoration: none;
    color: black;
    background-color: var(--rose-fond, rgba(153, 93, 122, 0.60));
    padding: 10px;
    border-radius: 5px;
}

.touslesproduits > a:hover {
    background-color: var(--rose-fond, rgba(142, 50, 95, 0.6));

}

.touslesproduits > a > article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.affichage-produit{
    width: 100%;
}


.post{
    font-family: Inter;

}
.post__meta{
    color: rgb(93, 92, 92);
    font-size: 10px;
    font-family: Inter;
    font-style : italic;
}

h2{
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 8px;
    margin-bottom: 3px;
}
.prix{
    font-family: Jockey One;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.details{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.avis{
    display: flex;
    flex-direction: row-reverse;
    margin-right: 25px;
}

/* home.php */

.container-article-blog > a{
    text-decoration: none;
}

.custom-thumbnail img{
    width: 100%;
    height: auto; 
    border-radius: 5px; 
    margin-bottom: 1px; 
}

.container{
    background-color: var(--rose-fond, rgba(153, 93, 122, 0.30));
    color: var(--rose-fond, rgba(153, 93, 122, 0.80));
    border: var(--rose-fond, rgb(153, 93, 122, 0.60)) 2px solid;
    border-radius: 5px ;
    padding: 20px;

    width: 25%;
}


.blog{
    text-align: center;
}


/* single-produit.php */

.container-produit{
    padding: 20px 80px;
}

#image-produit {
    display: flex; 

}

#image-produit > img {
    width: 40%;
    height: auto;
    margin: auto;
    
}

#prix{
    font-size:large;
}

.container-nutritives{
    display: flex;
    justify-content: space-between;

    background: rgba(153, 93, 122, 0.60);
}

.left-nutritives{
    padding: 30px;
    width: 100%;
}

.table-nutritives{
    margin-top: 20px;
    border-collapse: separate;
    border-spacing: 0.5em;
}


.img-steak{
    height: 400px;
}


.container-button{
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.container-button > button{
    margin: 0;
    margin-right: 15px;
}