/* Module de commentaires réutilisable — dépend de tokens.css */
.bc-section{
  margin-top: var(--sp-20);
  padding: var(--sp-16);
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-xl);
}

.bc-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-12);
  margin-bottom:var(--sp-16);
}

.bc-heading h2{
  margin:var(--sp-8) 0 0;
}

.bc-kicker,
.bc-count{
  display:inline-block;
  border:var(--b-mid);
  background:var(--c-accent);
  box-shadow:var(--sh-s);
  padding:var(--sp-6) var(--sp-10);
  font-size:var(--fs-13);
  font-weight:900;
  text-transform:uppercase;
}

.bc-count{
  background:var(--c-aqua);
  white-space:nowrap;
}

.bc-notice{
  margin-bottom:var(--sp-14);
  padding:var(--sp-12);
  border:var(--b-mid);
  box-shadow:var(--sh-s);
  font-weight:800;
}

.bc-notice--success{ background:var(--c-ok); }
.bc-notice--error{ background:var(--c-danger); }

.bc-form{
  display:grid;
  gap:var(--sp-14);
  margin-bottom:var(--sp-20);
  padding:var(--sp-16);
  border:var(--b-mid);
  background:var(--c-paper);
}

.bc-field{
  display:grid;
  gap:var(--sp-8);
}

.bc-field label,
.bc-labelRow{
  font-weight:900;
}

.bc-labelRow{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-10);
}

.bc-field input,
.bc-field textarea{
  width:100%;
  box-sizing:border-box;
  border:var(--b-mid);
  background:var(--c-white);
  box-shadow:var(--sh-xs);
  padding:var(--sp-10);
  color:var(--c-ink);
  font:inherit;
}

.bc-field textarea{
  resize:vertical;
  min-height:110px;
}

.bc-field input:focus,
.bc-field textarea:focus{
  outline:3px solid var(--c-accent);
  outline-offset:2px;
}

.bc-field small{
  font-size:var(--fs-12);
}

.bc-submit,
.bc-more{
  width:max-content;
  border:var(--b-mid);
  background:var(--c-accent);
  box-shadow:var(--sh-s);
  padding:var(--sp-10) var(--sp-16);
  color:var(--c-black);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.bc-submit:hover,
.bc-more:hover{
  transform:translate(2px,2px);
  box-shadow:var(--sh-xs);
}

.bc-more:disabled{
  cursor:wait;
  opacity:.7;
}

.bc-list{
  display:grid;
  gap:var(--sp-14);
}

.bc-comment{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:var(--sp-12);
  padding:var(--sp-14);
  border:var(--b-mid);
  background:var(--c-white);
  box-shadow:var(--sh-s);
}

.bc-avatar{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:var(--b-mid);
  background:var(--c-cyan);
  font-size:var(--fs-20);
  font-weight:900;
}

.bc-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-8);
  margin-bottom:var(--sp-6);
  padding:0;
  border:0;
}

.bc-meta strong{
  font-size:var(--fs-17);
}

.bc-meta time{
  font-size:var(--fs-12);
  font-weight:700;
  opacity:.8;
}

.bc-content p{
  margin:0;
  overflow-wrap:anywhere;
}

.bc-empty{
  margin:0;
  padding:var(--sp-14);
  border:var(--b-light);
  background:var(--c-paper);
}

.bc-more{
  margin-top:var(--sp-16);
  background:var(--c-aqua);
}

.bc-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

@media (max-width:600px){
  .bc-section,
  .bc-form{
    padding:var(--sp-12);
  }

  .bc-heading{
    align-items:stretch;
    flex-direction:column;
  }

  .bc-count{
    width:max-content;
  }

  .bc-comment{
    grid-template-columns:42px minmax(0,1fr);
    padding:var(--sp-12);
  }

  .bc-avatar{
    width:38px;
    height:38px;
  }

  .bc-meta{
    align-items:flex-start;
    flex-direction:column;
  }

  .bc-submit,
  .bc-more{
    width:100%;
    text-align:center;
  }
}