/* ============================================================
   .vibe-vote — Mood board horizontal (Stitch v3)
   Les 4 pills tiennent TOUJOURS sur une ligne sur mobile.
   ============================================================ */

.vibe-vote { /* hérite de .surface */ }

.vibe-vote-row {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.vibe-pill {
    flex: 1 1 0;            /* partage équitablement la largeur disponible */
    min-width: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: var(--r-pill);
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
    overflow: hidden;
    min-height: 32px;
    white-space: nowrap;
}
.vibe-pill:hover { border-color: var(--border-hi); }
.vibe-pill.is-active { border-color: var(--orange); color: var(--orange); }

.vibe-pill-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(255,107,0,0.22), rgba(255,107,0,0.06));
    pointer-events: none;
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}
.vibe-pill > span,
.vibe-pill > i { position: relative; z-index: 1; }

.vibe-pill-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; }

/* Pourcentage caché sur mobile : la barre de remplissage est le signal visuel */
.vibe-pill-pct { display: none; }

@media (min-width: 1025px) {
    .vibe-vote-row { gap: 6px; }
    .vibe-pill { font-size: 13px; padding: 8px 12px; gap: 6px; min-height: 36px; }
    .vibe-pill-pct {
        display: inline;
        margin-left: 4px;
        font-size: 11px;
        color: var(--text-3);
        font-variant-numeric: tabular-nums;
    }
}