/* ======================================================
   Iliade Digital — Comments (Premium)
   Fichier : assets/css/comments.css
   Dépend : variables.css + styles.css
   Scope  : .il-comments
   ====================================================== */

.il-comments{
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

/* Header */
.il-comments__head{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--alpha-ink-10);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.4vw, 22px);
}

.il-comments__titlewrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.il-comments__title{
  margin: 0;
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.il-comments__title .dashicons{
  color: rgba(23,160,81,.90);
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.il-comments__jump{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(16,19,35,.06);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 13px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.il-comments__jump .dashicons{ color: rgba(23,160,81,.90); }

@media (hover:hover){
  .il-comments__jump:hover{
    transform: translateY(-1px);
    border-color: rgba(23,160,81,.22);
    box-shadow: var(--shadow-sm);
  }
}

.il-comments__lead{
  margin: 10px 0 0;
  color: var(--muted);
}

/* Empty */
.il-comments__empty{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 16px;
  border-radius: var(--r-18);
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-sm);
}

.il-comments__emptyicon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: var(--pill-soft-bg);
  border: 1px solid var(--pill-soft-brd);
}

.il-comments__emptyicon .dashicons{
  color: rgba(23,160,81,.90);
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.il-comments__emptytxt{ color: var(--text-2); }
.il-comments__closed{ color: var(--muted); margin: 0; }

/* List wrapper */
.il-comments__listwrap{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--alpha-ink-10);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.4vw, 22px);
}

/* Native WP comment list elements */
.il-comments__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 14px;
}

/* Each comment (WP outputs .comment-body etc.) */
.il-comments .comment-body{
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.72);
  border-radius: var(--r-18);
  padding: 14px;
  box-shadow: 0 10px 22px rgba(16,19,35,.06);
}

.il-comments .comment-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.il-comments .comment-author{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-family: var(--font-head);
}

.il-comments .comment-author img{
  border-radius: 999px;
  border: 1px solid var(--alpha-ink-10);
}

.il-comments .comment-metadata a{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.il-comments .comment-content{
  color: var(--text-2);
}

.il-comments .comment-content p:last-child{ margin-bottom: 0; }

.il-comments .reply a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.74);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 13px;
}

@media (hover:hover){
  .il-comments .reply a:hover{
    border-color: rgba(23,160,81,.22);
    background: rgba(23,160,81,.06);
  }
}

/* Pagination (WP) */
.il-comments .nav-links{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.il-comments .nav-links a{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--alpha-ink-10);
  background: rgba(255,255,255,.74);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-head);
  font-weight: 900;
}

/* Form */
.il-comments__formwrap{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--alpha-ink-10);
  border-radius: var(--r-18);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.4vw, 22px);
}

.il-comments__formhead{
  display:grid;
  gap: 6px;
  margin-bottom: 12px;
}

.il-comments__formtitle{
  margin: 0;
  display:flex;
  align-items:center;
  gap: 10px;
}
.il-comments__formtitle .dashicons{
  color: rgba(23,160,81,.90);
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.il-comments__formhint{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Grid fields */
.il-cf{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px){
  .il-cf{ grid-template-columns: 1fr; }
}

.il-cf-field{ margin: 0; display:grid; gap: 8px; }
.il-cf-field--full{ grid-column: 1 / -1; }

.il-cf .required{ color: rgba(23,160,81,.90); font-weight: 900; }

.il-cf-actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.il-cf-status{
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.il-cf-logged{
  grid-column: 1 / -1;
  margin: 0 0 8px;
  color: var(--muted);
}





/* ✅ Pas de numérotation / puces */
.il-comments__list,
.il-comments__list > li{
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* WP peut mettre des styles sur .children */
.il-comments .children{
  list-style: none !important;
  margin: 12px 0 0;
  padding: 0 0 0 16px; /* indentation replies (ajuste si tu veux) */
}