/* ═══════════════════════════════════════════════════════════════════
   GEO MARQUE v3 — kit UI partagé (brand_ui.py), 2026-09-30.
   Chargé APRÈS z_compass.css (assets triés par nom). Classes `brand-ui-*`
   seulement ; couleurs = jetons existants (--c-ahead, --c-behind,
   --c-yellow-ink, --c-muted, --c-line, --c-pale, --yellow, --navy).
   Téléphone (375 px) : aucune largeur fixe, barres en %, tuiles et puces
   qui passent à la ligne, jamais de `white-space: nowrap` sur du contenu
   variable (noms de marques, comptes, libellés).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --c-shared: var(--c-yellow-ink);            /* ambre : partagé */
    --c-shared-bg: rgba(255, 216, 1, 0.18);
    --c-none: var(--u-gray-200, #B8C0CF);       /* gris : pas de choix */
}

/* ── Gabarit d'onglet : titre-question, phrase, notes ── */
.brand-ui-question {
    margin: 4px 0 6px; font-size: 22px; font-weight: 500; line-height: 1.25;
    letter-spacing: -0.015em; color: var(--navy); overflow-wrap: anywhere;
}
.brand-ui-headline {
    margin: 0 0 18px; max-width: 900px; font-size: 15px; line-height: 1.55;
    color: var(--navy); overflow-wrap: anywhere;
}
.brand-ui-note, .brand-ui-based-on {
    margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--c-muted); overflow-wrap: anywhere;
}
.brand-ui-info { cursor: help; color: var(--c-cyan-ink); font-weight: 600; }

/* ── Sections repliées (html.Details) ── */
.brand-ui-section { border-top: 1px solid var(--c-line); margin-top: 14px; padding-top: 2px; }
.brand-ui-section > .brand-ui-section-title {
    cursor: pointer; list-style: none; padding: 10px 0; font-size: 13px; font-weight: 600;
    color: var(--navy); overflow-wrap: anywhere;
}
.brand-ui-section > .brand-ui-section-title::-webkit-details-marker { display: none; }
.brand-ui-section > .brand-ui-section-title::before {
    content: '▸'; display: inline-block; margin-right: 8px; color: var(--c-cyan-ink); transition: transform .15s;
}
.brand-ui-section[open] > .brand-ui-section-title::before { transform: rotate(90deg); }

/* ── Liens « deep dive » (html.Button d'aspect lien) ── */
.brand-ui-jump {
    display: inline; border: 0; background: none; padding: 0; margin: 0; font: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--c-cyan-ink); cursor: pointer; text-align: left;
}
.brand-ui-jump:hover, .brand-ui-jump:focus-visible { text-decoration: underline; color: var(--navy); }

/* ── `a vs b` + `same n` ── */
.brand-ui-vs { font-variant-numeric: tabular-nums; color: var(--navy); min-width: 0; }
.brand-ui-vs-value { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.brand-ui-vs-a, .brand-ui-vs-b { font-size: inherit; }
.brand-ui-vs-sep { color: var(--c-muted); }
.brand-ui-vs-base { font-size: 11.5px; color: var(--c-muted); margin-top: 1px; overflow-wrap: anywhere; }
.brand-ui-vs.is-dim .brand-ui-vs-value, .brand-ui-vs.is-dim .brand-ui-vs-a,
.brand-ui-vs.is-dim .brand-ui-vs-b { color: var(--c-muted); }
.brand-ui-vs.is-empty { color: var(--c-muted); }
.brand-ui-outcomes { font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }

/* ── Pastilles de verdict (le texte porte le sens : ▲ ▼, mots) ── */
.brand-ui-chip {
    display: inline-block; max-width: 100%; margin-top: 4px; padding: 1px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere;
    border: 1px solid var(--c-line); background: var(--white); color: var(--navy);
}
.brand-ui-chip[title] { cursor: help; }
.brand-ui-chip.is-good { background: var(--c-ahead-bg); color: var(--c-ahead); border-color: transparent; }
.brand-ui-chip.is-bad { background: var(--c-behind-bg); color: var(--c-behind); border-color: transparent; }
.brand-ui-chip.is-shared { background: var(--c-shared-bg); color: var(--c-shared); border-color: transparent; }
.brand-ui-chip.is-neutral { background: var(--c-pale); color: var(--navy); }
.brand-ui-chip.is-none { background: var(--c-pale); color: var(--c-muted); border-style: dashed; }

/* ── Tuiles (3 au plus) ── */
.brand-ui-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px; margin: 4px 0 10px;
}
.brand-ui-tile {
    display: block; min-width: 0; width: 100%; box-sizing: border-box; text-align: left;
    border: 1px solid var(--c-line); background: var(--white); padding: 14px 16px; font: inherit; color: var(--navy);
}
.brand-ui-tile.is-link { cursor: pointer; }
.brand-ui-tile.is-link:hover, .brand-ui-tile.is-link:focus-visible { border-color: var(--c-cyan-ink); }
.brand-ui-tile.is-dim { color: var(--c-muted); }
.brand-ui-tile-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-muted); margin-bottom: 6px; overflow-wrap: anywhere;
}
.brand-ui-tile-value { font-size: 20px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.brand-ui-tile .brand-ui-vs-value { font-size: 20px; }
.brand-ui-tile-line { font-size: 12px; color: var(--c-muted); margin-top: 2px; overflow-wrap: anywhere; }
.brand-ui-tile-chip { margin-top: 6px; }

/* ── États : seuil, revue absente ── */
.brand-ui-too-few, .brand-ui-pending {
    margin: 6px 0; font-size: 13px; line-height: 1.55; color: var(--c-muted); overflow-wrap: anywhere;
}
.brand-ui-pending { padding: 10px 14px; background: var(--c-pale); border-left: 3px solid var(--c-line); }

/* ── v4 (2026-10-01) : projet hors format des deux listes de questions ── */
.brand-ui-misfit {
    margin: 18px 0; padding: 12px 16px; max-width: 900px; font-size: 14px; line-height: 1.55;
    color: var(--navy); background: var(--c-pale); border-left: 3px solid var(--c-line);
    overflow-wrap: anywhere;
}

/* ── Barre empilée (Answers, régularité) ── */
.brand-ui-sbar { margin: 6px 0 10px; min-width: 0; }
.brand-ui-sbar-track {
    display: flex; width: 100%; height: 12px; border-radius: 3px; overflow: hidden; background: var(--c-line);
}
.brand-ui-sbar-seg { display: block; height: 100%; border: 0; padding: 0; margin: 0; min-width: 2px; }
button.brand-ui-sbar-seg { cursor: pointer; }
button.brand-ui-sbar-seg:hover, button.brand-ui-sbar-seg:focus-visible { filter: brightness(0.9); outline-offset: 1px; }
.brand-ui-sbar-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 5px;
    font-size: 12px; color: var(--navy);
}
.brand-ui-sbar-item { display: inline-flex; align-items: center; gap: 5px; }
.brand-ui-sep { color: var(--c-muted); }
.brand-ui-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* Tons partagés (segments, pastilles de légende, remplissages) */
.brand-ui-sbar-seg.is-good, .brand-ui-swatch.is-good, .brand-ui-cbar-fill.is-good { background: var(--c-ahead); }
.brand-ui-sbar-seg.is-shared, .brand-ui-swatch.is-shared, .brand-ui-cbar-fill.is-shared { background: var(--c-shared); }
.brand-ui-sbar-seg.is-bad, .brand-ui-swatch.is-bad, .brand-ui-cbar-fill.is-bad { background: var(--c-behind); }
.brand-ui-sbar-seg.is-none, .brand-ui-swatch.is-none, .brand-ui-cbar-fill.is-none { background: var(--c-none); }
.brand-ui-sbar-seg.is-neutral, .brand-ui-swatch.is-neutral, .brand-ui-cbar-fill.is-neutral { background: var(--c-muted); }
.brand-ui-sbar-seg.is-client, .brand-ui-swatch.is-client, .brand-ui-cbar-fill.is-client { background: var(--yellow); }
.brand-ui-sbar-seg.is-full, .brand-ui-swatch.is-full, .brand-ui-cbar-fill.is-full { background: var(--navy); }
.brand-ui-sbar-seg.is-part, .brand-ui-swatch.is-part, .brand-ui-cbar-fill.is-part { background: var(--c-muted); }
.brand-ui-sbar-seg.is-empty, .brand-ui-swatch.is-empty, .brand-ui-cbar-fill.is-empty { background: var(--c-line); }

/* ── Barre simple k / n (classement, raisons) ── */
.brand-ui-cbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-ui-cbar-track { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
.brand-ui-cbar-fill { height: 100%; border-radius: inherit; }
.brand-ui-cbar-text { flex: 0 0 auto; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--navy); }

@media (max-width: 640px) {
    .brand-ui-question { font-size: 19px; }
    .brand-ui-headline { font-size: 14px; }
    .brand-ui-tile { padding: 12px 14px; }
    .brand-ui-tile-value, .brand-ui-tile .brand-ui-vs-value { font-size: 18px; }
}