/* ═══════════════════════════════════════════════════════════════════
   GEO MARQUE v4 — onglet Words (callbacks_brand_words.py), 2026-10-02.
   Chargé après z_compass.css et z_compass_brand_ui.css (ordre des noms).
   Retour à la vue v2 : une carte par marque (2 colonnes), un nuage de
   40 termes chacune, taille = nombre de réponses qui emploient le terme ;
   clic → panneau de phrases dessous.
   Téléphone (375 px) : cartes empilées sous 640 px, aucun blanc insécable
   sur du contenu variable.
   ═══════════════════════════════════════════════════════════════════ */

.brand-words-base { display: block; }

/* ── Cartes : une marque par carte ── */
.brand-words-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    margin-top: 10px;
}
.brand-words-card {
    min-width: 0; padding: 14px 16px; border: 1px solid var(--c-line);
    border-radius: 10px; background: var(--c-card, #FFFFFF);
}
.brand-words-card-title {
    margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--navy); overflow-wrap: anywhere;
}
.brand-words-fallback { margin: 0 0 8px; font-size: 12.5px; color: var(--c-muted); overflow-wrap: anywhere; }

/* ── Nuage ── */
.brand-words-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.brand-words-term {
    border: 0; background: none; padding: 0; margin: 0; font-family: inherit; line-height: 1.2;
    color: var(--navy); cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.brand-words-term.is-bigram { color: var(--c-cyan-ink, #0E7C86); }
.brand-words-term:hover, .brand-words-term:focus-visible { text-decoration: underline; }
.brand-words-term.is-selected { text-decoration: underline; font-weight: 600; }
.brand-words-empty { margin: 0; font-size: 12.5px; color: var(--c-muted); overflow-wrap: anywhere; }

/* ── Panneau d'un terme (sous les cartes) ── */
.brand-words-panel {
    margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--c-line);
    border-radius: 8px; background: var(--c-pale, #F6F8FB); overflow-wrap: anywhere;
}
.brand-words-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 8px; }
.brand-words-panel-term { font-size: 15px; color: var(--navy); }
.brand-words-panel-counts { font-size: 13px; color: var(--c-muted); flex: 1 1 auto; }
.brand-words-close { margin-left: auto; }
.brand-words-example { padding: 8px 0; border-top: 1px solid var(--c-line); }
.brand-words-q { font-size: 13px; font-weight: 500; color: var(--navy); }
.brand-words-excerpt { margin: 4px 0; font-size: 13px; line-height: 1.5; color: var(--navy); }
.brand-words-excerpt mark { background: rgba(255, 216, 1, 0.45); color: inherit; padding: 0 1px; }

@media (max-width: 640px) {
    .brand-words-grid { grid-template-columns: minmax(0, 1fr); }
}