/* ==========================================================
   Épanovia — Journal : widget likes + commentaires
   Palette reprise du site : vert sauge / beige / corail / crème
   ========================================================== */

.epv-box{
  --epv-vert-profond:#2A453C;
  --epv-vert-sauge:#93A38E;
  --epv-terracotta:#A2554D;
  --epv-beige:#E7DBC6;
  --epv-creme:#FBF6EC;
  --epv-creme-clair:#FFFDF8;
  --epv-encre:#2E2B27;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--epv-beige);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--epv-encre);
}

/* -- Ligne d'en-tête : "Commentaires" + bouton "j'aime" ----- */
.epv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.epv-comments-title{
  font-family:'Poppins',sans-serif;font-weight:500;
  color:var(--epv-vert-profond);
  font-size:.98rem;margin:0;
}
.epv-like-btn{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  border:1.5px solid var(--epv-vert-sauge);
  background:var(--epv-creme-clair);
  color:var(--epv-vert-profond);
  border-radius:999px;
  padding:7px 15px;
  font-size:.85rem;font-weight:500;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.epv-like-btn:hover{transform:translateY(-1px);}
.epv-like-btn .epv-heart{font-size:.95rem;line-height:1;}
.epv-like-btn[aria-pressed="true"]{
  background:var(--epv-terracotta);
  border-color:var(--epv-terracotta);
  color:var(--epv-creme-clair);
}

/* -- Ligne du dessous : état des commentaires + du like ----- */
.epv-subhead{display:flex;align-items:baseline;gap:12px;margin-top:6px;}
.epv-like-count{font-size:.8rem;color:#6b675c;white-space:nowrap;flex:none;margin-left:auto;}

/* -- Section commentaires ------------------------------------ */
.epv-comment-list{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.epv-comment{
  background:var(--epv-creme-clair);
  border:1px solid var(--epv-beige);
  border-radius:12px;
  padding:11px 14px;
}
.epv-comment-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.epv-comment-name{font-weight:600;color:var(--epv-vert-profond);font-size:.88rem;}
.epv-comment-date{font-size:.72rem;color:#8a877d;}
.epv-comment-text{font-size:.88rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;}
.epv-comment-text a{color:var(--epv-terracotta);text-decoration:underline;text-underline-offset:2px;}
.epv-comment-text a:hover{color:var(--epv-vert-profond);}
.epv-empty{font-size:.84rem;color:#8a877d;font-style:italic;margin:0;}

/* -- Lien pour ouvrir le formulaire ----------------------------- */
.epv-comment-toggle{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font:inherit;background:none;border:none;cursor:pointer;
  font-size:.85rem;font-weight:500;color:var(--epv-vert-profond);
  text-decoration:underline;text-underline-offset:2px;padding:0;
}
.epv-comment-toggle:hover{color:var(--epv-terracotta);}

/* -- Formulaire ------------------------------------------------- */
.epv-form{background:var(--epv-beige);border-radius:14px;padding:16px;margin-top:10px;}
.epv-form p.epv-lede{font-size:.7rem;color:var(--epv-vert-profond);opacity:.8;margin:0 0 10px;}
.epv-field{margin-bottom:10px;}
.epv-field label{display:block;font-size:.76rem;font-weight:500;color:var(--epv-vert-profond);margin-bottom:4px;}
.epv-field input[type="text"],
.epv-field input[type="email"],
.epv-field textarea{
  width:100%;
  border:1.5px solid var(--epv-vert-sauge);
  border-radius:9px;
  padding:8px 12px;
  font-family:inherit;
  font-size:.88rem;
  background:var(--epv-creme-clair);
  color:var(--epv-encre);
  resize:vertical;
}
.epv-field textarea{min-height:60px;}
.epv-field input:focus,.epv-field textarea:focus{outline:2px solid var(--epv-terracotta);outline-offset:1px;}
.epv-field-hint{font-size:.7rem;color:var(--epv-vert-profond);opacity:.75;margin:4px 0 0;}
.epv-honeypot{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden;}

.epv-submit{
  display:inline-block;border:none;border-radius:999px;
  background:var(--epv-terracotta);color:var(--epv-creme-clair);
  padding:8px 20px;font-size:.85rem;font-weight:500;cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.epv-submit:hover{background:#8f4941;transform:translateY(-1px);}
.epv-submit:disabled{opacity:.6;cursor:default;transform:none;}

.epv-feedback{margin-top:10px;font-size:.82rem;border-radius:9px;padding:8px 12px;display:none;}
.epv-feedback.epv-show{display:block;}
.epv-feedback.epv-ok{background:#e2ece1;color:var(--epv-vert-profond);}
.epv-feedback.epv-err{background:#f3e1de;color:var(--epv-terracotta);}

/* -- Réponses à un commentaire -------------------------------- */
.epv-reply-list{
  display:flex;flex-direction:column;gap:8px;
  margin:10px 0 0 18px;
  padding-left:14px;
  border-left:2px solid var(--epv-beige);
}
.epv-reply{background:var(--epv-beige);border-radius:10px;padding:9px 12px;}
.epv-reply.epv-reply-official{background:#e9efe7;border:1px solid var(--epv-vert-sauge);}

/* -- Bouton "Répondre" sous un commentaire, plus discret que le
   bouton principal "Laisser un commentaire" -------------------- */
.epv-reply-toggle{font-size:.8rem;margin-top:4px;}

/* -- Formulaire de réponse : identique au formulaire principal mais
   un peu plus compact et légèrement en retrait -------------------- */
.epv-form-reply{margin:8px 0 0 18px;padding:12px 14px;}

/* -- Badge "certifié Épanovia" sur une réponse officielle ----------
   Logo officiel chargé depuis assets/logo-epanovia.png (même badge
   généré côté admin, fonction epv_official_badge() dans
   admin/index.php — garder les deux synchronisés si l'un change). -- */
.epv-official-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--epv-creme-clair);
  border:1.5px solid var(--epv-vert-sauge);
  color:var(--epv-vert-profond);
  border-radius:999px;
  padding:2px 10px 2px 3px;
  font-size:.78rem;font-weight:600;
  line-height:1.5;
}
.epv-official-badge img{
  width:20px;height:20px;border-radius:50%;
  display:block;flex:none;object-fit:cover;
}