/* Structure Générale */
main{
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    min-height: 80vh;
    margin: 2rem 0;
}

.article-container{
    display: flex;
    justify-content: space-evenly;
    padding: var(--padding-container);
    gap: 2.5rem;
    
}

/* Container images */
.article-img-container{
    display: flex;
    gap : 2rem;
    justify-content: center;
    align-items: center;
    width: 40%;
}

.container-preview{
    display: flex;
    flex-direction: column;
    gap: 10px;
    img{
        object-fit: cover;
        max-width: 100%;
        border: var(--border-color);
        border-radius: var(--border-radius);
    }
}

.preview-img{
    width : 5rem;
    height : 5rem;
    background-size: cover;
    background-position: center;
    border: var(--border-color);
    border-radius: var(--border-radius);
    
}


/* Container infos */

.article-content{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;;
    width: 60%;

        .article-title{
            h1{
                text-align: center;
                color: var(--text-color);
            }
        }
   
        .article-infos{
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 100%;
           
        }

        .article-date{
            h3{
                text-align: center;
                color: var(--text-color);
            }
            p{
                color:var(--secondary-text-color)
            }
        }

        .article-price{
            display: flex;
            flex-direction: column;
            gap: 10px;

            .price{
                text-align: center;
            }
        }

        .article-author{
            h3{
                text-align: center;
                color: var(--text-color);
            }

            color: var(--secondary-text-color);
        }

        .links-actions{
            display: flex;
            gap: 1rem;
        }
        

}


/* Boutons admins */
.actions{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Media queries */

@media screen and (max-width: 600px) {

    .article-container{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .article-img-container{
        width: 100%;
    }
    .article-content{
        width: 100%;
        gap: 20px;

        .article-infos{
            display: flex;
            flex-direction: column;
            gap: 2rem;

        }
    }
    
}