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

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/******* FONT *******/
@font-face {
    font-family: "Merriweather";
    src: url(fonts/Merriweather_48pt-Bold.ttf);
}

@font-face {
    font-family: "Lato";
    src: url(fonts/Lato-Regular.ttf);
}

h1{
    font-family: "Merriweather";
    text-transform: capitalize;
    font-size: 4.75rem;
    font-weight: 500;
}

h2{
    font-family: "Merriweather";
    font-size: 2rem;
    font-weight: 500;
}

h3{
    font-family: "Merriweather";
    font-size: 1.625;
    font-weight: 500;
}

h4{
    font-family: "Merriweather";
    font-size: 1.125rem;
    font-weight: 500;
    color: #000000;
}

h5{
        font-family: "Merriweather";
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
}

p{
    font-family: "Lato";
    font-size: 0.875rem;
    color: #000000;
}

a{
    text-transform: capitalize;
    font-weight: 500;
    font-size: 1.125rem;
    color: #000000;
    text-decoration: none;
}

.cta{
    border: solid 2px #DBDBDB;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    background-color: #DBDBDB;
    a{
        font-family: "Lato";
    }
}

.secondary-btn{
    width: fit-content;
    padding: 0.2rem 1rem;
    border-radius: 5px;
    background-color: #ffffff;
}

.back-btn{
    width: fit-content;
    padding: 0.2rem 1rem;
    border:solid 2px #ff0000;
    border-radius: 5px;
    background-color: #ffffff;
}

.validate-btn{
    background-color: rgb(26, 197, 46);
    font-family: "Lato";
    font-size: 1.125rem;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    border-color: rgb(26, 197, 46);
    align-self: flex-end;
}

.delete-btn{
    background-color: red;
    color: #000000;
    font-family: "Lato";
    font-size: 1.125rem;
    border-radius: 5px;
    padding: 0.2rem 1rem;
}

.edit-btn{
    font-family: "Lato";
    font-size: 0.75rem;
    border-radius: 5px;
    border:solid 1px;
    padding:0.2rem 0.7rem;
    width: fit-content;
    border-radius: 5px;
    background-color: #ffffff;
}


/****** HEADER ******/

/*** NAVBAR ***/
header{
    width:80%;
}

.navbar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:2rem;
    p{
       font-family: "Merriweather";
        text-transform: capitalize;
        font-weight: 500;
        font-size: 1.125rem;
        color: #000000;
    }
    ul{
        display:flex;
        gap: 2rem;
        li{
            list-style: none;
        }
        a{
            font-family: "Merriweather";
            display: flex;
            align-items: center;
            gap:0.5rem;
        }
    }
}

/*** TITLE ***/

.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
    gap: 1rem;
    border-bottom: solid 4px #000000;
    padding-bottom: 2rem;
}


/****** MAIN ******/

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

.container{
    width:66%;
    display: flex;
    gap:2rem;
    margin:2rem 0;
    .banner-list{
        width:100%;
        display: flex;
        flex-direction: column;
        gap:2rem;
    }
}

/*** BANNER ARTICLE ***/

.banner{
    display: flex;
    width:100%;
    height:320px;
    gap: 1rem;
    .banner-img{
       width: 49%;
       height:320px;
       overflow: hidden;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
        img{
            width:100%;
            height: 100%;
            object-fit: cover;
            display: block;
       }
    }
    .banner-text{
        width:51%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap:0.5rem;
        .banner-categorie{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .p-categorie{
                font-family: "Lato";
                border-radius: 5px;
                text-transform: capitalize;
                width: fit-content;
                font-family: "Lato";
                font-size: 0.75rem;
                padding:0.2rem 1rem;
                background-color: #DBDBDB;
            }   
        }
        .banner-title{
            display: flex;
            flex-direction: column;
            gap:0.5rem;
            .p-title{
                font-size: 0.75rem;
                color:#7F7F7F;
                text-transform: capitalize;
            }
        }
        .banner-autor{
            display: flex;
            justify-content: space-between;
            .banner-link{
                display:flex;
                gap:1rem;
                align-items: center;
                align-self: flex-end;
                a{
                    font-family: "Lato";
                    font-size: 0.875rem;
                    text-transform: none;
                }
            }
            .banner-pseudo{
                display: flex;
                flex-direction: row;
                align-items: center;
                gap:1rem;
                text-transform: capitalize;
                img{
                    width:48px;
                    border-radius:200px;
                }
            }
        }       
        .banner-footer{
            display:flex;
            align-items: center;
            justify-content: space-between;
        }
        .banner-date{
            align-self: flex-end;
            .p-date{
                font-size: 0.625rem;
                color:#7F7F7F;
            }
        }
        .banner-social{
            display: flex;
            gap:2rem;
            .banner-comment, .banner-like{
                align-items: center;
                display: flex;
                gap:0.7rem;
            }

        }
    }
}



/*** CARD ***/

.card-list{
    display: flex;
    flex-wrap: wrap;
    gap:2rem;
    flex:1 1 calc( 49% - 2rem );
}

.card{
    display: flex;
    width:47%;
    height:250px;
    gap: 1rem;
    .card-img{
       width: 39%;
       height:250px;
       overflow: hidden;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
        img{
            width:100%;
            height: 100%;
            object-fit: cover;
            display: block;
       }
    }
    .card-text{
        width:61%;
        display: flex;
        flex-direction: column;
        gap:0.5rem;
        .card-categorie{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .p-categorie{
                font-family: "Lato";
                border-radius: 5px;
                text-transform: capitalize;
                width: fit-content;
                font-family: "Lato";
                font-size: 0.75rem;
                padding:0.2rem 1rem;
                background-color: #DBDBDB;
            }   
        }
        .card-title{
            display: flex;
            flex-direction: column;
            gap:0.5rem;
            .p-title{
                font-size: 0.75rem;
                color:#7F7F7F;
                text-transform: capitalize;
            }
        }
        .card-date{
            align-self: flex-end;
            .p-date{
                font-size: 0.625rem;
                color:#7F7F7F;
            }
        }
        .card-link{
            display:flex;
            gap:1rem;
            align-items: center;
            align-self: flex-end;
            a{
                font-family: "Lato";
                font-size: 0.875rem;
                text-transform: none;
            }
        }
        .card-social{
            display: flex;
            gap:2rem;
            .card-comment, .card-like{
                align-items: center;
                display: flex;
                gap:0.7rem;
            }

        }
    }
}

/****** FORMULAIRE ******/

/*** LOGIN ***/

.form-login{
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: solid 2px #000000;
    padding: 2rem;
    margin-top: 5rem;
    form{
        display:flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

/****** SEARCH BAR ******/

.search-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    .search-form{
        display: flex;
        align-items: center;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
    }
}

.search-form input[type="text"],
.search-form input[type="search"] {
    border: none;
    border-bottom: 2px solid #222;
    outline: none;
    background: transparent;
    font-size: 1.5em;
    padding: 0 0.5em 0.2em 0;
    margin-right: 1em;
    text-transform: capitalize;
    font-family: "Merriweather";
}

.search-form button.search-btn {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-form button.search-btn:focus {
    outline: none;
}

.search-filter {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    margin: 2rem 0;
}

/*** EDITION / CREATION ARTICLE ***/

.input-error{
    color:red;
    border: solid 1px red;
}

.form-control{
    width:300px;
}

.form-create {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    form{
        display: flex;
        flex-direction: column;
        gap:1.5rem;
        input, textarea{
            border:solid 1px;
            border-radius:5px;
            padding:0.5rem 1rem;
        }
    }
}

.form-profil{
    .current-image{
        align-items:center;
        img{
            border-radius: 200px;
        }
    }
    form{
        align-items: center;
    }
}

#article_categorie{
    width:fit-content;
}

.form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 2rem;
}

.label-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.label-form-publication{
    flex-direction: row;
    align-items: center;
    gap:0.5rem;
}

.label-form-agreement{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:0.5rem;
    margin-top:0.5rem;
}

#article_publication{
    width:auto;
}

.textarea-summary{
    width:100%
}

.textarea-content{
    width: 100%;
    height: 200px;
}

.current-image{
    display:flex;
    flex-direction: column;
    gap: 1rem;
    img{
    width: 300px;
    }
}

/****** COMMENTS / DETAIL ARTICLE ******/

.container-detail-article {
    width: 66%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
    .article-detail{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        .article-header{
            display: flex;
            justify-content: space-between;
            .article-categorie{
                border-radius: 5px;
                text-transform: capitalize;
                width: fit-content;
                font-family: "Lato";
                font-size: 0.75rem;
                padding:0.2rem 1rem;
                background-color: #DBDBDB;
            }
        }

        .article-date{
            .p-date{
                font-size: 0.625rem;
                color:#7F7F7F;
            }
        }
    }
    .article-img{
        align-self: center;
        width:70%;
        img{
            width:100%;
        }
    }
    .article-footer{
        display:flex;
        justify-content: space-between;
        align-items: center;
        .article-pseudo{
            display:flex;
            gap:0.5rem;
            align-items: center;
            text-transform: capitalize;
            img{
                width:48px;
                border-radius: 50px;
            }
        }
        .article-social{
            display: flex;
            gap: 2rem;
            .article-comment{
                display: flex;
                align-items: center;
                gap:0.5rem;
            }
            .article-like{
                display: flex;
                align-items: center;
                gap:0.5rem;
                form{
                    button{
                        display:flex;
                        align-items: center;
                        gap:0.5rem;
                        border:none;
                        background-color: #ffffff;
                    }   
                }
            }
        }
    }
}

.container-comment{
    width: 66%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
    .comment{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border:solid 1px;
        border-radius:5px;
        padding:0.5rem 1rem;
        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .comment-pseudo {
                display: flex;
                gap: 2rem;
                align-items: center;
                text-transform: capitalize;
                img{
                    width:48px;
                    border-radius: 50px;
                }
            }
        }
    }
}

.comment-form{
    width:50%
}

.comment-form form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    label{
        font-family: "Merriweather";
        font-size: 1.125rem;
        font-weight: 500;
    }
    textarea{
        height: 100px;
        border: solid 1px;
        border-radius: 5px;
    }
}

.delete{
    margin-bottom: 2rem;
    align-self: flex-end;
}

/****** PROFIL ******/

.user-profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-transform:capitalize;
    img{
        width:150px;
        border:solid 1px;
        border-radius: 100px;
    }
}