/* Page pilier - Builds The Division 2. S'appuie sur les variables de main.css. */

.builds-pillar { --c: #ff7a1a; } /* accent Division */

/* ---- hero ---- */
.bp-hero { padding-block: clamp(34px,6vw,72px); border-bottom:1px solid var(--line); position:relative; overflow:hidden;
  background: radial-gradient(900px 420px at 80% -20%, color-mix(in srgb, var(--c) 14%, transparent), transparent 65%); }
.bp-hero .eyebrow { color: var(--c); }
.bp-hero .eyebrow::before { background: var(--c); box-shadow: 0 0 16px var(--c); }
.bp-hero h1 { font-size: clamp(2rem,5vw,3.4rem); text-transform:uppercase; margin-top:.4rem; letter-spacing:-.015em; max-width:20ch; }
.bp-lead { color: var(--text-dim); margin-top:.9rem; max-width:64ch; font-size:1.05rem; }
.bp-hero-actions { display:flex; gap:.7rem; margin-top:1.6rem; flex-wrap:wrap; }
.bp-updated { font-family:var(--font-mono); font-size:.78rem; color:var(--text-mute); margin-top:1rem; }

.bp-intro { padding-block: clamp(24px,4vw,44px); }
.bp-intro .prose { max-width: 76ch; }

/* ---- barre de filtres (sticky) ---- */
.bp-filters {
  position: sticky; top: calc(var(--header-h) - 1px); z-index: 20;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding:14px 16px; margin-top: var(--gap);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px);
  border:1px solid var(--line); border-radius: var(--radius);
}
.bp-fgroup { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.bp-flabel { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-right:.2rem; }
.bp-chip {
  font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.34rem .7rem; border:1px solid var(--line); color:var(--text-dim); background:transparent;
  border-radius:2px; transition: all .18s var(--ease);
}
.bp-chip:hover { color:var(--text); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.bp-chip.is-on { color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 0 16px -6px var(--c); }
.bp-chip.tier-chip-s.is-on { --c: var(--t-s); } .bp-chip.tier-chip-a.is-on { --c: var(--t-a); } .bp-chip.tier-chip-b.is-on { --c: var(--t-b); }
.bp-search { margin-left:auto; }
.bp-search input { background:var(--bg-2); border:1px solid var(--line); color:var(--text); padding:.5rem .8rem; border-radius:2px; font:inherit; font-size:.88rem; outline:none; min-width:200px; }
.bp-search input:focus { border-color: var(--c); }
.bp-count { font-family:var(--font-mono); font-size:.82rem; color:var(--text-mute); margin:1rem 0 var(--gap); }
.bp-count #bp-shown { color: var(--c); }

/* ---- cartes de build ---- */
.bp-grid { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.build-card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line); border-left:3px solid var(--c); border-radius: var(--radius);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.build-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow: 0 22px 46px -26px rgba(0,0,0,.95), -10px 0 26px -22px var(--c); }
.bc-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); display:block; }
.bc-thumb img, .bc-thumb .ph { width:100%; height:100%; object-fit:cover; filter:saturate(.88) brightness(.92); transition:transform .5s var(--ease-out), filter .4s; }
.build-card:hover .bc-thumb img { transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.bc-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(9,12,17,.5)); }
.bc-thumb .tier { position:absolute; top:10px; right:10px; z-index:2; background:rgba(9,12,17,.8); backdrop-filter:blur(4px); }

.bc-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.bc-roles { display:flex; flex-wrap:wrap; gap:.35rem; }
.bc-act, .bc-role { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.2em .5em; border-radius:2px; line-height:1.4; }
.bc-act { color:var(--accent-ink); background:var(--text-dim); font-weight:500; }
.bc-act-pve { background:#4aa3ff; color:#06121f; } .bc-act-pvp { background:#ff5a4d; color:#1f0606; }
.bc-role { color:var(--text-dim); border:1px solid var(--line); background:var(--bg-2); }
.bc-body h3 { font-size:1.08rem; line-height:1.18; text-transform:uppercase; }
.bc-body h3 a:hover { color: var(--c); }
.bc-blurb { color:var(--text-mute); font-size:.9rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bc-meta { display:flex; flex-wrap:wrap; gap:.35rem; }
.bc-tag { font-size:.72rem; color:var(--text-dim); background:var(--bg-2); border:1px solid var(--line); padding:.22em .5em; border-radius:2px; white-space:nowrap; }
.bc-tag-target { color: var(--c); border-color: color-mix(in srgb,var(--c) 40%, var(--line)); }
.bc-actions { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.6rem; border-top:1px solid var(--line-soft); }
.bc-go { font-family:var(--font-display); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text); }
.bc-go:hover { color: var(--c); }
.bc-tool { font-family:var(--font-display); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-ink); background:var(--c); padding:.4em .7em; border-radius:2px; white-space:nowrap; transition:.2s; }
.bc-tool:hover { box-shadow:0 0 16px -4px var(--c); transform:translateY(-1px); }

.build-card.hide { display:none; }
.bp-empty { text-align:center; color:var(--text-mute); padding: 2rem 0; font-size:1rem; }

/* ---- FAQ ---- */
.bp-faq .bp-q { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:.7rem; overflow:hidden; }
.bp-faq summary { cursor:pointer; list-style:none; padding:1rem 1.2rem; font-family:var(--font-display); font-weight:600; font-size:1.02rem; display:flex; align-items:center; gap:.7rem; }
.bp-faq summary::-webkit-details-marker { display:none; }
.bp-faq summary::before { content:"+"; color:var(--c); font-size:1.3rem; line-height:1; transition:transform .2s; }
.bp-faq .bp-q[open] summary::before { content:"−"; }
.bp-faq .bp-a { padding:0 1.2rem 1.1rem; color:var(--text-dim); }
.bp-faq .bp-a a { color:var(--c); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:680px){
  .bp-filters { top: calc(var(--header-h) + 0px); gap:.8rem 1rem; }
  .bp-search { margin-left:0; width:100%; }
  .bp-search input { width:100%; }
}