/**
 * ============================================================================
 * COURSMARKETING.FR — BLOG / CATÉGORIES
 * ============================================================================
 *
 * Styles réservés aux archives éditoriales et catégories.
 *
 * Cette première couche couvre uniquement le rendu desktop.
 * Le responsive sera traité séparément après validation visuelle.
 * ============================================================================
 */


/* ==========================================================================
   PAGE CATÉGORIE — BASE
   ========================================================================== */

.cm-category {
    background: #f7f9fc;
    color: #0f172a;
}

.cm-category *,
.cm-category *::before,
.cm-category *::after {
    box-sizing: border-box;
}

.cm-category a {
    text-decoration: none;
}

.cm-category-container {
    width: min(100% - 48px, 1240px);
    margin: 0 auto;
    padding: 34px 0 72px;
}


/* ==========================================================================
   FIL D'ARIANE
   ========================================================================== */

.cm-category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin: 0 0 31px;

    color: #8490a3;

    font-size: 13px;
    line-height: 1.5;
}

.cm-category-breadcrumb a {
    color: #6c788b;

    transition:
        color 160ms ease;
}

.cm-category-breadcrumb a:hover,
.cm-category-breadcrumb a:focus-visible {
    color: #1268f5;
}

.cm-category-breadcrumb-separator {
    color: #b2bac7;
}

.cm-category-breadcrumb-current {
    color: #3d495c;
    font-weight: 600;
}


/* ==========================================================================
   HERO CATÉGORIE
   ========================================================================== */

.cm-category-hero {
    display: flex;
    align-items: center;

    gap: 25px;

    margin: 0 0 54px;
}

.cm-category-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 92px;
    height: 92px;

    border-radius: 50%;

    background: #eaf3ff;
}

.cm-category-hero-icon img {
    display: block;

    width: 56px;
    height: 56px;

    object-fit: contain;
}

.cm-category-hero-content {
    min-width: 0;
}

.cm-category-eyebrow {
    margin: 0 0 6px;

    color: #1268f5;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cm-category-title {
    margin: 0;

    color: #0b1730;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.04;
    font-weight: 800;

    letter-spacing: -0.045em;
}

.cm-category-description {
    max-width: 720px;

    margin: 14px 0 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.68;
}

.cm-category-description p {
    margin: 0;
}

.cm-category-count {
    margin: 12px 0 0;

    color: #7b8798;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}


/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */

.cm-category-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(290px, 345px);

    gap: 46px;

    align-items: start;
}

.cm-category-main-column {
    min-width: 0;
}


/* ==========================================================================
   EN-TÊTE ARTICLES
   ========================================================================== */

.cm-category-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 0 23px;
}

.cm-category-section-header h2 {
    margin: 0;

    color: #101828;

    font-size: 28px;
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -0.025em;
}


/* ==========================================================================
   LISTE DES ARTICLES
   ========================================================================== */

.cm-category-articles-list {
    display: grid;

    gap: 20px;
}

.cm-category-article-card {
    display: grid;

    grid-template-columns:
        minmax(210px, 265px)
        minmax(0, 1fr);

    min-height: 190px;

    overflow: hidden;

    border: 1px solid #e6eaf0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 2px 3px rgba(16, 24, 40, 0.02),
        0 8px 24px rgba(16, 24, 40, 0.035);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.cm-category-article-card:hover {
    transform: translateY(-2px);

    border-color: #d8e0ea;

    box-shadow:
        0 3px 6px rgba(16, 24, 40, 0.035),
        0 14px 32px rgba(16, 24, 40, 0.065);
}

.cm-category-article-image {
    display: block;
    align-self: center;

    width: 100%;
    height: auto;
    min-height: 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #edf2f7;
}

.cm-category-article-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 260ms ease;
}

.cm-category-article-card:hover .cm-category-article-image img {
    transform: scale(1.025);
}

.cm-category-article-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    padding: 24px 26px;
}

.cm-category-article-meta {
    margin: 0 0 9px;

    color: #8b95a5;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

.cm-category-article-title {
    margin: 0;

    color: #101828;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 800;

    letter-spacing: -0.02em;
}

.cm-category-article-title a {
    color: inherit;
}

.cm-category-article-title a:hover,
.cm-category-article-title a:focus-visible {
    color: #1268f5;
}

.cm-category-article-excerpt {
    margin: 11px 0 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.65;
}

.cm-category-article-excerpt p {
    margin: 0;
}

.cm-category-article-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-top: auto;
    padding-top: 18px;

    color: #1268f5;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.cm-category-article-link:hover,
.cm-category-article-link:focus-visible {
    color: #0c55d4;
}


/* ==========================================================================
   ÉTAT VIDE
   ========================================================================== */

.cm-category-empty {
    margin: 0;

    padding: 34px 36px;

    border: 1px solid #e4e9f0;
    border-radius: 14px;

    background: #ffffff;

    color: #707b8d;

    font-size: 14px;
    line-height: 1.6;

    box-shadow:
        0 5px 20px rgba(16, 24, 40, 0.025);
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.cm-category-sidebar {
    display: grid;

    gap: 22px;
}

.cm-category-sidebar-card {
    padding: 25px 26px;

    border: 1px solid #e6eaf0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 22px rgba(16, 24, 40, 0.035);
}

.cm-category-sidebar-card h2 {
    margin: 0 0 13px;

    color: #101828;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;

    letter-spacing: -0.018em;
}

.cm-category-sidebar-card p {
    margin: 0;

    color: #667085;

    font-size: 13px;
    line-height: 1.65;
}


/* ==========================================================================
   SIDEBAR — NOTRE MISSION
   ========================================================================== */

.cm-category-mission {
    border-top: 3px solid #1268f5;
}

.cm-category-sidebar-link {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-top: 17px;

    color: #1268f5;

    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.cm-category-sidebar-link:hover,
.cm-category-sidebar-link:focus-visible {
    color: #0c55d4;
}


/* ==========================================================================
   SIDEBAR — CATÉGORIES
   ========================================================================== */

.cm-category-sidebar-category-list {
    display: grid;

    gap: 5px;

    margin: 2px 0 0;
    padding: 0;

    list-style: none;
}

.cm-category-sidebar-category-list li {
    margin: 0;
    padding: 0;
}

.cm-category-sidebar-category-list a {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    min-height: 45px;

    padding: 6px 8px;

    border-radius: 9px;

    color: #465266;

    transition:
        background-color 150ms ease,
        color 150ms ease;
}

.cm-category-sidebar-category-list a:hover,
.cm-category-sidebar-category-list a:focus-visible {
    background: #f4f7fb;

    color: #1268f5;
}

.cm-category-sidebar-category-list .is-current a {
    background: #eef5ff;

    color: #1268f5;
    font-weight: 700;
}

.cm-category-sidebar-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: #eef5ff;
}

.cm-category-sidebar-category-icon img {
    display: block;

    width: 22px;
    height: 22px;

    object-fit: contain;
}

.cm-category-sidebar-category-name {
    min-width: 0;

    font-size: 13px;
    line-height: 1.4;
}

.cm-category-sidebar-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 27px;
    height: 24px;

    padding: 0 7px;

    border-radius: 999px;

    background: #f2f4f7;

    color: #7d8796;

    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

.cm-category-sidebar-category-list .is-current
.cm-category-sidebar-category-count {
    background: #dceaff;

    color: #1268f5;
}


/* ==========================================================================
   SIDEBAR — KREABOARD
   ========================================================================== */

.cm-category-sidebar-kreaboard {
    border: 0;

    background:
        linear-gradient(
            145deg,
            #082b66 0%,
            #0b3f91 60%,
            #1268f5 100%
        );

    color: #ffffff;

    box-shadow:
        0 13px 32px rgba(13, 66, 143, 0.18);
}

.cm-category-sidebar-kreaboard-eyebrow {
    margin-bottom: 6px !important;

    color: #9ec9ff !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cm-category-sidebar-kreaboard h2 {
    margin-bottom: 10px;

    color: #ffffff;
}

.cm-category-sidebar-kreaboard > p:not(
    .cm-category-sidebar-kreaboard-eyebrow
) {
    color: rgba(255, 255, 255, 0.76);
}

.cm-category-sidebar-kreaboard-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 40px;

    margin-top: 18px;
    padding: 0 16px;

    border-radius: 8px;

    background: #ffffff;

    color: #0f55d8;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.12);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}

.cm-category-sidebar-kreaboard-button:hover,
.cm-category-sidebar-kreaboard-button:focus-visible {
    transform: translateY(-1px);

    color: #0b47b8;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16);
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.cm-category-pagination {
    margin-top: 32px;
}

.cm-category-pagination .nav-links {
    display: flex;
    align-items: center;

    gap: 8px;
}

.cm-category-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding: 0 11px;

    border: 1px solid #e1e6ed;
    border-radius: 8px;

    background: #ffffff;

    color: #566174;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.cm-category-pagination .page-numbers.current {
    border-color: #1268f5;

    background: #1268f5;

    color: #ffffff;
}

.cm-category-pagination a.page-numbers:hover,
.cm-category-pagination a.page-numbers:focus-visible {
    border-color: #c5d9fb;

    background: #eef5ff;

    color: #1268f5;
}


/* ==========================================================================
   GRAND CTA KREABOARD
   ========================================================================== */

.cm-category-kreaboard {
    margin-top: 62px;
}

.cm-category-kreaboard-panel {
    display: grid;

    grid-template-columns:
        minmax(210px, 0.8fr)
        minmax(0, 1.6fr)
        auto;

    align-items: center;

    gap: 36px;

    min-height: 210px;

    padding: 31px 38px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #071b3d 0%,
            #092a5d 52%,
            #0d4caa 100%
        );

    color: #ffffff;

    box-shadow:
        0 18px 42px rgba(7, 35, 79, 0.17);
}

.cm-category-kreaboard-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.cm-category-kreaboard-visual img {
    display: block;

    width: min(100%, 230px);
    height: auto;

    object-fit: contain;
}

.cm-category-kreaboard-copy {
    min-width: 0;
}

.cm-category-kreaboard-eyebrow {
    margin: 0 0 7px;

    color: #9fc7ff;

    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cm-category-kreaboard-copy h2 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -0.025em;
}

.cm-category-kreaboard-copy h2 strong {
    color: #3d91ff;
}

.cm-category-kreaboard-intro {
    max-width: 620px;

    margin: 11px 0 0;

    color: rgba(255, 255, 255, 0.73);

    font-size: 12px;
    line-height: 1.6;
}

.cm-category-kreaboard-intro strong {
    color: #ffffff;
}

.cm-category-kreaboard-benefits {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px 20px;

    max-width: 610px;

    margin: 17px 0 0;
    padding: 0;

    list-style: none;
}

.cm-category-kreaboard-benefits li {
    position: relative;

    margin: 0;
    padding-left: 17px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;
    line-height: 1.45;
}

.cm-category-kreaboard-benefits li::before {
    content: "✓";

    position: absolute;
    top: 0;
    left: 0;

    color: #4b9cff;

    font-weight: 900;
}

.cm-category-kreaboard-benefits strong {
    color: #ffffff;
}

.cm-category-kreaboard-action {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    min-width: 175px;
}

.cm-category-kreaboard-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 43px;

    padding: 0 19px;

    border-radius: 9px;

    background: #1268f5;

    color: #ffffff;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 8px 22px rgba(18, 104, 245, 0.3);

    transition:
        background-color 150ms ease,
        transform 150ms ease;
}

.cm-category-kreaboard-button:hover,
.cm-category-kreaboard-button:focus-visible {
    transform: translateY(-1px);

    background: #2a7bf6;

    color: #ffffff;
}

.cm-category-kreaboard-note {
    color: rgba(255, 255, 255, 0.55);

    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}


/* ==========================================================================
   FOCUS ACCESSIBLE
   ========================================================================== */

.cm-category a:focus-visible {
    outline: 3px solid rgba(18, 104, 245, 0.28);
    outline-offset: 3px;
}

/* ==========================================================================
   SIDEBAR — ARTICLES POPULAIRES
   ========================================================================== */

.cm-category-popular {
    padding: 25px 26px;
}

.cm-category-popular h2 {
    margin-bottom: 14px;
}

.cm-category-popular-list {
    display: grid;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.cm-category-popular-item {
    margin: 0;
    padding: 0;

    border-top: 1px solid #edf1f5;
}

.cm-category-popular-item:first-child {
    border-top: 0;
}

.cm-category-popular-link {
    display: grid;

    grid-template-columns:
        74px
        minmax(0, 1fr);

    gap: 12px;
    align-items: center;

    padding: 12px 0;

    color: inherit;
    text-decoration: none;
}

.cm-category-popular-image {
    display: block;

    width: 74px;

    aspect-ratio: 1200 / 630;

    overflow: hidden;

    border-radius: 7px;

    background: #edf2f7;
}

.cm-category-popular-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.cm-category-popular-copy {
    display: grid;

    gap: 6px;

    min-width: 0;
}

.cm-category-popular-item:first-child .cm-category-popular-link {
    padding-top: 0;
}

.cm-category-popular-item:last-child .cm-category-popular-link {
    padding-bottom: 0;
}

.cm-category-popular-title {
    color: #071b35;

    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.cm-category-popular-views {
    color: #8a94a3;

    font-size: 10px;
    line-height: 1.4;
}

.cm-category-popular-link:hover .cm-category-popular-title,
.cm-category-popular-link:focus-visible .cm-category-popular-title {
    color: #1268f5;
}

.cm-category-popular-empty {
    padding: 14px 15px;

    border-radius: 9px;

    background: #f7f9fc;

    color: #7a8596 !important;

    font-size: 12px !important;
    line-height: 1.55 !important;
}