/* ── Article detail ── */
.article-detail {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* Hero image */
.article-detail__hero {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  max-height: 400px;
}
.article-detail__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3.1;
  object-fit: cover;
  background: #111;
  display: block;
}

/* Header */
.article-detail__header { margin-bottom: 28px; }
.article-detail__date {
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.article-detail__title {
  font-size: 32px;
  font-weight: 900;
  color: #FFFF00;
  line-height: 1.25;
  margin: 0 0 14px;
}
.article-detail__excerpt {
  font-size: 16px;
  color: #999;
  line-height: 1.7;
  border-left: 3px solid #FFFF00;
  padding-left: 16px;
  margin: 0;
}

/* Séparateur */
.article-detail__divider {
  border: none;
  border-top: 1px solid #2a2a2a;
  margin: 28px 0;
}

/* Corps de l'article */
.article-detail__content {
  font-size: 15px;
  color: #ccc;
  line-height: 1.85;
}
.article-detail__content h2,
.article-detail__content h3 {
  color: #FFFF00;
  margin-top: 32px;
}
.article-detail__content a {
  color: #FFFF00;
  text-decoration: underline;
}
.article-detail__content img {
  max-width: 100%;
  border-radius: 10px;
  margin: 16px 0;
}
.article-detail__content blockquote {
  border-left: 3px solid #FFFF00;
  padding: 8px 16px;
  margin: 24px 0;
  background: rgba(255,255,0,0.05);
  border-radius: 0 8px 8px 0;
  color: #aaa;
  font-style: italic;
}

/* ── Autres articles ── */
.other-articles { margin-top: 60px; }
.other-articles__title {
  font-size: 20px;
  font-weight: 800;
  color: #FFFF00;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
.other-articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.other-card {
  background: #222;
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.other-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255,255,0,0.12);
  border-color: rgba(255,255,0,0.35);
}
.other-card__img {
  width: 100%;
  aspect-ratio: 5 / 3.3;
  object-fit: cover;
  background: #111;
  display: block;
  height: auto;
}
.other-card__placeholder {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.other-card__body { padding: 14px; }
.other-card__title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 6px;
}
.other-card__arrow {
  font-size: 11px;
  color: #FFFF00;
  font-weight: 700;
}

/* Retour */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFF00;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 28px;
  transition: opacity 0.2s;
}
.back-link:hover { opacity: 0.7; }

/* ── Comments ── */
.comments-section { margin-top: 60px; }
.comments-title {
  font-size: 18px; font-weight: 800; color: #FFFF00;
  letter-spacing: 1px; margin-bottom: 24px;
}

.comment {
  background: #1a1a1a; border: 1px solid #2a2a2a;
  border-radius: 8px; padding: 16px 20px; margin-bottom: 12px;
  position: relative;
}
.comment__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.comment__author {
  font-size: 13px; font-weight: 700; color: #ccc;
}
.comment__author--admin {
  color: #FFFF00;
  background: rgba(255,255,0,.1);
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,0,.25);
}
.comment__date { font-size: 11px; color: #555; }
.comment__body { font-size: 13px; color: #bbb; line-height: 1.7; margin: 0; }

.comment__actions {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.comment__action-btn {
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 4px;
  color: #555;
  transition: color .2s, background .2s;
}
.comment__action-btn svg { width: 14px; height: 14px; }
.comment__action-btn:hover { background: rgba(255,255,255,.04); }
.comment__action-btn.is-delete { color: #f87171; }
.comment__action-btn.is-delete:hover { background: rgba(248,113,113,.12); color: #fca5a5; }
.comment__action-btn.is-report { color: #888; }
.comment__action-btn.is-report:hover { color: #FFFF00; background: rgba(255,255,0,.06); }

.comment__reply-btn {
  background: none; border: none; color: #666; font-size: 11px;
  cursor: pointer; padding: 4px 0; margin-top: 8px; font-weight: 600;
  transition: color .2s;
}
.comment__reply-btn:hover { color: #FFFF00; }

/* Replies */
.comment__replies {
  margin-left: 24px; padding-left: 16px;
  border-left: 2px solid #222;
}
.comment__replies .comment {
  background: #151515; border-color: #222;
}

/* Reply form (inline, hidden by default) */
.reply-form { display: none; margin-top: 12px; }
.reply-form.show { display: block; }
.reply-form textarea {
  width: 100%; background: #111; border: 1px solid #333;
  border-radius: 4px; padding: 10px 14px; color: #fff;
  font-size: 13px; resize: vertical; outline: none;
  font-family: inherit; min-height: 60px; box-sizing: border-box;
}
.reply-form textarea:focus { border-color: #FFFF00; }
.reply-form__actions {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.reply-form__actions input {
  background: #111; border: 1px solid #333; border-radius: 4px;
  padding: 8px 12px; color: #fff; font-size: 12px; outline: none;
}
.reply-form__actions input:focus { border-color: #FFFF00; }
.reply-form__submit {
  background: #FFFF00; color: #000; border: none; padding: 8px 16px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; border-radius: 3px;
}
.reply-form__submit:hover { opacity: .85; }

/* Main comment form */
.comment-form-box {
  margin-top: 32px; background: #111; border: 1px solid #222;
  border-radius: 8px; padding: 24px;
}
.comment-form-box h3 {
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 20px; letter-spacing: 1px; text-transform: uppercase;
}
.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form input, .comment-form textarea {
  background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
  padding: 10px 14px; color: #fff; font-size: 13px; outline: none;
  font-family: inherit;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: #FFFF00; }
.comment-form textarea { resize: vertical; min-height: 80px; }
.comment-form__submit {
  align-self: flex-start; background: #FFFF00; color: #000; border: none;
  padding: 10px 24px; font-size: 11px; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer; border-radius: 3px;
}
.comment-form__submit:hover { opacity: .85; }

/* ── Comment modals (delete confirm + report reason) ── */
.ad-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.ad-modal-overlay.hidden { display: none; }
.ad-modal {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
}
.ad-modal__icon-wrap {
  display: flex; justify-content: center; margin-bottom: 14px;
}
.ad-modal__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 22px; font-weight: 900;
}
.ad-modal__icon.is-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.25);
}
.ad-modal__icon.is-info {
  background: rgba(255,255,0,.12);
  color: #FFFF00;
}
.ad-modal__title {
  font-size: 14px; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin: 0 0 10px;
}
.ad-modal__msg {
  font-size: 13px; color: #aaa; margin: 0 0 18px; line-height: 1.6;
}
.ad-modal__reasons {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  margin: 0 0 20px;
}
.ad-modal__reason {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ad-modal__reason:hover { border-color: #FFFF00; }
.ad-modal__reason input[type=radio] { accent-color: #FFFF00; cursor: pointer; }
.ad-modal__reason span { color: #ddd; font-size: 13px; }
.ad-modal__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ad-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 11px; font-weight: 900;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 3px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.ad-btn--secondary { background: transparent; color: #ccc; border-color: #333; }
.ad-btn--secondary:hover { border-color: #FFFF00; color: #FFFF00; }
.ad-btn--warning {
  background: #f59e0b; color: #000; border-color: #f59e0b;
}
.ad-btn--warning:hover { box-shadow: 0 0 24px rgba(245, 158, 11, 0.45); }
.ad-btn--primary {
  background: #FFFF00; color: #000; border-color: #FFFF00;
}
.ad-btn--primary:hover { box-shadow: 0 0 24px rgba(255, 255, 0, 0.45); }

.ad-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.ad-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.ad-toast.is-success { border-color: rgba(52,211,153,.45); color: #34d399; }
.ad-toast.is-error   { border-color: rgba(248,113,113,.45); color: #f87171; }

@media (max-width: 600px) {
  .article-detail__title { font-size: 24px; }
  .other-articles__grid { grid-template-columns: 1fr 1fr; }
  .comment__replies { margin-left: 12px; padding-left: 12px; }
  .other-card__img { aspect-ratio: 5 / 3.3; }
  .article-detail__hero img { aspect-ratio: 5 / 3.3; }
}