/* ============================================================
   ARCHIVE ARTICLES — journal / blog
   Intro + barre de filtres catégorie (rendu client via catalogue.js).
   Réutilise le composant carte .shk-journal-post (blocs/shokola_journal/journal.css).
   Tokens : framework Kakao (--color-*, --shk-*, --font-*).
   ============================================================ */
.shk-jcat {
    background: var(--color-paper);
    color: var(--color-dark);
    font-family: var(--font-1);
}

/* --- Intro --- */
.shk-jcat__intro { position: relative; padding: 150px 0 clamp(26px, 3.5vw, 42px); overflow: hidden; }
.shk-jcat__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(var(--shk-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--shk-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 70% 30%, #000, transparent 78%);
    opacity: .4;
    pointer-events: none;
}
.shk-jcat__intro-in { position: relative; z-index: 1; }
.shk-jcat__title {
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .98;
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    max-width: 20ch;
    margin: 16px 0 20px;
}
.shk-jcat__title em { font-family: var(--font-3); font-style: italic; font-weight: 500; color: var(--color-secondaire); }
.shk-jcat__lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--color-ink-2); max-width: 62ch; line-height: 1.6; }

/* --- Section listing --- */
.shk-jcat__sec { padding-top: 0; padding-bottom: var(--shk-sec); }

/* Barre de filtres */
.shk-jcat__bar { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 3.5vw, 40px) 0 clamp(26px, 3.5vw, 42px); }
.shk-jcat__btn {
    font-family: var(--font-2);
    font-size: .8rem;
    padding: 10px 17px;
    border: 1px solid var(--shk-line);
    border-radius: 30px;
    background: var(--color-paper);
    color: var(--color-dark);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}
.shk-jcat__btn:hover { border-color: var(--color-dark); }
.shk-jcat__btn.is-on { background: var(--color-dark); color: var(--color-paper); border-color: var(--color-dark); }
.shk-jcat__btn .c { opacity: .5; margin-left: 7px; }

/* Carte masquée par le filtre client */
.shk-journal-post.hidden { display: none; }

.shk-jcat__empty { display: none; font-family: var(--font-2); color: var(--color-ink-soft); padding: 40px 0; }
.shk-jcat__none { font-family: var(--font-2); color: var(--color-ink-soft); padding: 40px 0; }

/* Pagination (archives tag / date / auteur) */
.shk-jcat__pagination { margin-top: clamp(34px, 4.5vw, 56px); }
.shk-jcat__pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shk-jcat__pagination .page-numbers {
    font-family: var(--font-2);
    font-size: .82rem;
    padding: 9px 15px;
    border: 1px solid var(--shk-line);
    border-radius: 30px;
    color: var(--color-dark);
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
}
.shk-jcat__pagination .page-numbers:hover { border-color: var(--color-dark); }
.shk-jcat__pagination .page-numbers.current { background: var(--color-dark); color: var(--color-paper); border-color: var(--color-dark); }
.shk-jcat__pagination .page-numbers.dots { border: 0; }

@media (max-width: 820px) {
    .shk-jcat__intro { padding-top: 110px; }
}