/* Blog Vroom GPS : articles existants habillés dans la DA du site (chargé après home.css).
   Les articles gardent leurs <style> inline ; on redéfinit les variables qu'ils utilisent
   et on remonte la spécificité (body.blog-page) pour imposer la nouvelle DA. */

body.blog-page {
    --primary: #673AB7;
    --primary-dark: #4A148C;
    --primary-light: #9575CD;
    --secondary: #E040FB;
    --text-dark: #1D1433;
    --text-muted: #5B5270;
    --text-light: #5B5270;
    --bg-light: #F7F4FC;
    --white: #FFFFFF;
    background: var(--paper);
}

/* ---------- Article ---------- */
body.blog-page .news-content { max-width: 800px; margin: 0 auto; padding: 112px 20px 72px; }
body.blog-page .news-banner {
    height: 380px; border-radius: 28px; margin-bottom: 36px;
    box-shadow: 0 40px 80px -40px rgba(22, 11, 46, 0.7);
}
body.blog-page .news-banner-overlay {
    background: linear-gradient(180deg, rgba(74, 20, 140, 0.92) 0%, rgba(74, 20, 140, 0.7) 45%, rgba(74, 20, 140, 0.25) 100%);
    justify-content: flex-start; align-items: flex-start; padding: 40px 44px; text-align: left;
}
body.blog-page .news-banner-version {
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--lavender);
    margin-bottom: 14px;
}
body.blog-page .news-banner-title {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 4vw, 40px); line-height: 1.08;
    text-align: left; text-shadow: none; max-width: 640px;
}
body.blog-page .news-meta { color: var(--ink-soft); font-weight: 600; margin-bottom: 36px; }
body.blog-page .news-meta a { color: var(--violet) !important; }

body.blog-page .news-body h2 {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.15;
    color: var(--violet-ink); margin: 52px 0 16px;
}
body.blog-page .news-body h3 { color: var(--violet-ink); }
body.blog-page .news-body p,
body.blog-page .news-body ul,
body.blog-page .news-body ol { color: #3E3552; font-size: 17.5px; line-height: 1.8; }
body.blog-page .news-body a { color: var(--violet); font-weight: 600; }
body.blog-page .news-body strong { color: var(--ink); }
body.blog-page .news-body .highlight {
    background: var(--white); border: 1px solid #E7DEF6; border-left: 5px solid var(--violet);
    border-radius: 0 20px 20px 0; color: var(--ink);
}
body.blog-page .news-body .section-image { border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(22, 11, 46, 0.6); }

body.blog-page .cta-box {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 56px 32px;
    background: var(--violet-deep) url('../images/home/panorama-1280.webp') 50% 70% / cover;
}
body.blog-page .cta-box::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(74, 20, 140, 0.94), rgba(74, 20, 140, 0.72)); }
body.blog-page .cta-box h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 4vw, 36px); }

body.blog-page .blog-nav a,
body.blog-page .news-lang-switch a { color: var(--violet); }

@media (max-width: 600px) {
    body.blog-page .news-content { padding-top: 96px; }
    body.blog-page .news-banner { height: 260px; border-radius: 22px; }
    body.blog-page .news-banner-overlay { padding: 26px 24px; }
}

/* ---------- Index du blog ---------- */
.blog-list { padding: 72px 0 110px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 24px; background: var(--white); border: 1px solid #E7DEF6;
    text-decoration: none; color: var(--ink);
    box-shadow: 0 24px 50px -40px rgba(74, 20, 140, 0.6);
    transition: transform .2s ease, box-shadow .2s ease;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(74, 20, 140, 0.7); }
.post-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lavender-soft); }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex: 1; }
.post-body time { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.post-body strong { font-size: 19px; line-height: 1.3; }
.post-body > span { color: var(--ink-soft); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-body em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 800; color: var(--violet); }
.post--featured { grid-column: span 3; flex-direction: row; }
.post--featured .post-img { flex: 0 0 56%; aspect-ratio: auto; min-height: 340px; }
.post--featured .post-body { justify-content: center; padding: 40px; }
.post--featured strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; color: var(--violet-ink); }

@media (max-width: 1000px) {
    .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post--featured { grid-column: span 2; }
}
@media (max-width: 680px) {
    .posts { grid-template-columns: minmax(0, 1fr); }
    .post--featured { grid-column: auto; flex-direction: column; }
    .post--featured .post-img { min-height: 0; aspect-ratio: 16 / 9; }
    .post--featured .post-body { padding: 22px 24px 24px; }
}

/* ---------- Pages partenaires historiques (Relais Motards) ---------- */
body.blog-page .pt-hero-img { height: 520px; }
body.blog-page .pt-hero-overlay { padding-top: 96px; }
body.blog-page .pt-hero h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
body.blog-page .pt-footer { display: none; }

/* ---------- Règlement du jeu-concours (/<lang>/concours|contest.html) ---------- */
body.blog-page .rules-title { font-family: var(--font-display); font-weight: 400; color: var(--violet-ink); font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; margin: 0 0 14px; }
body.blog-page .rules-lead { color: var(--ink-soft); font-size: 17px; line-height: 1.7; margin: 0 0 8px; }
body.blog-page .rules-dates { display: inline-block; margin: 14px 0 6px; padding: 7px 16px; border-radius: 999px; background: var(--lavender-soft); color: var(--violet); font-weight: 700; font-size: 14.5px; }
body.blog-page .rules-notice { margin: 22px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--white); border: 1px solid #E7DEF6; border-left: 5px solid var(--violet); color: var(--ink); font-size: 15px; line-height: 1.6; }
body.blog-page .rules-notice a { color: var(--violet); font-weight: 600; }
body.blog-page .news-body ul { padding-left: 22px; }
body.blog-page .news-body li { margin-bottom: 6px; }
body.blog-page .rules-back { margin: 10px 0 0; }
body.blog-page .rules-back a { color: var(--violet); font-weight: 700; text-decoration: none; }
body.blog-page .rules-back a:hover { text-decoration: underline; }