/* ═══════════════════════════════════════════════════════════════════
   GEO MARQUE v4 — questions et réponses partagées par Summary, Why they
   win et Answers (brand_ui_answers.py), 2026-10-01.
   Classes `brand-qa-*` seulement, feuille AUTONOME : elle ne dépend que
   des jetons de z_compass.css (--navy, --white, --c-line, --c-pale,
   --c-soft, --c-muted, --c-cyan-ink, --c-ahead, --c-behind).
   Une table, une ligne dépliée, les réponses : rien d'autre. Le mot
   porte le sens, jamais la couleur seule. Téléphone (< 640 px) : la
   table passe en cartes, aucun défilement horizontal de la page ; aucun
   blanc insécable sur du contenu variable.
   ═══════════════════════════════════════════════════════════════════ */

.brand-qa { min-width: 0; margin: 6px 0 14px; }
.brand-qa-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.brand-qa-empty { margin: 6px 0; }

/* ── Table des questions ── */
.brand-qa-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--navy); }
.brand-qa-table th {
    padding: 6px 12px 6px 0; text-align: left; vertical-align: bottom;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted);
}
.brand-qa-table td {
    padding: 8px 12px 8px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--c-line);
    overflow-wrap: anywhere;
}
.brand-qa-row { cursor: pointer; }
.brand-qa-row:hover td { background: var(--c-pale); }
.brand-qa-row.is-open td { background: var(--c-soft); }
.brand-qa-row.is-open td:first-child { box-shadow: inset 3px 0 0 var(--c-cyan-ink); }
.brand-qa-q { min-width: 200px; }
.brand-qa-q-btn, .brand-qa-open-btn {
    border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--navy);
    text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.brand-qa-q-btn:hover, .brand-qa-q-btn:focus-visible,
.brand-qa-open-btn:hover, .brand-qa-open-btn:focus-visible { text-decoration: underline; }
.brand-qa-open-btn { font-size: 12.5px; font-weight: 600; color: var(--c-cyan-ink); }
.brand-qa-result { font-weight: 600; }
.brand-qa-result.is-good { color: var(--c-ahead); }
.brand-qa-result.is-bad { color: var(--c-behind); }
.brand-qa-result.is-none { color: var(--c-muted); font-weight: 500; }
.brand-qa-votes { font-variant-numeric: tabular-nums; }
.brand-qa-about, .brand-qa-theme, .brand-qa-reason { font-size: 12.5px; }
.brand-qa-quote-cell { font-size: 12.5px; font-style: italic; color: var(--c-muted); max-width: 420px; }

/* ── Ligne dépliée : les réponses ── */
.brand-qa-detail-row > td { background: var(--c-soft); border-top: 0; padding: 0 0 14px 0; }
.brand-qa-detail {
    border-left: 3px solid var(--c-cyan-ink); background: var(--white); padding: 12px 16px;
    display: grid; gap: 8px; min-width: 0;
}
.brand-qa-answers { display: grid; gap: 8px; min-width: 0; }
.brand-qa-answer { border: 1px solid var(--c-line); padding: 8px 12px; min-width: 0; }
.brand-qa-answer > .brand-qa-answer-title {
    cursor: pointer; font-size: 12px; font-weight: 600; color: var(--c-cyan-ink); overflow-wrap: anywhere;
}
.brand-qa-answer[open] > .brand-qa-answer-title { margin-bottom: 6px; }
.brand-qa-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; color: var(--navy); }
.brand-qa-quote {
    background: var(--c-soft); color: var(--navy); font-weight: 600; padding: 0 2px;
    border-bottom: 2px solid var(--c-cyan-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.brand-qa-quote-line {
    margin: 0 0 6px; padding: 4px 10px; border-left: 3px solid var(--c-cyan-ink); background: var(--c-soft);
    font-size: 12.5px; font-style: italic; color: var(--navy); overflow-wrap: anywhere;
}
/* Aperçu puis la SUITE seulement (le texte n'est jamais envoyé deux fois). */
.brand-qa-more > summary { cursor: pointer; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--c-cyan-ink); }
.brand-qa-more[open] > summary { display: none; }
.brand-qa-body:has(> .brand-qa-more[open]) .brand-qa-ellipsis { display: none; }

/* ── Sites cités ── */
.brand-qa-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; min-width: 0; }
.brand-qa-sites-none { margin-top: 8px; }
.brand-qa-sites-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-muted); margin-right: 4px;
}
.brand-qa-site {
    display: inline-block; max-width: 100%; min-width: 0; border: 1px solid var(--c-line); border-radius: 999px;
    padding: 0 9px; font-size: 11.5px; line-height: 1.7; color: var(--navy); background: var(--white);
    text-decoration: none; overflow-wrap: anywhere;
}
a.brand-qa-site:hover, a.brand-qa-site:focus-visible { border-color: var(--c-cyan-ink); }
.brand-qa-site.is-unknown { background: var(--c-pale); color: var(--c-muted); border-style: dashed; }
.brand-qa-site-hint, .brand-qa-site-n { font-size: 10.5px; color: var(--c-muted); }

.brand-qa-close {
    justify-self: start; border: 1px solid var(--c-line); background: var(--white); color: var(--navy);
    border-radius: 999px; padding: 3px 14px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.brand-qa-close:hover, .brand-qa-close:focus-visible { border-color: var(--navy); }

/* ── Pager ── */
.brand-qa-pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0;
    font-size: 12.5px; color: var(--c-muted);
}
.brand-qa-pager-nav { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.brand-qa-page-btn {
    border: 1px solid var(--c-line); background: var(--white); color: var(--navy); border-radius: 999px;
    padding: 4px 14px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.brand-qa-page-btn:hover:not(:disabled) { border-color: var(--navy); }
.brand-qa-page-btn:disabled { opacity: 0.4; cursor: default; }
.brand-qa-page {
    border: 0; background: none; padding: 2px 7px; font: inherit; font-size: 12.5px; color: var(--c-cyan-ink);
    cursor: pointer; border-radius: 4px;
}
.brand-qa-page.is-current { color: var(--navy); font-weight: 700; cursor: default; background: var(--c-pale); }

/* ── Téléphone : la table devient une liste de cartes ── */
@media (max-width: 640px) {
    .brand-qa-wrap { overflow-x: visible; }
    .brand-qa-table, .brand-qa-table tbody, .brand-qa-table tr, .brand-qa-table td { display: block; width: 100%; box-sizing: border-box; }
    .brand-qa-table thead { display: none; }
    .brand-qa-table tr.brand-qa-row { border-top: 1px solid var(--c-line); padding: 8px 0; }
    .brand-qa-table tr.brand-qa-row td { border-top: 0; padding: 2px 0; max-width: none; min-width: 0; }
    .brand-qa-detail { padding: 10px 10px; }
}