/* ============================================================
   ARCHIVE RÉALISATIONS — catalogue
   Réf. maquette : _claude/shokola-realisations-catalogue.html
   Réutilise le composant carte du bloc shokola_projets (.shk-works*).
   Tokens : framework Kakao (--color-*, --shk-*, --font-*).
   ============================================================ */
.shk-rcat {
    background: var(--color-paper);
    color: var(--color-dark);
    font-family: var(--font-1);
}

/* --- Intro --- */
.shk-rcat__intro {
    position: relative;
    padding: 150px 0 clamp(30px, 4vw, 48px);
    overflow: hidden;
}
.shk-rcat__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .4;
    pointer-events: none;
    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: radial-gradient(circle at 70% 30%, #000, transparent 78%);
    mask: radial-gradient(circle at 70% 30%, #000, transparent 78%);
}
.shk-rcat__intro-in {
    position: relative;
    z-index: 1;
}
.shk-rcat__title {
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .98;
    font-size: clamp(2.2rem, 5.2vw, 4.4rem);
    max-width: 18ch;
    margin: 16px 0 20px;
}
.shk-rcat__title em {
    font-family: var(--font-3);
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondaire);
}
.shk-rcat__lead {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--color-ink-2);
    max-width: 60ch;
    line-height: 1.6;
}

/* --- Section grille --- */
.shk-rcat__works {
    padding-bottom: var(--shk-sec);
}

/* --- Barre de filtres (compteurs) --- */
.shk-rcat__bar {
    margin: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 46px);
}
.shk-rcat__c {
    opacity: .5;
    margin-left: 7px;
}

/* --- Note éditoriale --- */
.shk-rcat__note {
    font-family: var(--font-2);
    font-size: .76rem;
    color: var(--color-ink-soft);
    margin-top: clamp(30px, 4vw, 48px);
    padding-top: 20px;
    border-top: 1px solid var(--shk-line);
    line-height: 1.6;
    max-width: 80ch;
}
.shk-rcat__note b {
    color: var(--color-dark);
}

/* --- État vide --- */
.shk-rcat__empty {
    display: none;
    font-family: var(--font-2);
    color: var(--color-ink-soft);
    padding: 40px 0;
}