*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-weight:400;
    color:#292929;
}
a{
   text-decoration: none;
}
:root{
    --primary-bg-color : #F5F3EF;
    --secondary-bg-color : #FAF9F7;
    --primary-green : #00AC66;
    --primary-gray : #A6A6A6;
    --secondary-gray : #F0F0F0;
}

/*
Layout
*/
body{
    min-height:100vh;
    display:flex;
    flex-direction: column;
}
main{
    flex:1;
    display:flex;
    flex-direction: column;
}
header{
background-color: var(--primary-bg-color);
width:100%;
padding:15px 150px;
font-size:14px;
}
header nav{
    width:100%;
    display:flex;
    align-items: center;
    gap:78px;

}
.headerMenu{
    flex:1;
    justify-content: flex-end;

}
header nav div {
    display:flex;
    gap:20px;
}
.unreadCount{
    position:relative;
}
.unreadCount::after{
    content:attr(data-count);
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 6.75px;
    width:10.5px;
    height:15px;
    font-size:8px;
    color:white;
    background-color: #292929;
    position:absolute;
    font-weight:bold;
    top:0;
    right:0;
    transform: translateX(120%) translateY(2px);

}
footer{
    height:60px;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    padding:0 64px;
    gap:40px;
    font-size: 12px;
}
/*
Components & utils
*/
.primary_button{
    background-color: var(--primary-green);
    color:white;
    padding:22px 38px;
    border-radius: 10px;
    display:block;
    width:fit-content;
    border:none;
}
.primary_button--reversed{
    background-color:inherit;
    color:var(--primary-green);
    border:1px solid var(--primary-green);
    border-radius: 10px;
}
.primary_button--full_width, .secondary_button--full_width{
    width:100%; 
    text-align: center;
}
.primary_button--long{
    padding:22px 133px;
    font-size:16px;
    outline:none;
    border:none;

}
.secondary_button{
    border:1px solid var(--primary-green);
    color:var(--primary-green);
    background-color: var(--primary-bg-color);
    border-radius:10px;
    padding:22px 32px;
    font-size:16px;

}
.book_card{
    display:flex;
    flex-direction: column;
    border-radius: 0 0 10px 10px;
    background-color: white;
}
.book_card figcaption{
    padding:20px 14px;
    display:flex;
    flex-direction: column;
    gap:8px;
    color:var(--primary-gray);
}
.book_card h3{
    color:black;
    font-size:16px;
}
.book_card h4{
    font-size:14px;
    margin-bottom:14px;
}
.book_card p{
    font-size:10px;
    font-style: italic;
}
.book_card img{
    width:200px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.playfair-font{
    font-family: "Playfair Display", serif;
    font-size:36px;
    color:black;
}
.profile .playfair-font,.create_edit_book .playfair-font{
    font-size:26px;
}
.font-light{
    font-weight: 300;
}
.font-semibold{
    font-weight: 600;
}
.font-bold{
    font-weight:bold;
}

.underline
{
    text-decoration: underline;
}
hr{
    border:1px solid var(--primary-bg-color);
    width:50%;
    margin: 48px auto;
}
.hidden{
    display:none;
}
section{
    flex-direction: column;
    display:flex;
}

/*
Page home
*/

.home{
    flex-direction: row;
    padding-top:80px;
    padding-bottom:128px;
    background-color: var(--primary-bg-color);
    justify-content: center;
    align-items: center;
    gap:110px;
}
.home div{
    max-width:350px;
    display:flex;
    flex-direction: column;
    gap:16px;
    margin-bottom: 24px;
}
.home figcaption{
    font-size:12px;
    font-style: italic;
    color: var(--primary-gray);
    text-align: right;
    margin-top: 12px;;
}
.lastBooks{
    justify-content: center;
    align-items: center;
    padding-top:80px;
    padding-bottom:64px;
    background-color:var(--secondary-bg-color);
}
.lastBooks h2{
    margin-bottom:80px;
    font-size: 32px;
}
.lastBooks .primary_button{
    margin-top: 48px;
}
.lastBooks div{
    display:flex;
    gap:38px;
}
.how_steps{
    align-items: center;
    background-color: var(--primary-bg-color);
    font-size:16px;
    padding-top:80px;
}
.how_steps h2
{
    font-size:32px;
    margin-bottom: 24px;
}
.how_steps p{
    max-width:400px;
    margin-bottom: 40px;
    text-align: center;
}
.cards-container{
display:flex;
gap:36px;
}
.how_steps--cards{
    width:215px;
    height:139px;
    text-align: center;
    display:flex;
    align-items: center;
    background-color: white;
    padding:18px;
    font-size:14px;
    border-radius: 10px;;
}
.our_values {
    padding-top:80px;
    background-color: var(--primary-bg-color);
    align-items: center;
}
.home_banner{
    width:100%;
    object-fit: cover;
    margin-bottom:80px;
}
.our_values h2{
    font-size:32px;
    margin-bottom: 24px;
}
.our_values blockquote{
    max-width:392px;
    display: flex;
    flex-direction: column;
    gap:16px;
    position:relative;
    margin-bottom:160px;
}
.our_values cite{
    margin-top:40px;
    font-style:italic;
    font-size: 12px;
    color: var(--primary-gray);
}
.our_values blockquote img{
    position:absolute;
    bottom:0;
    right:0;
    transform: translate(50%,50%);
}

/*
Page market
*/

.market{
    flex:1;
    padding:0 263px;
    padding-top:130px;
    background-color: var(--secondary-bg-color);
}
.market div:first-child{
    display:flex;
    justify-content: space-between;
}
.market .cards-container{
    margin-top:72px;
    display:flex;
    flex-wrap: wrap;
    gap:38px;
    row-gap: 48px;
}
.search_bar{
    width:322px;
    height:50px;
    border : 1px solid var(--secondary-gray);

    padding :0  12px;
    outline:none;
}

/*
Page profile
*/
.profile{
    display:flex;
    flex-direction: column;
    background-color: var(--secondary-bg-color);
    padding:90px 155px;
    flex:1;
}

.profile.profile--public{
    flex-direction: row;
    flex:1;
    gap:35px;
    row-gap:0;
}

.profile--public h1{
    width:100%;
}

.account_detail{
    display:flex;
    flex-direction: row;
    gap:33px;
    margin-top:48px;
}
.account_detail .registration_duration{
    color:var(--primary-gray);
    font-size:14px;
}
.account_detail .playfair-font{
font-size:24px;
}
.account_detail div{
    min-width: 48%;
}
.account_detail div, .edit_profile_form{
    border-radius: 20px;
    padding-top:21px;
    background-color: white;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.account_detail .librairy_count h3{
font-size:8px;
}
.account_detail .librairy_count p{
    font-size:14px;
}
.account_detail .avatar{
    width:135px;
    aspect-ratio:1/1;
    object-fit: cover;
    border-radius: 100%;
}
.account_detail--smaller .avatar{
    margin-bottom:118px;
}
.account_detail h2{
    margin-bottom:11px;

}
.account_detail label{
    color:var(--primary-gray);
    cursor: pointer;
    font-size:14px;
}
.account_detail--smaller{
    flex:1;
    margin-top:0;
    height:fit-content;
}
.account_librairy{
    margin-top:32px;
    width:100%;
    display:flex;
    flex-direction: column;
    background-color: white;
    border-radius: 20px;
}
.smaller.account_librairy{
    max-width:771px;
    margin-top:0;
    height:fit-content;
}
.account_detail--smaller .account_detail--fullContainer{
    width:100%;
    padding:48px 63px 56px 63px;
}
.account_detail--smaller .primary_button--full_width{
    height:63px;
    margin:0;
    padding:0;
    margin-top:45px;
}
.noBooks{
    font-size:18px;
    font-weight:bold;
    width:100%;
    text-align: center;
    padding:15px;
}
.account_librairy_titles{
    position:relative;
    flex:1;
    display:flex;
    padding-top:34px;
    border-bottom:1px solid var(--primary-bg-color);
    font-size:8px;
    text-transform: uppercase;
    padding-bottom:7px;
}
.smaller .account_librairy_titles{
    flex:none;
}
.account_librairy_titles--firstCol,.account_librairy_entry--firstCol{
    padding-left:66px;
    width:19.65%;
}
.smaller .account_librairy_titles--firstCol,.smaller .account_librairy_entry--firstCol{
    padding-left:66px;
    width:29.05%;
}
.account_librairy_titles--title,.account_librairy_entry--title{
    width:15.88%;
}
.smaller .account_librairy_titles--title,.smaller .account_librairy_entry--title{
    width:15.88%;
}
.account_librairy_titles--author,.account_librairy_entry--author{
    width:23.47%;
}
.smaller .account_librairy_titles--author,.smaller .account_librairy_entry--author{
    width:22.6978%;
}
.account_librairy_titles--description,.account_librairy_entry--description{
    width:18.25%;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right:25px;
}
.smaller .account_librairy_titles--description,.smaller .account_librairy_entry--description{
    width:24.773%;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right:25px;
}
.account_librairy_titles--availability,.account_librairy_entry--availability{
    width:13.25%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.account_librairy_entry:not(.account_librairy_entry:last-of-type){
    border-bottom:1px solid var(--primary-bg-color);
}
.account_librairy_entry:last-of-type{
    border-radius:0 0 20px 20px;
}
.account_librairy_entry:nth-child(odd){
    background-color: #EDF2F6;
}
.account_librairy_entry--availability div{
    width:71.6px;
    height:18.4px;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #C56D6D;
    border-radius:29.58px;
    color:white;
    font-size:8.8px;
}
.account_librairy_entry--availability .available{
background-color: #6DC5A1;
}
.account_librairy_titles--lastCol,.account_librairy_entry--lastCol{
    padding-right:80px;
    width:17.63%;
}
.smaller .account_librairy_titles--lastCol,.smaller .account_librairy_entry--lastCol{
    padding-right:80px;
    width:17.63%;
}
.account_librairy_titles a{
    display:flex;
    font-size:15px;
    justify-content: center;
    align-items: center;
    width:25px;
    height:25px;
    border:1px solid blue;
    border-radius:100%;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:15px;
}
.account_librairy_entry--lastCol {
display:flex;
gap:28px;
}
.account_librairy_entry *{
    font-size:12px;
    font-weight: normal;
}
.account_librairy_entry--description{
    font-style: italic;
}
.edit_link,.delete_link{
    text-decoration: underline;
}
.account_librairy_entry .delete_link{
    color:#CB2D2D;
}

.account_librairy_entry img{
width :78px;
height:78px;
}
.account_librairy_entry{
    max-height:130px;
    height:130px;
    overflow: hidden;
    display:flex;
    align-items: center;
}
.edit_profile_form{
    display:flex;
    flex-direction: column;
    align-items:  flex-start;
    gap:32px;
    width:100%;
    padding:36px 117px;
}
.edit_profile_form h2{
    font-size: 16px;
}
.edit_profile_form label,.create_edit_book label{
    display:flex;
    flex-direction: column;
    gap:10px;
    width:100%;
}
.edit_profile_form input,.create_edit_book input{
    width:100%;
    height:50px;
    border:1px solid var(--secondary-gray);
    border-radius:6px;
    padding-left:14px;
    background-color: #edf2f6;
}

/*
Page detail book
*/

.detail_book{
    flex:1;
}
.detail_book>a{
    background-color: var(--primary-bg-color);
    padding-left:150px;
    font-size:10px;
    color:var(--primary-gray);
    padding-bottom:16px;
}

.detail_book figure{
    display:flex;
    gap:84px;
    background-color: var(--secondary-bg-color);
    flex:1;
    padding-right:180px;
}
.detail_book figure> img{
    object-fit: cover;
    border-radius: 0;
    max-width:50vw;
    min-width:50vw;
}
.detail_book figcaption{
    display:flex;
    flex-direction: column;
    flex:1;
    padding-top:60px;
}
.detail_book h2{
    color:var(--primary-gray);
    font-size:16px;
    margin-top:16px;
    margin-bottom:32px;
}
.detail_book hr{
    margin:0;
    margin-bottom: 34px;
    width:27px;
    border-color:#A6A6A6
}
.detail_book h3{
    font-size:8px;
    margin-bottom: 16px;
}
.detail_book h4{
    font-size:8px;
    text-transform: uppercase;
}
.detail_book blockquote{
    font-size:14px;
    margin-bottom: 32px;
    flex:1;
    max-height:300px;
    overflow-y:scroll;
}
.detail_book .owner{
margin-bottom: 80px;
}
.detail_book .owner_card{
    display:flex;
    align-items: center;
    gap:12px;
    background: white;
    width:fit-content;
    padding: 6px;
    padding-right:12px;
    margin-top:16px;
    border-radius:114px ;
}
.detail_book .owner_card img{
    width:48px;
    aspect-ratio:1/1;
    object-fit: cover;
    border-radius: 100%;
}

dialog[open]{
margin:auto;
outline:none;
border:none;
border-radius:20px;
border:1px solid black;
padding:30px 20px;
position:relative;
width:45%;
}
#modale_opener{
    margin-bottom:80px;
}
.dialog_container{
    display:flex;
    flex-direction: column;
}
#modale_closer{
    font-size:12px;
    position:absolute;
    top:25px;
    right:20px;
    border:1px solid blue;
    background-color:inherit;
    outline:none;
    border-radius:100%;
    width:20px;
    height:20px;
    cursor: pointer;
}
.dialog_container form{
    display:flex;
    flex-direction: column;
    gap:10px;
    width:100%;
}
.dialog_container textarea{
    padding:10px;
}
.dialog_container form.success::after{
    content:'Message envoyé';
    color:green;
    font-size:12px;
    margin-top:10px;
}
.dialog_container form.error::after{
    content:'Problème lors de l\'envoi';
    color:red;
    font-size:12px;
    margin-top:10px;
}


/*
Page create_edit_book
*/

.create_edit_book{
    flex:1;
    background-color:var(--secondary-bg-color);
    padding:40px 150px;
    padding-bottom:80px;
}
.create_edit_book a{
    color:var(--primary-gray);
    font-size:14px;
}
.create_edit_book h1{
    margin-top:23px;
}
.create_edit_book>div{
    width:100%;
}
.create_edit_book figure img{
    width:100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.create_edit_book figure {
    text-align: right;
    position:relative;
    width:488px;
}
.create_edit_book figure::before{
    content:'Photo';
    position:absolute;
    top : -10px;
    transform:translateY(-100%);
    color:var(--primary-gray);
    font-size:14px;
}
.create_edit_book .container{
display:flex;
margin-top:23px;
padding:56px 50px;
background-color: white;
border-radius: 20px;
}
.create_edit_book form{
    margin-left:118px;
    flex:1;
    display:flex;
    flex-direction: column;
    gap:32px;
}
.create_edit_book label{
    display:flex;
    flex-direction: column;
    gap:10px;
}

.create_edit_book input,.create_edit_book textarea{
    width:100%;
    height:50px;
    border:1px solid var(--secondary-gray);
    border-radius:6px;
    padding-left:14px;
    background-color: #edf2f6;
}
.create_edit_book textarea{
    min-height:355px;
}
.create_edit_book select{
    height:50px;
    background-color: #edf2f6;
    border-radius:6px;
    border:1px solid var(--primary-gray) ;
    outline:none;
    padding-right:24px;
    padding-left:14px;
}

/* Connexion & inscription */
.connexion{
    flex:1;
    flex-direction: row;
    background-color: var(--secondary-bg-color);
}

.connexion div{
    display:flex;
}
.connexion form{
    padding-left:150px;
    padding-top:130px;
    padding-right:248px;
    display:flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: flex-start;
    gap:32px;
}
.connexion label{
    display:flex;
    flex-direction: column;
    gap:10px;
    color:var(--primary-gray);
}
.connexion input {
    height:50px;
    width:322px;
    padding-left:10px;
    border-radius : 6px;
    border:1px solid #F0F0F0;
}
.connexion .primary_button{
    font-size:16px;
}
.connexion img{
    object-fit: cover;
    width:50%;
}

/* Mailbox */
#chatBox{
    background-color: var(--primary-bg-color);
    flex:1;
    flex-direction:row;
    padding:0 150px ;
    display:flex; 
}
#chatList{
    background-color: var(--secondary-bg-color);
    padding: 55px 0;
    width:27%;
}
#chatBox img{
    width:24px;
    aspect-ratio:1/1;
    object-fit: cover;
    border-radius: 100%;
}
#chatList figure img, #chat h3 img{
    width:48px;
}
#chatList h2{
padding-left: 11%;
padding-right:13.64%; 
margin-bottom:27px;
}
#chat h3{
    font-size:14px;
    display:flex;
    align-items: center;
    gap:12px;
}

#chat{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:35px;
    padding:44px;
}
.chatlist--item{
    display:flex;
    gap:12px;
    max-height:84px;
    padding:18px 11%;
    padding-right:13.64%; 
}
.chatlist--item.active{
    background-color: white;
}
.chatlist--item figcaption{
    display:flex;
    width:100%;
    gap:7px;
    flex-direction: column;
    overflow: hidden;
}
.chatlist--item figcaption h4{
    display:flex;
    justify-content: space-between;
}
.chatlist--item figcaption p{
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message{
    width:65%;
    font-size:12px;
}
.message h5{
    display:flex;
    align-items: center;
    gap : 6px;
    margin-bottom:5px;
    color:var(--primary-gray);
    
}
.own_message{
    align-self: flex-end;
    display:flex;
    flex-direction: column;
    align-items: flex-end;
}
.own_message p{
    background-color: #EDF2F6;

}
.message p{
    padding:10px 18px;
    border-radius:3px;
}
.received_message p{
    background-color: white;
}
#chat .primary_button{
    display:flex;
    align-items: center;
    justify-content: center;
    max-width:132px;
    max-height:49px;
    font-size:16px;
}
#chat form{
    display:flex;
    gap:21px;
    margin-top:63px;
    margin-bottom:54px;
}
#chat input{
    flex: 1;
    border:none;
    border-radius:6px;
    padding-left:40px;
}
.error_page{
    margin:auto;
}