/* ============================================================
   MBEZORA — Blog
   ------------------------------------------------------------
   Fichier : assets/css/blog.css   (préfixe .bp-)
   Chargé par pages/blog.php et pages/article.php (cartes,
   auteur, newsletter). Réutilise dans main.css : .hm-hero,
   .hm-rise, .rl-breadcrumb, .sv-title, .sv-orb.
   L'ancien bloc « PAGE BLOG — refonte complète » (.bl-) de
   main.css n'est plus utilisé et peut être supprimé.
============================================================ */

.bp-page [id] { scroll-margin-top: calc(var(--nav-h, 72px) + 90px); }

/* ============================================================
   HERO
============================================================ */
.bp-hero { padding: 90px 0 90px; text-align: center; }
.bp-hero .container { max-width: 920px; }
.bp-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  margin: 1.1rem auto 1.1rem;
  max-width: 22ch;
}
.bp-hero h1 span {
  background: linear-gradient(90deg, var(--accent), #A78BFA);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bp-hero .hm-hero-lead { margin-left: auto; margin-right: auto; }

/* ---- Recherche ---- */
.bp-search { position: relative; max-width: 620px; margin: 0 auto 1.5rem; }
.bp-search > i {
  position: absolute; top: 50%; left: 1.4rem;
  transform: translateY(-50%);
  color: rgba(226,232,255,.6);
  pointer-events: none;
}
.bp-search input {
  width: 100%;
  padding: 1.05rem 3.5rem 1.05rem 3.3rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.bp-search input::placeholder { color: rgba(226,232,255,.55); }
.bp-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.bp-search input:focus {
  background: rgba(255,255,255,.13);
  border-color: rgba(0,194,255,.6);
  box-shadow: 0 0 0 5px rgba(0,194,255,.15);
}
.bp-search kbd {
  position: absolute; top: 50%; right: 1.1rem;
  transform: translateY(-50%);
  min-width: 26px;
  padding: .1rem .45rem;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(226,232,255,.7);
  font-family: var(--font-body);
  font-size: .75rem;
  text-align: center;
  pointer-events: none;
}
.bp-search input:focus ~ kbd { opacity: 0; }

.bp-hero-topics {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5rem;
}
.bp-hero-topics > span { color: rgba(226,232,255,.6); font-size: .85rem; margin-right: .25rem; }
.bp-hero-topics a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem;
  border-radius: 50px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: #fff;
  font-size: .8rem; font-weight: 600;
  transition: background .25s, transform .25s;
}
.bp-hero-topics a:hover { background: var(--c); color: #fff; transform: translateY(-2px); }

.bp-hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 3.5rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.bp-hero-stats > div { display: flex; flex-direction: column-reverse; }
.bp-hero-stats dt { font-size: .85rem; color: rgba(226,232,255,.65); }
.bp-hero-stats dd { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; color: #fff; }

/* ============================================================
   ÉLÉMENTS COMMUNS
============================================================ */
.bp-avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
  font-size: .7rem; font-weight: 800;
}
.bp-avatar--lg { width: 42px; height: 42px; font-size: .85rem; }
.bp-avatar--xl { width: 64px; height: 64px; font-size: 1.2rem; }
.bp-author { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.bp-author-name { display: block; color: var(--text); font-size: .84rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bp-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem;
  border-radius: 50px;
  background: var(--c);
  color: #fff;
  font-size: .76rem; font-weight: 700;
}

/* Lien « étiré » : toute la carte devient cliquable */
.bp-card-link { color: inherit; }
.bp-card-link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.bp-card-link:hover { color: inherit; }
.bp-card-link:focus-visible { outline: none; }
.bp-card:has(.bp-card-link:focus-visible),
.bp-lead:has(.bp-card-link:focus-visible),
.bp-mini:has(.bp-card-link:focus-visible) { outline: 3px solid color-mix(in srgb, var(--c) 55%, transparent); outline-offset: 3px; }

/* ============================================================
   À LA UNE
============================================================ */
.bp-une { padding: 90px 0 40px; background: #fff; }
.bp-une .container { max-width: 1320px; }
.bp-une-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem;
}
.bp-une-head h2 { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); font-size: 1.5rem; }
.bp-une-head h2 i { color: #F59E0B; font-size: 1.1rem; }

.bp-une-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.75rem;
}

/* ---- Grand article ---- */
.bp-lead {
  --c: var(--blue);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 500px;
  display: flex; align-items: flex-end;
  border-radius: 26px;
  background: color-mix(in srgb, var(--c) 25%, #060F26);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c) 70%, transparent);
}
.bp-lead-media { position: absolute; inset: 0; z-index: -2; }
.bp-lead-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.bp-lead:hover .bp-lead-media img { transform: scale(1.05); }
.bp-lead::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,15,38,.05) 0%, rgba(6,15,38,.55) 45%, rgba(6,15,38,.95) 100%);
}
.bp-lead-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.25), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #0A1A42), var(--c));
}
.bp-lead-ph::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.25) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: .4;
}
.bp-lead-ph i { position: relative; top: -15%; font-size: 7rem; color: rgba(255,255,255,.35); animation: bp-float 6s ease-in-out infinite; }
@keyframes bp-float { 50% { transform: translateY(-12px) rotate(-4deg); } }

.bp-lead-body { display: flex; flex-direction: column; gap: .9rem; padding: 2.5rem; color: #fff; }
.bp-lead h3 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.18; letter-spacing: -.015em; max-width: 26ch; }
.bp-lead h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s; }
.bp-lead:hover h3 a { background-size: 100% 2px; }
.bp-lead-body > p { color: rgba(226,232,255,.82); font-size: 1rem; line-height: 1.65; max-width: 60ch; }
.bp-lead-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.15);
  color: rgba(226,232,255,.75);
  font-size: .84rem;
}
.bp-lead-meta .bp-author-name { color: #fff; }
.bp-lead-meta i { margin-right: .3rem; }

/* ---- Derniers articles ---- */
.bp-side {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  border-radius: 26px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.bp-side-title { margin-bottom: .75rem; color: var(--text-muted); font-size: .85rem; font-weight: 700; }
.bp-side ol { display: grid; gap: .5rem; flex: 1; }
.bp-mini {
  --c: var(--blue);
  position: relative;
  display: grid;
  grid-template-columns: auto 88px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: .75rem;
  border-radius: 16px;
  transition: background .25s, box-shadow .25s;
}
.bp-mini:hover { background: #fff; box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.bp-mini-num { color: color-mix(in srgb, var(--c) 45%, #CBD5E1); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.bp-mini-thumb {
  width: 88px; height: 70px;
  overflow: hidden;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #0A1A42), var(--c));
  color: rgba(255,255,255,.85);
  font-size: 1.4rem;
}
.bp-mini-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bp-mini:hover .bp-mini-thumb img { transform: scale(1.08); }
.bp-mini-cat { color: var(--c); font-size: .72rem; font-weight: 700; }
.bp-mini h4 { margin: .15rem 0 .25rem; color: var(--text); font-size: .95rem; line-height: 1.35; }
.bp-mini:hover h4 { color: var(--c); }
.bp-mini-meta { color: var(--text-muted); font-size: .75rem; }

/* ============================================================
   BARRE DE FILTRES (fixe pendant le défilement)
============================================================ */
.bp-list { padding: 40px 0 100px; background: #fff; }
.bp-list .container { max-width: 1320px; }

.bp-toolbar {
  position: sticky;
  top: var(--nav-h, 72px);
  z-index: 40;
  margin-bottom: 2rem;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bp-toolbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }

.bp-filters {
  display: flex; gap: .45rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .15rem;
}
.bp-filters::-webkit-scrollbar { display: none; }
.bp-filter {
  --c: var(--text);
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.bp-filter i { color: var(--c); font-size: .78rem; }
.bp-filter span { padding: .02rem .45rem; border-radius: 50px; background: var(--bg2); font-size: .7rem; }
.bp-filter:hover { border-color: var(--c); color: var(--text); }
.bp-filter.is-active { background: var(--c); border-color: var(--c); color: #fff; }
.bp-filter.is-active i { color: #fff; }
.bp-filter.is-active span { background: rgba(255,255,255,.22); color: #fff; }
.bp-filter:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: 2px; }

.bp-sort {
  padding: .5rem 2.2rem .5rem .95rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center;
  -webkit-appearance: none; appearance: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.bp-sort:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 2px; }

.bp-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.bp-list-head h2 { color: var(--text); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.bp-result { font-size: .9rem; font-weight: 600; }

/* ============================================================
   CARTES D'ARTICLES
============================================================ */
.bp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.bp-card {
  --c: var(--blue);
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.bp-card[hidden] { display: none; }
.bp-card.is-in { animation: bp-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bp-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.bp-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c) 60%, transparent);
}

.bp-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--c) 18%, #0B1530);
}
.bp-card-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.bp-card:hover .bp-card-media img { transform: scale(1.06); }
.bp-card-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.25), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #0A1A42), var(--c) 65%, color-mix(in srgb, var(--c) 60%, #fff));
}
.bp-card-ph::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.25) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .4;
}
.bp-card-ph i { position: relative; z-index: 1; font-size: 3rem; color: rgba(255,255,255,.9); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.bp-card:hover .bp-card-ph i { transform: scale(1.12) rotate(-6deg); }

.bp-card-cat {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .75rem;
  border-radius: 50px;
  background: rgba(255,255,255,.94);
  color: color-mix(in srgb, var(--c) 85%, #0F172A);
  font-size: .72rem; font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
}
.bp-card-count {
  position: absolute; bottom: .8rem; right: .8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 50px;
  background: rgba(6,15,38,.65);
  color: #fff;
  font-size: .68rem; font-weight: 700;
}

.bp-card-body { flex: 1; display: flex; flex-direction: column; gap: .65rem; padding: 1.4rem 1.5rem 1.35rem; }
.bp-card-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--text-muted); font-size: .78rem; font-weight: 500; }
.bp-card-meta i { color: var(--c); margin-right: .2rem; }
.bp-card h3 { color: var(--text); font-size: 1.12rem; line-height: 1.38; }
.bp-card:hover h3 { color: color-mix(in srgb, var(--c) 80%, #0F172A); }
.bp-card-body > p { flex: 1; font-size: .88rem; line-height: 1.6; }
.bp-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .35rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.bp-card-go { display: inline-flex; align-items: center; gap: .4rem; color: var(--c); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.bp-card-go i { font-size: .72rem; transition: transform .3s; }
.bp-card:hover .bp-card-go i { transform: translateX(4px); }

/* ---- Aucun résultat / plus d'articles ---- */
.bp-no-result, .bp-empty {
  max-width: 560px;
  margin: 1rem auto 0;
  padding: 3rem 2rem;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: 22px;
}
.bp-no-result[hidden] { display: none; }
.bp-no-result h3, .bp-empty h2 { color: var(--text); font-size: 1.3rem; margin-bottom: .4rem; }
.bp-no-result p, .bp-empty p { margin-bottom: 1.25rem; }
.bp-empty-ic {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 1.4rem;
}
.bp-empty-section { padding: 90px 0; background: #fff; }
.bp-more { margin-top: 2.5rem; text-align: center; }
.bp-more[hidden] { display: none; }

/* ============================================================
   THÉMATIQUES
============================================================ */
.bp-topics-section { padding: 100px 0; background: var(--bg); }
.bp-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}
.bp-topic {
  --c: var(--blue);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  color: inherit;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.bp-topic::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.bp-topic:hover {
  color: inherit;
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--c) 60%, transparent);
}
.bp-topic:hover::after { transform: scaleX(1); }
.bp-topic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.bp-topic-ic {
  width: 50px; height: 50px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
  font-size: 1.2rem;
  transition: background .3s, color .3s, transform .4s;
}
.bp-topic:hover .bp-topic-ic { background: var(--c); color: #fff; transform: rotate(-6deg); }
.bp-topic-count { padding: .2rem .65rem; border-radius: 50px; background: var(--bg2); color: var(--text-muted); font-size: .74rem; font-weight: 700; }
.bp-topic strong { color: var(--text); font-size: 1.1rem; }
.bp-topic-desc { color: var(--text-muted); font-size: .88rem; line-height: 1.55; }
.bp-topic-latest {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px dashed var(--border);
  color: var(--text);
  font-size: .84rem; font-weight: 600; line-height: 1.4;
}
.bp-topic-latest small { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 500; }

/* ============================================================
   NEWSLETTER
============================================================ */
.bp-nl-section { padding: 90px 0; background: #fff; }
.bp-nl {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 3.25rem;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(0,194,255,.28), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(124,58,237,.3), transparent 60%),
    linear-gradient(140deg, var(--sv-navy, #060F26) 0%, #0B2A8A 100%);
  box-shadow: 0 40px 80px -35px rgba(0,40,140,.6);
}
.bp-nl::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 15% 50%, #000 10%, transparent 65%);
          mask-image: radial-gradient(ellipse at 15% 50%, #000 10%, transparent 65%);
  pointer-events: none;
}
.bp-nl > * { position: relative; }
.bp-nl-ic {
  width: 56px; height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  color: var(--accent);
  font-size: 1.35rem;
  animation: bp-float 5s ease-in-out infinite;
}
.bp-nl h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.2; margin-bottom: .7rem; }
.bp-nl-text p { color: rgba(226,232,255,.8); font-size: 1rem; line-height: 1.7; max-width: 46ch; }

.bp-nl-field {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .4rem .4rem 1.2rem;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}
.bp-nl-field > i { color: var(--text-muted); }
.bp-nl-field input {
  flex: 1; min-width: 0;
  padding: .7rem .25rem;
  border: 0; outline: none;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
}
.bp-nl-field .btn { flex-shrink: 0; }
.bp-nl-field .btn[disabled] { opacity: .65; cursor: default; transform: none; }
.bp-nl-msg {
  margin-top: .85rem;
  padding: .6rem 1rem;
  border-radius: 12px;
  font-size: .88rem; font-weight: 600;
}
.bp-nl-msg.is-ok  { background: rgba(34,197,94,.18); color: #BBF7D0; }
.bp-nl-msg.is-err { background: rgba(239,68,68,.2);  color: #FECACA; }
.bp-nl-note { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; color: rgba(226,232,255,.6); font-size: .8rem; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .bp-une-grid { grid-template-columns: 1fr; }
  .bp-lead { min-height: 440px; }
  .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-nl { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 2rem; }
}
@media (max-width: 760px) {
  .bp-toolbar-inner { flex-direction: column; align-items: stretch; gap: .6rem; }
  .bp-filters { margin: 0 -18px; padding: .15rem 18px; }
  .bp-tools { display: flex; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .bp-hero { padding: 70px 0 70px; }
  .bp-hero-stats { gap: 1rem 2rem; }
  .bp-hero-stats dd { font-size: 1.6rem; }
  .bp-search kbd { display: none; }
  .bp-search input { padding-right: 1.3rem; }

  .bp-une { padding: 60px 0 20px; }
  .bp-lead { min-height: 400px; border-radius: 20px; }
  .bp-lead-body { padding: 1.5rem; }
  .bp-side { padding: 1rem; border-radius: 20px; }
  .bp-mini { grid-template-columns: 72px minmax(0, 1fr); }
  .bp-mini-num { display: none; }
  .bp-mini-thumb { width: 72px; height: 60px; }

  .bp-list { padding: 20px 0 70px; }
  .bp-list-head { flex-direction: column; gap: .25rem; }
  .bp-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .bp-topics-section, .bp-nl-section { padding: 70px 0; }
  .bp-nl { padding: 2rem 1.25rem; border-radius: 20px; }
  .bp-nl-field { flex-wrap: wrap; border-radius: 18px; padding: .5rem; }
  .bp-nl-field > i { display: none; }
  .bp-nl-field input { padding: .6rem .75rem; flex-basis: 100%; }
  .bp-nl-field .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-page *, .bp-page *::before, .bp-page *::after { animation: none !important; transition: none !important; }
}