/* =========================================================
   Blog Ricci — feuille de style consolidée (front public)
   Corrige : classes mortes bt-excerpt->bt-article-body, justification,
   et unifie liste + article. Charte : bleuet #5A6AA7, saumon #F6B575.
   ========================================================= */
#blogApp{
  --text:#030000; --primary:#F6B575; --secondary:#5A6AA7;
  --border:var(--secondary); --bg:var(--secondary);
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text); max-width:1100px; margin:0 auto; padding:8px 0;
}

/* ---------------- LISTE / VIGNETTES ---------------- */
#blogApp .bt-grid{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
#blogApp .bt-grid>*{ min-width:0; }
@media(max-width:980px){ #blogApp .bt-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){
  #blogApp{ padding-left:16px; padding-right:16px; }
  #blogApp .bt-grid{ grid-template-columns:1fr; justify-items:center; }
  #blogApp .bt-card{ width:100%; max-width:520px; box-sizing:border-box; }
}
#blogApp .bt-card{
  border:2px solid var(--border); border-radius:0 18px 0 18px; overflow:hidden;
  background:var(--bg); box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:box-shadow .2s ease; display:flex; flex-direction:column;
}
#blogApp .bt-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.12); }
#blogApp .bt-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#eee; }
#blogApp .bt-pad{ padding:14px; }
#blogApp .bt-card .bt-title{ margin:0 0 6px; font-weight:800; font-size:1.2rem; line-height:1.25; color:#fff; }
#blogApp .bt-card .bt-subtitle{ margin:2px 0 8px; color:#fff; opacity:.95; font-weight:700; }
#blogApp .bt-card .bt-meta{ font-size:.9rem; opacity:.9; margin:0 0 8px; color:#fff; }
#blogApp .bt-card .bt-excerpt{ margin:0 0 10px; color:#fff; }
#blogApp .bt-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--primary);
  color:#fff; border:0; border-radius:999px; padding:8px 14px; font-weight:400;
  text-decoration:none; cursor:pointer; transition:background .2s,color .2s; align-self:flex-start;
}
#blogApp .bt-btn:hover{ background:#fff; color:#030000; }
#blogApp .bt-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#blogApp .bt-card .bt-tag{
  display:inline-block; padding:4px 10px; border-radius:999px; color:#fff;
  border:1px solid rgba(255,255,255,.9); text-decoration:none; font-size:.85rem;
}
#blogApp .bt-card .bt-tag:hover{ background:rgba(255,255,255,.12); }

/* ---------------- ARTICLE ---------------- */
#blogApp .single{ max-width:820px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
@media(max-width:700px){ #blogApp .single{ padding:0 16px; } }
#blogApp .single .bt-cover{ border-radius:10px; aspect-ratio:auto; height:auto; margin-bottom:14px; }
#blogApp .single h1.bt-title{ color:var(--secondary); margin:12px 0 0; font-size:2.1rem; line-height:1.2; }
#blogApp .single .bt-subtitle{ margin:6px 0 8px; color:var(--primary); font-weight:800; font-size:1.2rem; line-height:1.35; }
#blogApp .single .bt-meta{ color:#4f4f4f; font-size:.95rem; margin-bottom:10px; }
#blogApp .back{ color:var(--secondary); text-decoration:none; display:inline-block; margin:8px 0 16px; }
#blogApp .back:hover{ color:var(--primary); text-decoration:underline; }

/* Corps de l'article (ex-bt-excerpt : classe corrigée) */
#blogApp .bt-article-body{ margin-top:18px; color:#030000; line-height:1.75; text-align:justify; }
#blogApp .bt-article-body>*:first-child{ margin-top:0!important; }
#blogApp .bt-article-body p{ margin:0 0 16px; }
#blogApp .bt-article-body h2{ font-size:1.9rem; line-height:1.25; color:var(--secondary); font-weight:700; margin:34px 0 14px; letter-spacing:-.01em; }
#blogApp .bt-article-body h3{ font-size:1.45rem; line-height:1.3; color:var(--primary); font-weight:700; margin:26px 0 10px; }
#blogApp .bt-article-body a{ color:var(--secondary); border-bottom:1px solid var(--secondary); text-decoration:none; transition:all .2s ease; }
#blogApp .bt-article-body a:hover{ color:var(--primary); border-bottom-color:var(--primary); }
#blogApp .bt-article-body blockquote{
  margin:30px 0; padding:18px 22px; border-left:5px solid var(--secondary);
  background:linear-gradient(180deg,#fbfbfd 0%,#f7f8fc 100%); color:#1f2430;
  font-size:1.08rem; line-height:1.7; border-radius:0 12px 12px 0; box-shadow:0 4px 14px rgba(0,0,0,.04);
}
#blogApp .bt-article-body blockquote p{ margin:0; }
#blogApp .bt-article-body ul,#blogApp .bt-article-body ol{ margin:0 0 16px; padding-left:22px; }
#blogApp .bt-article-body li{ margin:0 0 8px; }

/* Tableaux (responsive) */
#blogApp .bt-table-scroll{ overflow-x:auto; margin:24px 0; -webkit-overflow-scrolling:touch; }
#blogApp .bt-article-body table{ width:100%; border-collapse:collapse; font-size:.95rem; line-height:1.55; box-shadow:0 4px 14px rgba(0,0,0,.04); }
#blogApp .bt-article-body th,#blogApp .bt-article-body td{ border:1px solid #e9e9e9; padding:10px 14px; text-align:left; vertical-align:top; }
#blogApp .bt-article-body thead th,#blogApp .bt-article-body tr:first-child td{ background:var(--secondary); color:#fff; font-weight:700; }
#blogApp .bt-article-body tr:nth-child(even) td{ background:#f7f8fc; }

/* Navigation précédent / suivant */
#blogApp .post-nav{ margin-top:22px; display:flex; justify-content:space-between; gap:12px; }
#blogApp .post-nav a{ color:var(--secondary); text-decoration:none; }
#blogApp .post-nav a:hover{ color:var(--primary); text-decoration:underline; }

/* Pagination */
#blogApp .pager{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
#blogApp .pager a{ border:1px solid var(--secondary); color:var(--secondary); border-radius:999px; padding:8px 16px; text-decoration:none; }
#blogApp .pager a:hover{ background:var(--primary); border-color:var(--primary); color:#030000; }

/* Tags sur la page ARTICLE (fond blanc) : blanc sur bleu, lisibles */
#blogApp .single .bt-tag{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:var(--secondary); color:#fff; border:1px solid var(--secondary);
  text-decoration:none; font-size:.85rem;
}
#blogApp .single .bt-tag:hover{ background:#7986c0; border-color:#7986c0; color:#fff; }