/* Styles de la liste personnelle d'animés. */
.anime-page { max-width: 1280px; }

.anime-box {
    margin: 0 auto 2.5rem;
    padding: clamp(2rem, 5vw, 4rem);
    text-align: left;
    background: linear-gradient(145deg, rgba(24, 33, 58, .9), rgba(30, 27, 75, .62));
    border: 1px solid var(--border);
    border-radius: 2rem;
    box-shadow: var(--shadow);
}

.anime-box h1 { margin: .8rem 0 1rem; font-size: clamp(2rem, 5vw, 3.5rem); }
.anime-box p { max-width: 680px; margin: 0; color: var(--text-muted); font-size: 1.1rem; }
.section-eyebrow { color: var(--accent-cyan); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.anime-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.anime-toolbar h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
#anime-status { margin: 0; color: var(--text-muted); font-size: .9rem; }
.anime-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.anime-card { overflow: hidden; background: linear-gradient(145deg, rgba(24, 33, 58, .94), rgba(13, 18, 35, .9)); border: 1px solid var(--border); border-radius: 1.15rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); transition: transform .2s ease, border-color .2s ease; }
.anime-card:hover { border-color: rgba(167, 139, 250, .6); transform: translateY(-4px); }
.anime-cover, .anime-cover-placeholder { display: block; width: 100%; height: 285px; object-fit: cover; background: linear-gradient(145deg, #211d40, #111323); }
.anime-cover-placeholder { display: grid; place-items: center; padding: 1rem; color: #c4b5fd; font-size: 2rem; font-weight: 800; text-align: center; }
.anime-card-body { padding: 1rem; }
.anime-card h3 { margin: 0 0 .75rem; font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere; }
.anime-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .85rem; color: var(--text-muted); font-size: .78rem; }
.anime-badge { padding: .25rem .5rem; background: rgba(139, 92, 246, .16); border-radius: .45rem; color: #ddd6fe; }
.anime-badge.is-airing { background: rgba(34, 197, 94, .14); color: #bbf7d0; }
.anime-details { display: grid; gap: .35rem; margin-bottom: .85rem; color: #cbd5e1; font-size: .78rem; line-height: 1.35; }
.anime-synopsis { display: -webkit-box; margin: 0 0 .9rem; color: var(--text-muted); font-size: .82rem; line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.anime-unavailable { margin: 0; color: var(--text-muted); font-size: .82rem; font-style: italic; }
.anime-link { font-size: .85rem; font-weight: 700; }
.anime-state { padding: 3rem 1rem; color: var(--text-muted); text-align: center; }
.anime-state p { margin: .8rem 0 0; }
.anime-notice { margin-bottom: 1.25rem; padding: 1rem 1.25rem; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .3); border-radius: 1rem; color: #fde68a; }
.anime-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
#anime-page-label { min-width: 7rem; color: var(--text-muted); text-align: center; }

@media (max-width: 991px) { .anime-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .anime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
    .anime-cover, .anime-cover-placeholder { height: 245px; }
    .anime-toolbar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
    .anime-grid { grid-template-columns: 1fr; }
    .anime-cover, .anime-cover-placeholder { height: 330px; }
    .anime-pagination { gap: .5rem; }
    .anime-pagination .btn { padding: .5rem .65rem; font-size: .8rem; }
}