/* Section des commentaires (Isso) au bas des articles du journal.
   Les couleurs viennent des variables de chaque article (--accent, --light,
   --border, --white) : la section suit la palette bleue ou brune de la page.
   --lien-commentaires reprend la couleur des étiquettes de catégorie. */

.commentaires {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding: 40px 0 50px;
}
.commentaires h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem; color: var(--accent); margin-bottom: 20px;
}

#isso-thread { color: color-mix(in srgb, var(--light) 78%, transparent); }
#isso-thread a { color: var(--lien-commentaires, #7cb9ff); }
#isso-thread .isso-thread-heading { color: var(--light); }
#isso-thread .isso-author, #isso-thread .author { color: var(--white); }

/* Formulaire */
#isso-thread textarea,
#isso-thread input[type=text],
#isso-thread input[type=email],
#isso-thread input[type=url] {
  background: rgba(255,255,255,0.06); color: var(--light);
  border: 1px solid var(--border); border-radius: 6px;
}
#isso-thread textarea, #isso-thread input { font-family: inherit; }
#isso-thread input[type=submit],
#isso-thread input[type=button] {
  background: var(--accent); color: #fff; border: none;
  border-radius: 6px; padding: 8px 16px; cursor: pointer;
}

/* Nom, courriel et site sur une ligne ; Aperçu et Soumettre en dessous, à droite */
#isso-thread .isso-auth-section { display: flex; flex-wrap: wrap; gap: 0 10px; }
#isso-thread .isso-input-wrapper { flex: 1 1 30%; min-width: 150px; margin: 0; }
#isso-thread .isso-input-wrapper input { width: 100%; box-sizing: border-box; }
#isso-thread .isso-post-action { float: none; margin: 12px 0 0; order: 1; }
#isso-thread .isso-post-action:has(input[name=preview]) { margin-left: auto; }
#isso-thread .isso-post-action:has(input[type=submit]) { order: 2; }

/* La cible d'alignement.com au lieu de l'avatar généré par Isso */
#isso-thread .isso-avatar {
  width: 48px; height: 48px;
  background: url(/images/avatar-commentaire.webp) center / contain no-repeat;
}
#isso-thread .isso-avatar svg { display: none; }