/*
 * comment.css — formulaire de depot inline PUBLIC (front wandaloo, DARK MODE).
 * Style templates/comment-form.php. Namespace wl-comment-* / wl-cm-*.
 * Tons alignes sur le theme sombre (forum-list-2025.css). Accent charte #DD4925.
 */

.wl-comment-form {
  width:100%; max-width:640px; margin:10px auto 30px;
  font-size:15px; line-height:1.5; box-sizing:border-box;
}
.wl-comment-form *, .wl-comment-form *::before, .wl-comment-form *::after { box-sizing:border-box; }

/* --- Carte sombre : avatar + corps --- */
.wl-cm-box {
  display:flex; gap:12px;
  background:#2E353E; border:1px solid #3d4550; border-radius:12px;
  padding:16px 18px;
}
.wl-cm-avatar {
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:rgba(221,73,37,.15); color:#DD4925;
  display:flex; align-items:center; justify-content:center;
}
.wl-cm-body { flex:1; min-width:0; }

/* --- Textarea auto-grow (JS gere la hauteur) --- */
.wl-comment-form textarea {
  display:block; width:100%; min-height:38px; resize:none; overflow:hidden;
  padding:8px 12px; border:1px solid #3d4550; border-radius:8px;
  background:#242830; font-family:inherit; font-size:15px; line-height:1.5; color:#e6e6e6;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.wl-comment-form textarea:focus {
  outline:none; border-color:#DD4925; box-shadow:0 0 0 2px rgba(221,73,37,.2);
}
.wl-comment-form textarea::placeholder { color:#7d8794; }

/* --- Champs nom/email : caches, revelés au focus par JS --- */
.wl-cm-extra { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.wl-cm-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.wl-comment-form input[type="text"],
.wl-comment-form input[type="email"] {
  display:block; width:100%; padding:9px 12px;
  border:1px solid #3d4550; border-radius:8px; background:#242830;
  font-family:inherit; font-size:14px; color:#e6e6e6;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.wl-comment-form input[type="text"]:focus,
.wl-comment-form input[type="email"]:focus {
  outline:none; border-color:#DD4925; box-shadow:0 0 0 2px rgba(221,73,37,.2);
}
.wl-comment-form input::placeholder { color:#7d8794; }

/* --- Barre d'action : cachee, revelée au focus par JS --- */
.wl-cm-actions {
  max-height:0; overflow:hidden; transition:max-height .28s ease;
  display:flex; align-items:center; justify-content:space-between;
}
.wl-cm-actions.wl-cm-open { max-height:70px; margin-top:14px; }
.wl-cm-extra.wl-cm-open   { max-height:120px; }
.wl-cm-hint { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#7d8794; }
.wl-cm-hint svg { flex-shrink:0; }

/* --- Bouton --- */
.wl-comment-submit {
  padding:9px 24px; border:none; border-radius:8px;
  background:#DD4925; color:#fff; font-family:inherit; font-size:15px; font-weight:600;
  cursor:pointer; transition:background-color .15s ease, opacity .15s ease;
}
.wl-comment-submit:hover { background:#c23d1d; }
.wl-comment-submit:disabled, .wl-comment-submit[disabled] { opacity:.6; cursor:not-allowed; background:#DD4925; }

/*
 * --- Erreur de champ obligatoire (reprise visuelle de custom-err legacy) ---
 * Meme rendu que jQuery Validation legacy : rouge #900, 10px, sous le champ.
 */
.wl-comment-form input.wl-cm-invalid { border-color:#A94442; box-shadow:0 0 0 2px rgba(169,68,66,.2); }
.wl-cm-err { grid-column:1 / -1; margin:2px 0 0; font-size:12px; color:#A94442; }

/*
 * --- Honeypot anti-bot : hors ecran, RESTE dans le DOM ---
 * Regle NON negociable (le style inline a ete retire du template : il vit ICI).
 */
.wl-cm-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* --- Zone feedback (succes neutre / erreur) --- */
.wl-comment-msg { margin:10px 0 0; font-size:14px; }
.wl-comment-msg:empty { margin:0; }
.wl-comment-msg.is-ok    { padding:8px 12px; border:1px solid #2f5a3a; border-radius:6px; background:#1e3324; color:#7fca92; }
.wl-comment-msg.is-error { padding:8px 12px; border:1px solid #6b2f2f; border-radius:6px; background:#3a1e1e; color:#e39a9a; }

/* --- Responsive --- */
@media (max-width:767px) {
  .wl-cm-row { grid-template-columns:1fr; }
  .wl-comment-submit { padding:9px 20px; }
}

/*
 * --- SHADOW DISPLAY : commentaire "fantome" visible du seul auteur ---
 * Insere cote client apres depot accepte. Non persistant. Neutre. Dark.
 */
.wl-comment-pending {
  position:relative; margin:0 0 18px; padding:14px 16px 12px;
  border-left:3px solid #DD4925; border-radius:0 8px 8px 0;
  background:#2E353E; list-style:none; color:#e6e6e6;
}
.wl-comment-pending-badge {
  display:inline-flex; align-items:center; gap:4px; margin-bottom:8px;
  padding:2px 8px; border-radius:20px; background:rgba(221,73,37,.15); color:#DD4925;
  font-size:11px; font-weight:600;
}
.wl-comment-pending .wl-comment-pending-titre { margin:0 0 4px; font-weight:600; color:#fff; }
.wl-comment-pending .icone { margin:0 0 6px; font-size:13px; color:#90B6C9; }
.wl-comment-pending .message { margin:0 0 8px; white-space:pre-wrap; word-wrap:break-word; }
.wl-comment-pending-note { margin:0; font-size:12px; font-style:italic; color:#b5654a; }