/* =========================
       ARTICLE THEME – MARKETING
       Propre, lisible, "landing"
       ========================= */

.article-theme-marketing {
    background: var(--color-card);
    color: var(--color-text);
    padding: calc(var(--base-space-8));
    border: 1px solid var(--color-border);
    max-width: 820px;
    margin: 0 auto;
    border-radius: var(--radius-large);
    line-height: 1.75;
    box-shadow: var(--shadow-sm);
}



    /* HERO title */

    .article-theme-marketing h1 {
        margin-top: 0;
        padding: var(--base-space-8);
        background: linear-gradient(135deg, var(--primary), hsl(45, 100%, 48%));
        color: var(--black);
        border-radius: var(--radius-large);
        box-shadow: var(--shadow-md);
        text-align: center;
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -0.03em;
    }



    /* Section titles */

    .article-theme-marketing h2 {
        margin-top: calc(var(--base-space-8));
        padding-bottom: var(--base-space-2);
        border-bottom: 1px solid var(--color-border);
        color: var(--secondary);
        font-size: 26px;
        line-height: 1.2;
    }



    .article-theme-marketing h3 {
        margin-top: var(--base-space-6);
        color: var(--secondary);
        font-size: 20px;
        line-height: 1.3;
    }



    /* TEXT */

    .article-theme-marketing p,
    .article-theme-marketing li {
        font-size: 15px;
        color: var(--grey-700);
    }



    .article-theme-marketing p {
        margin-bottom: var(--base-space-6);
    }



    .article-theme-marketing ul,
    .article-theme-marketing ol {
        padding-left: 20px;
        margin-bottom: var(--base-space-6);
    }



    .article-theme-marketing li + li {
        margin-top: 8px;
    }



    /* Separator */

    .article-theme-marketing hr {
        border: 0;
        height: 1px;
        background: var(--color-border);
        margin: var(--base-space-8) 0;
    }



    /* Emphasis */

    .article-theme-marketing strong {
        color: var(--color-text);
        font-weight: 600;
    }



    /* Links */

    .article-theme-marketing a {
        color: var(--secondary);
        text-decoration: none;
        position: relative;
    }



        .article-theme-marketing a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2px;
            background: var(--primary);
            transition: transform 0.2s ease;
            transform: scaleX(0.4);
            transform-origin: left;
        }



        .article-theme-marketing a:hover::after {
            transform: scaleX(1);
        }



    /* Blockquote */

    .article-theme-marketing blockquote {
        margin: var(--base-space-8) 0;
        padding: var(--base-space-6);
        background: var(--secondary-soft);
        border-left: 4px solid var(--secondary);
        color: var(--color-text);
        border-radius: var(--radius-medium);
        box-shadow: var(--shadow-sm);
    }



    /* Images */

    .article-theme-marketing img {
        border-radius: var(--radius-large);
        border: 1px solid var(--color-border);
        max-width: 100%;
        height: auto;
        display: block;
        margin: var(--base-space-8) 0;
        box-shadow: var(--shadow-sm);
    }



    /* Code inline */

    .article-theme-marketing code {
        background: var(--secondary-soft);
        color: var(--color-text);
        padding: 3px 8px;
        border-radius: var(--radius-small);
        font-size: 0.9em;
    }



    /* Code block */

    .article-theme-marketing pre {
        background: var(--black);
        color: var(--white);
        padding: var(--base-space-6);
        border-radius: var(--radius-large);
        overflow: auto;
        margin: var(--base-space-8) 0;
        box-shadow: var(--shadow-md);
    }



    /* Tables */

    .article-theme-marketing table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-large);
        background: var(--white);
        margin: var(--base-space-8) 0;
    }



    .article-theme-marketing th {
        background: var(--secondary);
        color: var(--white);
        padding: var(--base-space-6);
        text-align: left;
    }



    .article-theme-marketing td {
        padding: var(--base-space-6);
        border-top: 1px solid var(--color-border);
    }



    .article-theme-marketing tr:nth-child(even) td {
        background: var(--secondary-soft);
    }



    /* Animation */

    .article-theme-marketing > * {
        animation: fadeIn 0.4s ease forwards;
    }