/* blog.css — Guide Marseille Mobilité (/infos-guide et /infos-guide/<slug>) — 2026-10-02
   Complète mm-pages.css (encadrés .mm-note/.mm-info, .mm-table, .mm-faq, .mm-badge réutilisables dans les articles). */
:root{--bg-ink:#0f172a;--bg-text:#334155;--bg-muted:#64748b;--bg-line:#e2e8f0;--bg-brand:#0f766e;--bg-brand-2:#0f766e;--bg-tint:#f0fdfa}

/* ---------- En-tête (héros en flux, neutralise le h1 absolu global de style_new.css) ---------- */
.bg-hero{position:relative;overflow:hidden;border-radius:16px;margin:24px 0 22px;padding:30px 30px 26px;color:#fff;
  background:linear-gradient(120deg,#0f766e 0%,#115e59 55%,#155e75 100%)}
.bg-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 25%,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 45%)}
.bg-hero .bg-hero-ic{position:absolute;right:26px;bottom:10px;font-size:110px;color:rgba(255,255,255,.13);line-height:1}
.bg-hero h1{position:static !important;transform:none !important;top:auto !important;left:auto !important;
  background:none !important;width:auto !important;padding:0 !important;margin:0 0 8px !important;border-radius:0 !important;
  font-size:2rem !important;line-height:1.2 !important;color:#fff !important;z-index:1;max-width:820px}
.bg-hero p{position:relative;z-index:1;margin:0;max-width:720px;color:#e6fffb;font-size:1.02rem;line-height:1.55}
.bg-hero .bg-crumb{position:relative;z-index:1;font-size:.85rem;margin:0 0 12px;color:#ccfbf1}
.bg-hero .bg-crumb a{color:#fff;text-decoration:underline}
.bg-hero .bg-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:.88rem;color:#ccfbf1}
.bg-hero .bg-meta i{margin-right:5px}
@media(max-width:767px){
  .bg-hero{padding:20px 16px 18px;margin:14px 0 16px;border-radius:12px}
  .bg-hero h1{font-size:1.45rem !important}
  .bg-hero .bg-hero-ic{font-size:64px;right:10px}
}

/* ---------- Bandeau brouillon (prévisualisation locale) ---------- */
.bg-draft{background:#fef3c7;border:2px dashed #d97706;color:#78350f;border-radius:10px;padding:10px 14px;margin:16px 0 0;font-weight:700}
.bg-draft small{font-weight:400;display:block}
.bg-card-draft{outline:2px dashed #d97706;outline-offset:-2px}

/* ---------- Puces de catégorie ---------- */
.bg-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.bg-cats a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--bg-line);
  background:#fff;color:var(--bg-ink);font-size:.92rem;font-weight:600;text-decoration:none;min-height:40px}
.bg-cats a:hover{border-color:var(--bg-brand-2);color:var(--bg-brand)}
.bg-cats a[aria-current="page"]{background:var(--bg-brand);border-color:var(--bg-brand);color:#fff}
.bg-cats .bg-n{font-weight:500;opacity:.75;font-size:.82rem}
.bg-chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;letter-spacing:.01em;padding:3px 9px;border-radius:999px;
  background:#e2e8f0;color:#1e293b;text-decoration:none}
.bg-chip.c1{background:#ccfbf1;color:#115e59}.bg-chip.c2{background:#fef3c7;color:#92400e}
.bg-chip.c3{background:#dbeafe;color:#1e40af}.bg-chip.c4{background:#fce7f3;color:#9d174d}
.bg-hero .bg-chip{background:rgba(255,255,255,.18);color:#fff}

/* ---------- Liste des articles ---------- */
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0 0 30px}
@media(max-width:991px){.bg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bg-grid{grid-template-columns:1fr;gap:16px}}
.bg-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bg-line);border-radius:14px;
  padding:18px 18px 16px;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:box-shadow .15s,transform .15s}
.bg-card:hover{box-shadow:0 10px 26px rgba(15,23,42,.10);transform:translateY(-2px)}
.bg-card img{width:calc(100% + 36px);margin:-18px -18px 14px;height:170px;object-fit:cover;border-radius:14px 14px 0 0}
.bg-card h2{font-size:1.12rem !important;line-height:1.35;margin:10px 0 8px;border:0;color:var(--bg-ink)}
.bg-card h2 a{color:var(--bg-ink);text-decoration:none}
.bg-card h2 a::after,.bg-card h3 a::after{content:"";position:absolute;inset:0;border-radius:14px} /* carte entièrement cliquable */
.bg-card h2 a:hover{color:var(--bg-brand)}
.bg-card p{font-size:.95rem;line-height:1.55;color:var(--bg-text);margin:0 0 12px}
.bg-card .bg-card-meta{margin-top:auto;font-size:.82rem;color:var(--bg-muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.bg-card .bg-chip{position:relative;z-index:1;align-self:flex-start}
.bg-feature{grid-column:1/-1;padding:24px 26px;background:linear-gradient(180deg,#f0fdfa 0,#fff 70%);border-color:#99f6e4}
.bg-feature h2{font-size:1.5rem !important}
.bg-feature p{font-size:1.02rem;max-width:820px}
@media(max-width:600px){.bg-feature{padding:18px}.bg-feature h2{font-size:1.2rem !important}}

/* ---------- État vide + liens utiles ---------- */
.bg-empty{background:var(--bg-tint);border:1px solid #99f6e4;border-radius:12px;padding:16px 18px;color:#134e4a;margin:0 0 26px}
.bg-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:10px 0 34px;padding:0;list-style:none}
.bg-links a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--bg-line);border-radius:12px;background:#fff;
  color:var(--bg-ink);font-weight:600;text-decoration:none;min-height:48px}
.bg-links a:hover{border-color:var(--bg-brand-2);color:var(--bg-brand)}
.bg-links i{width:34px;height:34px;border-radius:50%;background:#ccfbf1;color:var(--bg-brand);display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.bg-section-title{font-size:1.25rem !important;margin:8px 0 12px;border:0;color:var(--bg-ink)}

/* ---------- Article ---------- */
.bg-article-wrap{max-width:780px;margin:0 auto}
.bg-lead{font-size:1.12rem;line-height:1.65;color:#1f2937;margin:0 0 18px;font-weight:500}
.bg-toc{background:#f8fafc;border:1px solid var(--bg-line);border-radius:12px;padding:12px 16px;margin:0 0 26px}
.bg-toc summary{cursor:pointer;font-weight:700;color:var(--bg-ink);list-style-position:outside}
.bg-toc ol{margin:10px 0 2px;padding-left:1.3em;columns:2;column-gap:28px}
.bg-toc li{margin:.25em 0;break-inside:avoid;font-size:.95rem}
.bg-toc a{color:var(--bg-brand);text-decoration:none}
.bg-toc a:hover{text-decoration:underline}
@media(max-width:600px){.bg-toc ol{columns:1}}

.article-body{font-size:1.06rem;line-height:1.75;color:var(--bg-text);overflow-wrap:break-word}
.article-body h2{font-size:1.5rem;font-weight:800;color:var(--bg-ink);margin:1.9em 0 .55em;padding-top:.9em;border-top:1px solid var(--bg-line);scroll-margin-top:80px}
.article-body h3{font-size:1.2rem;font-weight:700;color:var(--bg-ink);margin:1.5em 0 .45em;scroll-margin-top:80px}
.article-body h4{font-size:1.05rem;font-weight:700;color:var(--bg-ink);margin:1.2em 0 .4em}
.article-body p{margin:0 0 1em}
.article-body ul,.article-body ol{margin:0 0 1.1em;padding-left:1.4em}
.article-body li{margin:.35em 0}
.article-body a{color:var(--bg-brand);text-decoration:underline;text-underline-offset:2px}
.article-body strong,.article-body b{color:#1e293b}
.article-body blockquote{border-left:4px solid var(--bg-brand-2);margin:1.3em 0;padding:.6em 1.1em;background:var(--bg-tint);color:#475569;border-radius:0 8px 8px 0}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body img{max-width:100%;height:auto;border-radius:10px;margin:1em 0}
.article-body figure{margin:1.3em 0}.article-body figcaption{font-size:.85rem;color:var(--bg-muted);text-align:center}
.article-body sup{color:var(--bg-brand);font-weight:700}
.article-body hr{border:0;border-top:1px solid var(--bg-line);margin:2em 0}
.article-body code{background:#f1f5f9;padding:.1em .35em;border-radius:4px;font-size:.92em}
/* Encadrés génériques (en plus de .mm-note / .mm-info) */
.article-body .mm-note,.article-body .mm-info,.article-body .encadre,.article-body .callout,.article-body aside{border-radius:8px;margin:1.4em 0}
.article-body .encadre,.article-body .callout,.article-body aside:not(.mm-sources){background:#f8fafc;border:1px solid var(--bg-line);border-left:4px solid var(--bg-brand-2);padding:12px 16px}
.article-body .mm-note p:last-child,.article-body .mm-info p:last-child,.article-body .encadre p:last-child,.article-body .callout p:last-child{margin-bottom:0}
.article-body .mm-cards{margin:1.4em 0}
/* Tableaux : défilement horizontal sur mobile, quel que soit le balisage */
.article-body .blog-table-wrap,.article-body .mm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0 1.5em;border-radius:8px}
.article-body table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45;min-width:480px}
.article-body th{background:var(--bg-brand);color:#fff;font-weight:700}
.article-body th,.article-body td{border:1px solid #cbd5e1;padding:9px 12px;text-align:left;vertical-align:top}
.article-body tr:nth-child(even) td{background:#f8fafc}
.article-body caption{caption-side:bottom;font-size:.85rem;color:var(--bg-muted);padding-top:6px;text-align:left}
/* FAQ en <details> */
.article-body details{border:1px solid var(--bg-line);border-radius:10px;padding:12px 16px;margin:0 0 10px;background:#fff}
.article-body details[open]{border-color:#99f6e4}
.article-body summary{cursor:pointer;font-weight:700;color:var(--bg-ink)}
.article-body details > *:not(summary){margin-top:10px}
.article-body .mm-sources{margin-top:2.2em}

.bg-note{font-size:.88rem;color:var(--bg-muted);border-top:1px solid var(--bg-line);margin-top:28px;padding-top:14px}
.bg-cta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.bg-cta a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:var(--bg-brand);color:#fff;font-weight:700;text-decoration:none;min-height:44px}
.bg-cta a.alt{background:#fff;color:var(--bg-brand);border:1px solid #99f6e4}
.bg-cta a:hover{filter:brightness(1.08)}
.bg-related{margin:34px 0 10px}
.bg-related .bg-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bg-related .bg-grid{grid-template-columns:1fr}}
.bg-back{display:inline-block;margin:6px 0 30px;color:var(--bg-brand);font-weight:600}
/* Le thème retire les puces (list-style:none) : on les rétablit dans le corps d'article et le sommaire. */
.article-body ul{list-style:disc}.article-body ol,.bg-toc ol{list-style:decimal}
.article-body ul ul{list-style:circle}
.article-body li::marker,.bg-toc li::marker{color:var(--bg-brand-2)}
.article-body li,.bg-toc li{list-style:inherit;display:list-item}