/* ============================================================
   BatiCED — Styles blog (s'appuie sur les variables de site.css)
   ============================================================ */

.bl-wrap { padding: 120px 0 80px; }
.bl-narrow { max-width: 760px; margin: 0 auto; }

/* --- En-tête de page blog --- */
.bl-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.bl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--violet-2); background: var(--violet-soft);
  border: 1px solid var(--line-2); padding: 6px 14px; border-radius: var(--r-full);
  margin-bottom: 20px;
}
.bl-eyebrow .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.bl-head h1 {
  font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 16px; font-weight: 700;
}
.bl-head p { color: var(--fg-3); font-size: 16px; margin: 0; }

/* --- Barre de catégories (filtre) --- */
.bl-filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0 0 48px;
}
.bl-chip {
  font-size: 13px; font-weight: 500; color: var(--fg-2);
  padding: 8px 16px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--bg-card);
  transition: all .2s var(--ease);
}
.bl-chip:hover { border-color: var(--line-bright); color: var(--fg); }
.bl-chip.active { background: var(--violet); color: #fff; border-color: var(--violet); }
.bl-chip .n { opacity: .55; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* --- Grille d'articles --- */
.bl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 920px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bl-grid { grid-template-columns: 1fr; } }

.bl-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.bl-card:hover { transform: translateY(-4px); border-color: var(--line-3); }
.bl-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.bl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.bl-card:hover .bl-card-media img { transform: scale(1.04); }
.bl-card-ph { display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--violet-soft), var(--cyan-soft)); }
.bl-card-ph.bl-blue  { background: linear-gradient(135deg, var(--blue-soft),  var(--violet-soft)); }
.bl-card-ph.bl-cyan  { background: linear-gradient(135deg, var(--cyan-soft),  var(--blue-soft)); }
.bl-card-ph.bl-green { background: linear-gradient(135deg, var(--green-soft), var(--cyan-soft)); }
.bl-card-ph.bl-warn  { background: linear-gradient(135deg, var(--warn-soft),  var(--violet-soft)); }
.bl-card-ph.bl-err   { background: linear-gradient(135deg, var(--err-soft),   var(--warn-soft)); }
.bl-card-ph.bl-pink  { background: linear-gradient(135deg, var(--pink-soft),  var(--violet-soft)); }

.bl-card-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bl-card-title { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.bl-card-title a:hover { color: var(--violet-2); }
.bl-card-chapo { color: var(--fg-3); font-size: 14px; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card-meta { display: flex; align-items: center; gap: 8px; color: var(--fg-4); font-size: 12.5px; }
.bl-dot { opacity: .5; }

/* --- Tag catégorie --- */
.bl-tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-full);
  color: var(--violet-2); background: var(--violet-soft); border: 1px solid var(--line-2);
  transition: all .2s var(--ease);
}
.bl-tag:hover { border-color: var(--line-bright); }
.bl-tag.bl-blue  { color: var(--blue-2);  background: var(--blue-soft); }
.bl-tag.bl-cyan  { color: var(--cyan-2);  background: var(--cyan-soft); }
.bl-tag.bl-green { color: var(--green-2); background: var(--green-soft); }
.bl-tag.bl-warn  { color: var(--warn);    background: var(--warn-soft); }
.bl-tag.bl-err   { color: var(--err);     background: var(--err-soft); }
.bl-tag.bl-pink  { color: var(--pink);    background: var(--pink-soft); }

/* --- Pagination --- */
.bl-pager { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.bl-pager a, .bl-pager span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 500;
  border: 1px solid var(--line-2); background: var(--bg-card); color: var(--fg-2);
}
.bl-pager a:hover { border-color: var(--line-bright); color: var(--fg); }
.bl-pager .current { background: var(--violet); color: #fff; border-color: var(--violet); }
.bl-pager .disabled { opacity: .4; }

/* --- Fil d'ariane --- */
.bl-crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-4); margin-bottom: 28px; }
.bl-crumb a:hover { color: var(--fg-2); }
.bl-crumb .sep { opacity: .5; }

/* --- Article (single) --- */
.bl-article-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.bl-article-head h1 { font-size: clamp(28px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -0.03em; margin: 18px 0 18px; }
.bl-article-head .bl-card-meta { justify-content: center; font-size: 13.5px; }
.bl-article-chapo { color: var(--fg-2); font-size: 18px; line-height: 1.6; margin: 0 auto 8px; max-width: 720px; text-align: center; }
.bl-cover { border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--line); margin: 0 auto 48px; max-width: 920px; }
.bl-cover img { width: 100%; display: block; }

.bl-content { font-size: 16.5px; line-height: 1.75; color: var(--fg-2); }
.bl-content > * { margin: 0 0 1.2em; }
.bl-content h2 { font-size: 26px; color: var(--fg); margin: 1.8em 0 .6em; letter-spacing: -0.02em; line-height: 1.2; }
.bl-content h3 { font-size: 20px; color: var(--fg); margin: 1.5em 0 .5em; letter-spacing: -0.01em; }
.bl-content a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; }
.bl-content a:hover { color: var(--violet); }
.bl-content img { border-radius: var(--r-lg); border: 1px solid var(--line); margin: 1.5em auto; }
.bl-content ul, .bl-content ol { padding-left: 1.4em; }
.bl-content li { margin: 0 0 .5em; }
.bl-content blockquote {
  border-left: 3px solid var(--violet); padding: 4px 0 4px 20px; margin: 1.5em 0;
  color: var(--fg); font-style: italic;
}
.bl-content pre {
  background: var(--bg-inset); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; color: var(--fg-2);
}
.bl-content code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-3); padding: 2px 6px; border-radius: var(--r-xs); }
.bl-content pre code { background: none; padding: 0; }

/* --- Bloc "articles liés" en bas d'article --- */
.bl-related { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--line); }
.bl-related h2 { font-size: 24px; margin: 0 0 28px; letter-spacing: -0.02em; }

/* --- État vide --- */
.bl-empty { text-align: center; padding: 60px 20px; color: var(--fg-3); }
.bl-empty svg { width: 40px; height: 40px; stroke: var(--fg-4); margin: 0 auto 16px; }