/*
 * aqua-lowtech / comments.css
 * Commentaires (template-parts/content.php)
 * Genere depuis main.css + style.css - ordre des rules preserve.
 */

/* ============================================================
   AQUA LOWTECH — Section Commentaires
   À ajouter à la FIN de main.css
   Mobile-First | Variables CSS existantes du thème
   ============================================================ */
/* ──────────────────────────────────────────────────────────
   CONTENEUR PRINCIPAL
   ────────────────────────────────────────────────────────── */
.comments-section {
    max-width: 800px;
    margin: var(--spacing-xl) auto 0;
    padding: 0 var(--spacing-sm);
}

.comments-inner {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: var(--spacing-md);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

/* ──────────────────────────────────────────────────────────
   TITRE DE LA SECTION COMMENTAIRES
   ────────────────────────────────────────────────────────── */
.comments-title,
.comment-reply-title {
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 3px solid var(--color-accent);
}

/* ──────────────────────────────────────────────────────────
   LISTE DES COMMENTAIRES
   ────────────────────────────────────────────────────────── */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

/* Lien Répondre.
   Classe produite par comment_reply_link() au rendu : elle n'apparaît dans
   aucun class="" du thème. Position conservée par rapport à main.css. */
.comment-reply-link {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--color-primary);
    border: 1px solid var(--color-accent);
    border-radius: 20px;
    padding: 0.2rem 0.75rem;
    margin-top: 0.5rem;
    transition: var(--transition-smooth);
}

.comment-reply-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Réponses imbriquées.
   Seul repère d'imbrication du fil. Contrairement à .comment, le <ol
   class="children"> ne contient que les réponses : sa hauteur correspond
   donc exactement au bloc enfant, sans débordement vertical.
   Filet neutre et fin, volontairement sans teinte verte, pour qu'il se lise
   comme un repère de structure et non comme un élément de marque. */
.comment-list .children {
    list-style: none;
    padding-left: 1.25rem;
    border-left: 2px solid rgba(0, 0, 0, 0.07);
    margin-top: var(--spacing-sm);
}

/* Les cartes imbriquées reposent sur la carte parente, de même couleur.
   On les passe en blanc pour conserver une séparation visible une fois la
   bordure latérale retirée. */
.comment-list .children .comment {
    background-color: var(--color-white);
}

/* Note obligatoire */
.comment-notes {
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: var(--spacing-sm);
}

.comment-notes .required {
    color: var(--color-primary);
    font-weight: 700;
}

/* Ligne nom + email côte à côte sur desktop */
.comment-form-row {
    display: grid;
    grid-template-columns: 1fr;   /* Mobile : 1 colonne */
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 600px) {
  .comment-form-row {
          grid-template-columns: 1fr 1fr;  /* Desktop : 2 colonnes */
      }

}

/* Groupe label + input */
.comment-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--spacing-sm);
}

.comment-field-message {
    margin-bottom: var(--spacing-sm);
}

#commentform label .required {
    color: var(--color-primary);
    margin-left: 2px;
}

/* Bouton soumettre */
.btn-comment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    /* Voir --color-secondary-cta : la borne claire d'origine tombait à 2,47:1. */
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-cta));
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-main);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.25);
    margin-top: var(--spacing-xs);
}

.btn-comment-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 106, 79, 0.35);
}

.btn-comment-submit:active {
    transform: translateY(0);
}

/* Message "commentaires fermés" */
.comments-closed {
    text-align: center;
    font-style: italic;
    color: var(--color-text-light);
    padding: var(--spacing-sm);
    background-color: var(--color-bg);
    border-radius: var(--aq-rayon);
    margin-top: var(--spacing-md);
}

.comment-confirmation {
  padding: 14px 18px;
  border-radius: var(--aq-rayon);
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
}

.comment-confirmation--success {
  background: #e8f5e9;
  color: #1f5c38;
  border: 1px solid #a5d6a7;
}

.comment-confirmation--pending {
  background: #fff8e1;
  color: #8d6e00;
  border: 1px solid #ffe082;
}

@media (max-width: 480px) {
  .comments-inner {
          padding: var(--spacing-sm);
      }

  .comments-title,
    .comment-reply-title {
          font-size: 1.25rem;
      }

  .comment-list .children {
          padding-left: 0.75rem;
      }

}