.main-div {
    max-width: 1200px;
    margin: 30px auto;
    background-color: #FFF;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#tag-div {
    display: block;
}

.tag-filters-div, .tag-actions-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.tag-filters-div div, .tag-actions-div div {
    display: flex;
    flex-direction: column;
    margin: 0 5px 10px 5px;
}

.tag-filters-div div input[type=number], .tag-filters-div div select {
    width: 200px;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #CCC;
    border-radius: 15px;
    background-color: #FFF;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
}

.tag-filters-div div input[type=number] {
    padding: 10px;
}

.tag-filters-div div select {
    padding: 9px 10px;
}

.tag-filters-div div input[type=number]:hover, .tag-filters-div div select:hover {
    border-color: var(--hover);
    outline: none;
}

.tag-filters-div div input[type=number]:focus, .tag-filters-div div select:focus {
    border-color: var(--focus);
    outline: none;
}

.tag-actions-div div button, #reset {
    width: 200px;
    max-width: 100%;
    margin: auto 0 0 0;
    font-size: 16px;
    border-radius: 25px;
    border: none;
    color: var(--grey-text);
    background-color: var(--hover-background);
    cursor: pointer;
    transition: color 0.1s, background-color 0.1s;
    font-family: 'DM Sans', sans-serif;
    padding: 11px 0;
}

#reset {
    text-decoration: none;
    text-align: center;
}

.tag-actions-div div button:hover {
    color: #FFF;
    background-color: var(--focus);
}

#reset:hover {
    color: #FFF;
    background-color: var(--warning);
}

select:hover {
    cursor: pointer;
}

#filter-button {
    display: none;
}

/* Barre de recherche */
.search-bar-div {
    margin: 10px auto 0 auto;
    max-width: 400px;
}

.search-bar-div form {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #CCC;
    border-radius: 15px;
    background-color: #FFF;
}

.search-bar-div form:hover {
    border-color: var(--focus);
}

.search-bar-div form input {
    outline: none;
    border: none;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    width: 100%;
}

.search-bar-div form button {
    border: none;
    color: var(--grey-text);
    background-color: transparent;
}

.search-bar-div form button:hover {
    cursor: pointer;
}

.content-div {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
}

.nobook-text {
    margin-top: 10px;
    color: var(--warning);
}

.book-div {
    display: flex;
    height: 200px;
    width: 200px;
    margin: 10px 5px 0 5px;
    box-sizing: border-box;
    border: 1px solid #CCC;
    border-radius: 15px;
    background-color: #FFF;
}

.book-div:hover {
    border-color: var(--focus);
}

.book-div a {
    height: 100%;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.book-cover-div {
    flex-grow: 1;
    margin: 10px 10px 0 10px;
    height: 0;
}

.book-cover-div img {
    width: auto;
    height: 100%; 
    object-fit: cover;
    border-radius: 10px;
}

.book-name-div {
    align-self: center;
    margin: 0 10px 10px 10px;
}

.book-name-div p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.page-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0 0;
    text-align: center;
}

.page-div a {
    display: flex;
    width: 150px;
    max-width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: 16px;
    border-radius: 25px;
    text-decoration: none;
    color: var(--grey-text);
    background-color: var(--hover-background);
    transition: color 0.1s, background-color 0.1s;
    font-family: 'DM Sans', sans-serif;
}

.page-div a:first-child {
    margin: 0 10px 0 0;
}

.page-div a:last-child {
    margin: 0 0 0 10px;
}

.page-disabled:hover {
    color: var(--grey-text);
    background-color: var(--hover-background);
}

.page-enabled:hover {
    color: #FFF;
    background-color: var(--focus);
}

.page-div p {
    white-space: nowrap;
    text-size-adjust: auto;
}

@media screen and (max-width: 730px) {
    #tag-div {
        display: none;
    }

    #filter-button {
        display: block;
    }
}

@media screen and (max-width: 474px) {
    .tag-filters-div div {
        width: 100%;
    }

    .tag-filters-div div input[type=number],
    .tag-filters-div div select {
        width: 100%;
    }

    .tag-actions-div div {
        width: 100%;
    }

    .tag-actions-div div button,
    #reset {
        width: 100%;
    }

    .book-div {
        height: 300px;
        width: 300px;
    }
}