/*
 * Fast⚡︎CMS — Section commentaires partagée (tous les thèmes).
 * Thématisée via les variables CSS du thème actif, avec des replis neutres
 * pour les thèmes qui ne les définissent pas.
 */

/* Mappage des variables du thème → variables locales, avec replis. Appliqué à
   tous les composants partagés (commentaires + encadrés auteur). */
.fc-comments,
.fc-author-box,
.fc-author-inline,
.fc-article-meta,
.fc-pagination {
    --fcc-accent:  var(--accent, var(--bs-primary, #6c63ff));
    --fcc-border:  var(--border, var(--border-color, var(--bs-border-color, rgba(128, 128, 128, .22))));
    --fcc-surface: var(--bg-card, var(--surface, var(--accent-bg, rgba(128, 128, 128, .06))));
    --fcc-radius:  8px;
}

.fc-comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--fcc-border);
}

.fc-comments__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
}
.fc-comments__count {
    font-size: .875rem;
    font-weight: 400;
    opacity: .5;
}

.fc-comments__notice {
    background: color-mix(in srgb, var(--fcc-accent) 12%, transparent);
    border-left: 3px solid var(--fcc-accent);
    padding: 1rem 1.25rem;
    border-radius: var(--fcc-radius);
    margin-bottom: 1.5rem;
}

.fc-comments__notice--error {
    background: color-mix(in srgb, #e05252 14%, transparent);
    border-left-color: #e05252;
}

.fc-comments__empty {
    opacity: .6;
    margin: 0 0 1.5rem;
}

/* ── Un commentaire ────────────────────────────────────────────────────────── */
.fc-comment {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--fcc-border);
    padding: 1.25rem 0;
}
.fc-comment__body { flex: 1; min-width: 0; }
.fc-comment__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .35rem;
}
.fc-comment__author-wrap {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.fc-comment__author { font-size: .95rem; }
.fc-comment__badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    padding: .2rem .45rem;
    border-radius: 100px;
}
.fc-comment__badge i { font-size: .8em; }
/* « Vérifié » : membre connecté (couleur d'accent). */
.fc-comment__badge--verified {
    color: var(--fcc-accent);
    background: color-mix(in srgb, var(--fcc-accent) 14%, transparent);
}
/* « Auteur » : auteur de l'article (vert succès, plus distinctif). */
.fc-comment__badge--author {
    color: #2e9e63;
    background: color-mix(in srgb, #2e9e63 16%, transparent);
}
.fc-comment__date {
    font-size: .8rem;
    opacity: .5;
    white-space: nowrap;
}
.fc-comment__content {
    margin: 0;
    line-height: 1.7;
    opacity: .9;
    overflow-wrap: anywhere;
}

/* Avatar (SVG initiales ou image Gravatar) généré par commentAvatarHtml(). */
.comment-avatar {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Formulaire ────────────────────────────────────────────────────────────── */
.fc-comments__form { margin-top: 2rem; }

.fc-comments__form > summary.fc-comments__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    cursor: pointer;
    padding: .65rem 1.5rem;
    background: var(--fcc-accent);
    color: #fff;
    border-radius: var(--fcc-radius);
    font-weight: 600;
    font-size: .9rem;
    user-select: none;
    transition: filter .2s;
}
.fc-comments__form > summary.fc-comments__toggle::-webkit-details-marker { display: none; }
.fc-comments__form > summary.fc-comments__toggle:hover { filter: brightness(1.08); }

/* Mode « toujours ouvert » (réglage désactivé) : pas de bouton, formulaire visible. */
.fc-comments__form.is-open > summary.fc-comments__toggle { display: none; }

.fc-comments__form-body { margin-top: 1rem; }
.fc-comments__subtitle {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.fc-comments__hp { display: none !important; }

.fc-comments__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}
@media (max-width: 540px) {
    .fc-comments__row { grid-template-columns: 1fr; }
}

.fc-comments__fields input[type="text"],
.fc-comments__fields input[type="email"],
.fc-comments__fields textarea {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--fcc-border);
    border-radius: var(--fcc-radius);
    background: var(--fcc-surface);
    color: inherit;
    font: inherit;
    font-size: .9rem;
}
.fc-comments__fields textarea {
    resize: vertical;
    margin-bottom: .75rem;
}
.fc-comments__fields input:focus,
.fc-comments__fields textarea:focus {
    outline: none;
    border-color: var(--fcc-accent);
}

.fc-comments__submit {
    padding: .65rem 1.5rem;
    background: var(--fcc-accent);
    color: #fff;
    border: none;
    border-radius: var(--fcc-radius);
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
    transition: filter .2s;
}
.fc-comments__submit:hover { filter: brightness(1.08); }

/* ── Méta de liste d'articles (auteur + commentaires + tags) ──────────────── */
.fc-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: .35rem 0 .25rem;
    font-size: .85rem;
}
.fc-article-meta__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    opacity: .8;
}
.fc-article-meta__comments.is-empty { opacity: .6; }
.fc-article-meta__tags {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.fc-article-meta__tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    padding: .12rem .5rem;
    border-radius: 100px;
    text-decoration: none;
    color: var(--fcc-accent);
    border: 1px solid color-mix(in srgb, var(--fcc-accent) 35%, transparent);
    background: color-mix(in srgb, var(--fcc-accent) 8%, transparent);
    transition: background .2s;
}
.fc-article-meta__tag:hover { background: color-mix(in srgb, var(--fcc-accent) 18%, transparent); }
.fc-article-meta__tag i { font-size: .8em; opacity: .8; }

/* ── Crédit auteur compact (liste d'articles) ─────────────────────────────── */
.fc-author-inline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    opacity: .85;
}
.fc-author-inline__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.fc-author-inline__name { font-weight: 600; }

/* ── Encadré « À propos de l'auteur » (page article) ──────────────────────── */
.fc-author-box {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--fcc-border);
    border-radius: 12px;
    background: var(--fcc-surface);
}
.fc-author-box__img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.fc-author-box__body { flex: 1; min-width: 0; }
.fc-author-box__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .55;
    margin-bottom: .15rem;
}
.fc-author-box__name {
    font-size: 1.1rem;
    font-weight: 700;
}
.fc-author-box__meta {
    font-size: .85rem;
    opacity: .7;
    margin-top: .15rem;
}
.fc-author-box__bio {
    margin: .6rem 0 0;
    line-height: 1.6;
    opacity: .9;
}
.fc-author-box__socials {
    display: flex;
    gap: .65rem;
    margin-top: .8rem;
    font-size: 1.05rem;
}
.fc-author-box__socials a {
    color: var(--fcc-accent);
    transition: filter .2s;
}
.fc-author-box__socials a:hover { filter: brightness(1.15); }

/* ── Pagination (3 styles) ─────────────────────────────────────────────────── */
.fc-pagination { margin: 2rem 0 0; }
.fc-pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.fc-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .6rem;
    border: 1px solid var(--fcc-border, rgba(128,128,128,.3));
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .2s, border-color .2s, color .2s;
}
.fc-pagination__link:hover { border-color: var(--fcc-accent); color: var(--fcc-accent); }
.fc-pagination__link.is-current {
    background: var(--fcc-accent);
    border-color: var(--fcc-accent);
    color: #fff;
    font-weight: 600;
}
.fc-pagination__link.is-disabled { opacity: .4; pointer-events: none; }
.fc-pagination__ellipsis { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 .35rem; opacity: .6; }

.fc-pagination--load_more,
.fc-pagination--infinite_scroll { text-align: center; }
.fc-pagination__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    border: 1.5px solid var(--fcc-accent);
    border-radius: 100px;
    text-decoration: none;
    color: var(--fcc-accent);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.fc-pagination__more:hover { background: var(--fcc-accent); color: #fff; }
.fc-pagination.is-loading .fc-pagination__more { opacity: .6; pointer-events: none; }