/* ═══════════════════════════════════════════════════════════════════
   GEO MARQUE v4 — onglet Why they win (callbacks_brand_why.py),
   2026-10-01, SPEC_V4 §4.2. Chargé après z_compass.css et
   z_compass_brand_ui.css (assets triés par nom). Classes `brand-why-*` de
   la v4 seulement : trois blocs (ALL DUELS, Reasons, By theme), rien
   d'autre ; la liste des questions d'un nombre est celle de
   z_compass_brand_answers_ui.css (`brand-qa-*`). Jetons existants.
   Le mot et le signe portent le sens, jamais la couleur seule.
   Téléphone (375 px) : lignes et tables en pleine largeur, aucune largeur
   fixe, jamais de blanc insécable sur du contenu variable (noms de
   marques, facteurs, thèmes).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Titres des trois blocs ── */
.brand-why-label {
    margin: 22px 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--c-muted); overflow-wrap: anywhere;
}

/* ── ALL DUELS : une ligne par concurrent, cliquable ── */
.brand-why-duels { display: grid; gap: 0; max-width: 720px; min-width: 0; border-top: 1px solid var(--c-line); }
.brand-why-duel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; box-sizing: border-box;
    min-width: 0; margin: 0; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--c-line);
    border-left: 3px solid transparent; background: none; font: inherit; color: var(--navy);
    text-align: left; cursor: pointer;
}
.brand-why-duel:hover, .brand-why-duel:focus-visible { background: var(--c-pale); }
.brand-why-duel.is-selected { background: var(--c-soft); border-left-color: var(--c-cyan-ink); }
.brand-why-duel-score { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.brand-why-duel.is-selected .brand-why-duel-score { font-weight: 600; }
.brand-why-duel .brand-ui-chip { margin-top: 0; cursor: inherit; }

/* ── Tables Reasons et By theme ── */
.brand-why-wrap { max-width: 720px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.brand-why-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--navy); }
.brand-why-th {
    padding: 6px 12px 6px 0; text-align: left; vertical-align: bottom; font-size: 11.5px;
    font-weight: 600; color: var(--c-muted); overflow-wrap: anywhere;
}
.brand-why-th.is-num, .brand-why-num { text-align: right; }
.brand-why-row > th, .brand-why-row > td {
    padding: 6px 12px 6px 0; vertical-align: baseline; border-top: 1px solid var(--c-line);
}
.brand-why-name { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.brand-why-num { font-variant-numeric: tabular-nums; }
.brand-why-num.is-zero { color: var(--c-muted); }
.brand-why-net { font-weight: 600; }
.brand-why-net.is-good { color: var(--c-ahead); }
.brand-why-net.is-bad { color: var(--c-behind); }
.brand-why-net.is-none { color: var(--c-muted); }

/* Nombre cliquable : ses questions s'ouvrent sous la table. */
.brand-why-n {
    min-width: 2.2em; margin: -2px 0; padding: 1px 8px; border: 1px solid var(--c-line); border-radius: 999px;
    background: var(--white); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--c-cyan-ink); cursor: pointer; text-align: center;
}
.brand-why-n:hover, .brand-why-n:focus-visible { border-color: var(--c-cyan-ink); }
.brand-why-n.is-selected { background: var(--navy); border-color: var(--navy); color: var(--white); }

@media (max-width: 640px) {
    .brand-why-duel { padding: 9px 8px; }
    .brand-why-th, .brand-why-row > th, .brand-why-row > td { padding-right: 8px; }
}

/* 2026-10-02 — noms de raison / de thème cliquables (leurs questions sous la
   table) ; duel ouvert (ses questions sous ALL DUELS). */
.brand-why-name-btn {
    border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--navy);
    cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.brand-why-name-btn:hover, .brand-why-name-btn:focus-visible { text-decoration: underline; }
.brand-why-name-btn.is-selected { text-decoration: underline; font-weight: 600; }
.brand-why-duel.is-open { box-shadow: inset 3px 0 0 var(--c-cyan-ink, #0E7C86); }