/* =============================================================================
   ALVINAH PARTNERS — Bandeaux UX catalogue (M3-06 partie FE)
   catalogue_bandeau.css · bandeau filtres actifs + bandeau 0 résultat
   Réutilise les tokens Dark Navy de main.css.
   ============================================================================= */

/* ---------- Bandeau "🎯 Filtres actifs" ----------------------------------- */
.bandeau-filtres-actifs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 12px 0;
    background: rgba(46, 117, 182, 0.08);  /* var(--accent) avec alpha */
    border: 1px solid var(--accent-dim, #1f4e7a);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #e8eef5);
    font-size: 13px;
}

.bandeau-filtres-icone {
    font-size: 16px;
    line-height: 1;
}

.bandeau-filtres-libelle {
    flex: 1;
    line-height: 1.4;
}

.bandeau-filtres-libelle strong {
    color: var(--text-primary, #e8eef5);
    font-weight: 600;
    margin-right: 4px;
}

.bandeau-filtres-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    color: var(--accent-strong, #7b9ec0);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--accent-dim, #1f4e7a);
    border-radius: var(--radius-sm, 4px);
    transition: background var(--transition, 150ms ease-out),
                color var(--transition, 150ms ease-out);
    white-space: nowrap;
}

.bandeau-filtres-reset:hover {
    background: var(--accent, #2e75b6);
    color: #fff;
    border-color: var(--accent, #2e75b6);
    text-decoration: none;
}

.bandeau-filtres-reset:focus-visible {
    outline: 2px solid var(--accent-strong, #7b9ec0);
    outline-offset: 2px;
}

.bandeau-filtres-reset-icone {
    font-size: 11px;
    line-height: 1;
}

/* ---------- Bandeau "ℹ️ 0 résultat" --------------------------------------- */
.bandeau-zero-resultat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    /* Fond gris neutre — ton informatif, pas alarmiste (cf. brief). */
    background: var(--bg-card, #162030);
    border: 1px solid var(--border-base, #22304a);
    border-left: 3px solid var(--text-secondary, #8fa0b4);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #e8eef5);
    font-size: 13px;
    line-height: 1.5;
}

.bandeau-zero-resultat-icone {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.bandeau-zero-resultat-libelle {
    flex: 1;
}

/* ---------- Responsive (mobile) ----------------------------------------- */
@media (max-width: 640px) {
    .bandeau-filtres-actifs {
        flex-wrap: wrap;
        gap: 8px;
    }
    .bandeau-filtres-libelle {
        flex: 1 1 100%;
    }
    .bandeau-filtres-reset {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bandeau-filtres-reset {
        transition: none;
    }
}

/* ---------- Bandeau "🔒 Visiteur sans compte" (M3-07 FE) -------------- */
.bandeau-visiteur {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 12px 0;
    /* Fond accentué incitatif (vs gris neutre du bandeau 0 résultat) —
       on veut attirer l'attention sans alarmer (pas de rouge). */
    background: rgba(46, 117, 182, 0.12);
    border: 1px solid var(--accent-dim, #1f4e7a);
    border-left: 3px solid var(--accent, #2e75b6);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #e8eef5);
    font-size: 13px;
    line-height: 1.5;
}

.bandeau-visiteur-icone {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.bandeau-visiteur-contenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bandeau-visiteur-libelle {
    margin: 0;
    color: var(--text-primary, #e8eef5);
}

.bandeau-visiteur-libelle strong {
    color: var(--accent-strong, #7b9ec0);
    font-weight: 600;
}

.bandeau-visiteur-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--accent, #2e75b6);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--accent, #2e75b6);
    border-radius: var(--radius-sm, 4px);
    transition: background var(--transition, 150ms ease-out),
                border-color var(--transition, 150ms ease-out);
}

.bandeau-visiteur-cta:hover {
    background: var(--accent-strong, #7b9ec0);
    border-color: var(--accent-strong, #7b9ec0);
    color: #fff;
    text-decoration: none;
}

.bandeau-visiteur-cta:focus-visible {
    outline: 2px solid var(--accent-strong, #7b9ec0);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .bandeau-visiteur {
        flex-wrap: wrap;
    }
    .bandeau-visiteur-contenu {
        flex: 1 1 100%;
    }
}