/* ===== FORMULAIRES (Search + Commentaires) ===== */

/* Search Form */
.search-form { padding: var(--spacing-lg); margin: var(--spacing-md) 0; }
.search-form-content { display: flex; gap: var(--spacing-sm); }
.search-field { flex: 1; padding: var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); background: rgba(10, 10, 11, 0.9); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); color: #ffffff; font-size: var(--font-size-base); }
.search-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255, 25, 131, 0.2); }
.search-field::placeholder { color: rgba(255, 255, 255, 0.5); }

/* Comments */
.comments-area { margin-top: var(--spacing-2xl); padding: var(--spacing-xl); }
.comments-title { font-size: var(--font-size-2xl); font-weight: 600; margin-bottom: var(--spacing-xl); color: #ffffff; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment { margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); background: rgba(10, 10, 11, 0.85); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); }
.comment-body { position: relative; }
.comment-meta { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.comment-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.comment-metadata { flex: 1; }
.author-name { font-weight: 600; color: #ffffff; text-decoration: none; }
.comment-date { font-size: var(--font-size-sm); color: #b4b4b8; margin-top: var(--spacing-xs); }
.comment-date a { color: inherit; text-decoration: none; }
.comment-awaiting-moderation { display: block; font-size: var(--font-size-sm); color: var(--warning-color); margin-top: var(--spacing-xs); }
.comment-content { margin-bottom: var(--spacing-md); line-height: 1.6; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-actions { display: flex; gap: var(--spacing-sm); }
.btn-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); }

/* Comment form */
.comment-respond { margin-top: var(--spacing-xl); padding: var(--spacing-xl); }
.comment-reply-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: var(--spacing-lg); color: #ffffff; }
.comment-form { display: grid; gap: var(--spacing-md); }
.comment-form p { margin: 0; }
.comment-form label { display: block; font-weight: 500; margin-bottom: var(--spacing-xs); color: #ffffff; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { width: 100%; padding: var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); background: rgba(10, 10, 11, 0.9); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); color: #ffffff; font-size: var(--font-size-base); font-family: var(--font-family); transition: all 0.3s ease; }
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255, 25, 131, 0.2); }
.comment-form input::placeholder,
.comment-form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.comment-form textarea { resize: vertical; min-height: 120px; }
.required { color: var(--primary); }

/* Nested comments */
.children { list-style: none; margin-top: var(--spacing-lg); padding-left: var(--spacing-xl); }
.children .comment { position: relative; }
.children .comment::before { content: ''; position: absolute; left: calc(-1 * var(--spacing-xl)); top: 0; width: 2px; height: 100%; background: var(--glass-border); }

/* Comment navigation */
.comment-navigation { margin: var(--spacing-xl) 0; padding: var(--spacing-md); }
.comment-navigation .nav-links { display: flex; justify-content: space-between; align-items: center; }
.comment-navigation a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.comment-navigation a:hover { text-decoration: underline; }

/* Helpers */
.no-comments { text-align: center; color: var(--text-secondary); font-style: italic; padding: var(--spacing-xl); }