/* Catalogue indexable — complète discover.css, qui fournit déjà la colonne de lecture,
   le défilement et les sections. Ici : le fil d'Ariane, les cartes de titre, les faits
   d'une fiche, les carrefours. Aucune couleur en dur — tout passe par les variables de
   shell.css, sinon le thème clair se retrouve avec des cartes sombres. */

/* Les liens en pleine phrase — « voir tous les seinen », « le détail est ici ». Sans cette
   règle ils gardent le bleu par défaut du navigateur, seule tache de couleur étrangère à
   la palette, et illisible sur fond sombre. Les cartes et boutons ont déjà la leur : on ne
   cible donc que le texte courant. */
.library-article p a,
.library-article li a,
.library-article .discover-kicker a {
    color: var(--accent-3);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.library-article p a:hover,
.library-article li a:hover,
.library-article .discover-kicker a:hover { color: var(--text); }

/* ------------------------------------------------------------------- fil d'Ariane */

.lib-crumbs { margin: 0 0 1.4rem; }
.lib-crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
    list-style: none; margin: 0; padding: 0;
    font-size: .82rem; color: var(--muted);
}
.lib-crumbs li + li::before { content: "›"; margin-right: .5rem; opacity: .6; }
.lib-crumbs a { color: var(--muted); text-decoration: none; }
.lib-crumbs a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------------------ en-tête */

.lib-head { padding: .4rem 0 1.6rem; }
.lib-head h1 {
    font-size: clamp(1.7rem, 4.5vw, 2.5rem);
    line-height: 1.15;
    margin: .2rem 0 .5rem;
}
.lib-head-wide { text-align: center; padding-bottom: 2rem; }
.lib-author { color: var(--muted); margin: 0 0 1.2rem; font-size: 1rem; }
.lib-count { color: var(--muted); font-size: .86rem; margin: .6rem 0 0; }

/* Les trois faits qu'on vient chercher : longueur, statut, public. */
.lib-facts {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin: 1.2rem 0 0; padding: 0;
}
.lib-facts > div {
    flex: 1 1 8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .7rem .85rem;
}
.lib-facts dt {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: 0 0 .25rem;
}
.lib-facts dd { margin: 0; font-weight: 600; font-size: .96rem; }

/* -------------------------------------------------------------------- la réponse */

.lib-answer { border-left: 3px solid var(--accent-3); padding-left: 1rem; }
.lib-answer-hero { text-align: center; border-left: 0; padding-left: 0; }
.lib-answer-big {
    font-size: clamp(2.4rem, 9vw, 4rem);
    font-weight: 700; line-height: 1;
    margin: .4rem 0 .6rem;
    color: var(--accent-3);
}
.lib-answer-line { font-size: 1.05rem; margin: 0; }
.lib-note { color: var(--muted); font-size: .86rem; margin: .6rem 0 0; }

.lib-detail { margin: .8rem 0 0; padding-left: 1.1rem; }
.lib-detail li { margin: .5rem 0; line-height: 1.55; }

.lib-summary { line-height: 1.6; }

/* ---------------------------------------------------------------------- les tags */

.lib-tags {
    display: flex; flex-wrap: wrap; gap: .4rem;
    list-style: none; margin: 1rem 0 0; padding: 0;
}
.lib-tags li {
    font-size: .8rem; color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .28rem .7rem;
}

/* ------------------------------------------------------------- cartes de titres */

.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .7rem;
    margin: 1rem 0 0;
}
.lib-card {
    display: flex; flex-direction: column; gap: .22rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: .85rem .95rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s ease, transform .15s ease;
}
.lib-card:hover {
    border-color: color-mix(in srgb, var(--accent-3) 45%, var(--border));
    transform: translateY(-1px);
}
.lib-card-title { font-weight: 650; font-size: .98rem; line-height: 1.25; }
.lib-card-meta { color: var(--muted); font-size: .8rem; }
.lib-card-len { color: var(--accent-3); font-size: .8rem; font-weight: 600; }
.lib-card-tags {
    color: var(--muted); font-size: .78rem; line-height: 1.4;
    margin-top: .2rem;
    /* Les thèmes tiennent en deux lignes : au-delà, les cartes d'une même rangée
       n'ont plus la même hauteur et la grille part en escalier. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------- carrefours */

.lib-facet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .7rem;
    margin: 1rem 0 0;
}
.lib-facet-card {
    display: flex; flex-direction: column; gap: .3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    text-decoration: none; color: var(--text);
    transition: border-color .15s ease;
}
.lib-facet-card:hover { border-color: color-mix(in srgb, var(--accent-3) 45%, var(--border)); }
.lib-facet-title { font-weight: 650; font-size: 1.02rem; }
.lib-facet-count { color: var(--accent-3); font-size: .8rem; font-weight: 600; }
.lib-facet-intro { color: var(--muted); font-size: .84rem; line-height: 1.45; }

.lib-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.lib-links a {
    font-size: .84rem; color: var(--muted); text-decoration: none;
    border: 1px solid var(--border); border-radius: 999px;
    padding: .35rem .8rem;
    transition: color .15s ease, border-color .15s ease;
}
.lib-links a:hover { color: var(--text); border-color: var(--accent-3); }

/* ------------------------------------------------------------------ index A-Z */

.lib-all {
    list-style: none; margin: 1rem 0 0; padding: 0;
    columns: 2; column-gap: 1.6rem;
}
.lib-all li {
    break-inside: avoid;
    display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
    padding: .34rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    font-size: .9rem;
}
.lib-all a { color: var(--text); text-decoration: none; }
.lib-all a:hover { color: var(--accent-3); text-decoration: underline; }
.lib-all span { color: var(--muted); font-size: .78rem; white-space: nowrap; }

@media (max-width: 560px) {
    .lib-all { columns: 1; }
    .lib-facts > div { flex-basis: 100%; }
}