/* ══════════════════════════════════════════
   MYSTIK STUDIO — Article Blog
══════════════════════════════════════════ */

/* Hero article */
.article-hero {
    padding: calc(var(--header-h) + 5rem) 5vw 4rem;
    background: var(--carbon);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.article-hero__inner { max-width: 780px; margin: 0 auto; }

.article-meta-top {
    display: flex; align-items: center; gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.article-tag {
    font-size: .65rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--green);
    background: rgba(42,157,143,.1);
    padding: .3rem .8rem; border-radius: 99px;
    border: 1px solid rgba(42,157,143,.25);
}
.article-date {
    font-size: .75rem; color: rgba(255,255,255,.35); font-weight: 400;
}

.article-title {
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 800; line-height: 1.08;
    letter-spacing: -.03em; margin-bottom: 1.2rem;
}
.article-lead {
    font-size: 1.12rem; font-weight: 300; line-height: 1.75;
    color: rgba(255,255,255,.6); margin-bottom: 2rem;
}

.article-author {
    display: flex; align-items: center; gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.author-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bordeaux);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; color: var(--yellow);
    flex-shrink: 0;
}
.article-author strong { display: block; font-size: .9rem; }
.article-author span { font-size: .75rem; color: rgba(255,255,255,.35); }

/* Image cover */
.article-cover {
    width: 100%; max-height: 520px; overflow: hidden;
}
.article-cover img {
    width: 100%; height: 520px; object-fit: cover;
}

/* Corps */
.article-body {
    max-width: 780px; margin: 0 auto;
    padding: 4rem 5vw;
}
.article-body h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 800; letter-spacing: -.02em;
    margin: 2.5rem 0 1rem;
    color: #fff;
}
.article-body p {
    font-size: 1rem; font-weight: 300;
    color: rgba(255,255,255,.65); line-height: 1.9;
    margin-bottom: 1.2rem;
}
.article-body strong { color: #fff; font-weight: 600; }

.article-quote {
    border-left: 3px solid var(--green);
    padding: 1.2rem 2rem;
    margin: 2.5rem 0;
    background: rgba(42,157,143,.05);
    border-radius: 0 10px 10px 0;
}
.article-quote p {
    font-size: 1.15rem; font-style: italic;
    color: rgba(255,255,255,.8); line-height: 1.7;
    margin: 0;
}

.article-list {
    list-style: none; margin: 1rem 0 1.5rem;
    display: flex; flex-direction: column; gap: .7rem;
}
.article-list li {
    padding-left: 1.5rem; position: relative;
    font-size: .97rem; font-weight: 300;
    color: rgba(255,255,255,.65); line-height: 1.7;
}
.article-list li::before {
    content: '→'; position: absolute; left: 0;
    color: var(--green); font-weight: 700;
}

/* CTA fin d'article */
.article-cta {
    text-align: center;
    padding: 5rem 5vw;
    background: var(--bordeaux);
}
.article-cta .eyebrow { margin-bottom: .8rem; }
.article-cta h2 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800; letter-spacing: -.025em;
    margin-bottom: 1.5rem;
}

/* Articles liés */
.article-related {
    padding: 5rem 5vw;
    background: var(--carbon2, #181818);
}
.article-related .eyebrow { margin-bottom: 1rem; text-align: center; }
.article-related__grid {
    display: grid; grid-template-columns: repeat(2,1fr);
    gap: 1.5rem; max-width: 900px; margin: 2rem auto 0;
}
.related-card {
    display: block; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: border-color .3s, transform .3s;
}
.related-card:hover { border-color: rgba(42,157,143,.3); transform: translateY(-4px); }
.related-card__img { height: 180px; overflow: hidden; }
.related-card__img img { width:100%; height:100%; object-fit: cover; }
.related-card .article-tag { display:block; margin: 1rem 1.2rem .4rem; }
.related-card h3 { padding: 0 1.2rem 1.5rem; font-size:.95rem; font-weight:700; line-height:1.35; }

@media(max-width:640px) {
    .article-related__grid { grid-template-columns: 1fr; }
}