:root {
	color-scheme: light;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #1f2937;
	background: #f3f5f8;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; }
.site-header { background: #18263c; color: #fff; padding: .8rem max(1rem, calc((100% - 1700px) / 2)); }
.site-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.site-brand { margin-right: auto; color: #fff; font-size: 1.08rem; font-weight: 750; text-decoration: none; }
.site-nav a:not(.site-brand) { padding: .42rem .65rem; border-radius: 6px; color: #dbe6f5; text-decoration: none; }
.site-nav a:hover, .site-nav a.active { background: #314867; color: #fff; }
main { width: auto; max-width: none; margin: 1rem; padding: 0 .5rem; }
h1 { margin: 0 0 .35rem; font-size: 1.8rem; }
.intro { margin: 0 0 1.25rem; color: #596579; }
.error { padding: 1rem; color: #842029; background: #f8d7da; border: 1px solid #f1aeb5; border-radius: 8px; }
[hidden] { display: none !important; }

/* Vue tableau */
.filter-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.filter-toolbar button { padding: .45rem .7rem; border: 1px solid #c9d1de; border-radius: 5px; background: #fff; cursor: pointer; }
.filter-toolbar .count { color: #596579; font-size: .95rem; }
.catalogue-controls { margin: 0 0 1rem; padding: .75rem 1rem; background: #fff; border: 1px solid #d9dee8; border-radius: 10px; }
.catalogue-controls summary { cursor: pointer; font-weight: 700; }
.catalogue-controls[open] summary { margin-bottom: .8rem; }
.anime-title { padding: 0; border: 0; background: transparent; color: #245fc5; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
#anime-details { width: min(720px, calc(100% - 2rem)); max-height: 85vh; overflow: auto; border: 0; border-radius: 10px; padding: 1.25rem; box-shadow: 0 10px 40px #0004; }
#anime-details::backdrop { background: #17203399; }
.anime-detail-heading { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.anime-detail-heading img { width: 96px; height: 128px; object-fit: cover; border-radius: 6px; }
.anime-detail-heading h2 { margin: 0; }
#anime-details dl { display: grid; grid-template-columns: minmax(130px, .6fr) 1fr; gap: .4rem .8rem; }
#anime-details dt { color: #596579; font-weight: 650; }
#anime-details dd { margin: 0; white-space: pre-wrap; }
.catalogue-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .7rem; }
.catalogue-filter-field { display: grid; min-width: 0; gap: .3rem; }
.catalogue-filter-field label { color: #374151; font-size: .84rem; font-weight: 650; }
.catalogue-filter-field input, .catalogue-filter-field select { width: 100%; min-width: 0; height: 2.35rem; padding: .45rem .55rem; border: 1px solid #c9d1de; border-radius: 5px; font: inherit; font-size: .87rem; background: #fff; }
.view-table .table-wrap { background: #fff; border: 1px solid #d9dee8; border-radius: 10px; overflow: auto; }
.view-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.view-table th, .view-table td { padding: .7rem .75rem; border-bottom: 1px solid #e5e9f0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.view-table thead th { position: sticky; top: 0; z-index: 1; background: #eef2f7; }
.view-table tbody tr[data-anime-row]:nth-child(odd) { background: #fff; }
.view-table tbody tr[data-anime-row]:nth-child(even) { background: #f2f6fb; }
.view-table th { font-size: .9rem; white-space: nowrap; }
.view-table td { font-size: .92rem; }
.view-table td.number { text-align: center; }
.view-table td.note { max-width: 420px; }
.view-table .empty { color: #687386; text-align: center; }
.view-table td.image img { display: block; width: 120px; max-width: 100%; height: 68px; object-fit: cover; }

/* Vue fiches */
.view-articles .cards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; }
.view-articles .anime-card { display: flex; flex-direction: column; flex: 1 1 300px; max-width: 440px; min-width: 0; padding: 1rem; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 3px 10px rgb(31 41 55 / 9%); }
.view-articles .card-heading { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .9rem; }
.view-articles .poster { flex: 0 0 92px; width: 92px; margin: 0; }
.view-articles .poster img { display: block; width: 100%; max-width: 120px; max-height: 110px; object-fit: contain; }
.view-articles .card-heading h2 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.view-articles .age { display: inline-block; margin-top: .4rem; padding: .15rem .45rem; border-radius: 999px; color: #374151; background: #eef2f7; font-size: .78rem; }
.view-articles .details { display: grid; gap: .65rem; margin: 0; }
.view-articles .detail dt { margin-bottom: .22rem; color: #687386; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.view-articles .detail dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.view-articles .tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.view-articles .tag { padding: .15rem .45rem; border-radius: 999px; background: #f1f5f9; }
.view-articles .note { margin-top: auto; padding-top: .8rem; color: #596579; }
.view-articles .empty { width: 100%; padding: 1rem; color: #687386; text-align: center; background: #fff; border-radius: 8px; }

@media (max-width: 700px) {
	main { margin: .6rem; padding: 0 .25rem; }
	.view-table .table-wrap { overflow-x: auto; }
	.view-articles .anime-card { flex-basis: 100%; max-width: none; }
}