/* ============================================================
   ARCHIVE FORMATIONS — catalogue
   Réf. maquette : _claude/shokola-formations-catalogue.html
   Tokens : framework Kakao (--color-*, --shk-*, --font-*).
   Filtrage client par thème (catalogue.js).
   ============================================================ */
.shk-fcat {
    background: var(--color-paper);
    color: var(--color-dark);
    font-family: var(--font-1);
}

/* --- Intro --- */
.shk-fcat__intro { position: relative; padding: 150px 0 clamp(26px, 3.5vw, 42px); overflow: hidden; }
.shk-fcat__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-fcat__intro-in { position: relative; z-index: 1; }
.shk-fcat__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-fcat__title em { font-family: var(--font-3); font-style: italic; font-weight: 500; color: var(--color-secondaire); }
.shk-fcat__lead { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--color-ink-2); max-width: 62ch; line-height: 1.6; }

.shk-fcat__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.shk-fcat__badge {
    font-family: var(--font-2);
    font-size: .7rem;
    letter-spacing: .04em;
    border: 1px solid var(--shk-line);
    padding: 6px 11px;
    border-radius: 4px;
    color: var(--color-ink-soft);
}
.shk-fcat__badge.on { border-color: var(--color-secondaire); color: var(--color-secondaire); }

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

/* Barre de filtres */
.shk-fcat__bar { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 3.5vw, 40px) 0 clamp(26px, 3.5vw, 42px); }
.shk-fcat__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-fcat__btn:hover { border-color: var(--color-dark); }
.shk-fcat__btn.is-on { background: var(--color-dark); color: var(--color-paper); border-color: var(--color-dark); }
.shk-fcat__btn .c { opacity: .5; margin-left: 7px; }

/* Grille de cartes */
.shk-fcat__grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.shk-fcat__card {
    position: relative;
    border: 1px solid var(--shk-line);
    border-radius: 6px;
    padding: clamp(22px, 2.2vw, 28px);
    background: var(--color-paper);
    display: flex;
    flex-direction: column;
    min-height: 210px;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .4s;
}
.shk-fcat__card:hover { transform: translateY(-4px); border-color: var(--color-dark); box-shadow: 0 22px 48px rgba(20, 21, 26, .08); }
.shk-fcat__card.hidden { display: none; }
.shk-fcat__card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.shk-fcat__card-top .th {
    font-family: var(--font-2);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-secondaire);
}
.shk-fcat__card-top .lvl {
    font-family: var(--font-2);
    font-size: .64rem;
    border: 1px solid var(--shk-line);
    padding: 3px 8px;
    border-radius: 3px;
    color: var(--color-ink-soft);
    flex: none;
}
.shk-fcat__card h3 { font-weight: 800; font-size: clamp(1.05rem, 1.25vw, 1.2rem); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.shk-fcat__card p { font-size: .92rem; color: var(--color-ink-soft); line-height: 1.5; flex: 1; }
.shk-fcat__card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--shk-line); }
.shk-fcat__card-foot .meta { font-family: var(--font-2); font-size: .72rem; color: var(--color-ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.shk-fcat__card-foot .meta b { color: var(--color-dark); font-weight: 500; }
.shk-fcat__card-foot .go { font-family: var(--font-2); font-size: .9rem; transition: transform .35s, color .35s; }
.shk-fcat__card:hover .go { transform: translateX(4px); color: var(--color-secondaire); }

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

/* Encart sur-mesure */
.shk-fcat__help {
    margin-top: clamp(34px, 4.5vw, 56px);
    border: 1px solid var(--shk-line);
    border-radius: 8px;
    background: var(--color-paper-2);
    padding: clamp(24px, 3vw, 34px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
}
.shk-fcat__help h3 { font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -.02em; margin-bottom: 8px; }
.shk-fcat__help p { color: var(--color-ink-soft); font-size: .98rem; line-height: 1.55; max-width: 70ch; }
.shk-fcat__help p b { color: var(--color-dark); font-weight: 700; }
.shk-fcat__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-family: var(--font-2);
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .04em;
    padding: 16px 24px;
    border-radius: 2px;
    background: var(--color-dark);
    color: var(--color-paper);
    transition: background .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.shk-fcat__cta:hover { background: var(--color-secondaire); }
.shk-fcat__cta .arrow { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.shk-fcat__cta:hover .arrow { transform: translateX(5px); }

@media (max-width: 1080px) { .shk-fcat__grid-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
    .shk-fcat__grid-cards { grid-template-columns: 1fr; }
    .shk-fcat__help { grid-template-columns: 1fr; }
}