/* ══════════════════════════════════════════════════════════
   WIDGET : S45 — Affichage Taxonomie
   ══════════════════════════════════════════════════════════ */

:root {
    --s45-taxdisp-text-primary:   #3A2E26;
    --s45-taxdisp-text-secondary: #6b7280;
    --s45-taxdisp-text-tertiary:  #9ca3af;
    --s45-taxdisp-bg-primary:     #F8F4EF;
    --s45-taxdisp-bg-secondary:   #EDE4D8;
    --s45-taxdisp-border:         #C4AFA6;
    --s45-taxdisp-accent:         #8AA68A;
    --s45-taxdisp-accent-bg:      #E9F1E9;
    --s45-taxdisp-accent-border:  #8AA68A;
}

.s45-taxdisp { display: block; }
.s45-taxdisp__section-title { margin: 0 0 8px; }
.s45-taxdisp__section-desc { margin: 0 0 12px; }
.s45-taxdisp__text,
.s45-taxdisp__list { margin: 0; }

/* ── Base commune icône ────────────────────────────────── */

.s45-taxdisp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.s45-taxdisp__icon svg,
.s45-taxdisp__icon img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ── Groupes de sources ── */

.s45-taxdisp__group {
    display: contents;
}


/* ============================================================
   A — Pills flat
   Classe : .s45-taxdisp--pills
   ============================================================ */

.s45-taxdisp--pills {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
}

.s45-taxdisp--pills .s45-taxdisp__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid var(--s45-taxdisp-border);
    background: var(--s45-taxdisp-bg-secondary);
    font-size: 13px;
    color: var(--s45-taxdisp-text-secondary);
    line-height: 1;
}

.s45-taxdisp--pills .s45-taxdisp__desc {
    font-size: 11px;
    color: var(--s45-taxdisp-text-tertiary);
    margin-top: 2px;
}


/* ============================================================
   B — Tags accent
   Classe : .s45-taxdisp--tags
   ============================================================ */

.s45-taxdisp--tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
}

.s45-taxdisp--tags .s45-taxdisp__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--s45-taxdisp-accent-border);
    background: var(--s45-taxdisp-accent-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--s45-taxdisp-accent);
    line-height: 1;
}

.s45-taxdisp--tags .s45-taxdisp__icon img,
.s45-taxdisp--tags .s45-taxdisp__icon svg {
    width: 14px;
    height: 14px;
}

.s45-taxdisp--tags .s45-taxdisp__desc {
    font-size: 10px;
    color: var(--s45-taxdisp-accent);
    opacity: 0.8;
    margin-top: 2px;
}


/* ============================================================
   C — Grid cards (icône + label empilés)
   Classe : .s45-taxdisp--grid-cards
   ============================================================ */

.s45-taxdisp--grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    row-gap: 10px;
    column-gap: 10px;
}

.s45-taxdisp--grid-cards .s45-taxdisp__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid var(--s45-taxdisp-border);
    background: var(--s45-taxdisp-bg-primary);
    text-align: center;
}

.s45-taxdisp--grid-cards .s45-taxdisp__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s45-taxdisp--grid-cards .s45-taxdisp__icon img,
.s45-taxdisp--grid-cards .s45-taxdisp__icon svg {
    width: 20px;
    height: 20px;
}

.s45-taxdisp--grid-cards .s45-taxdisp__label {
    font-size: 11px;
    color: var(--s45-taxdisp-text-secondary);
    line-height: 1.3;
}

.s45-taxdisp--grid-cards .s45-taxdisp__desc {
    font-size: 10px;
    color: var(--s45-taxdisp-text-tertiary);
    line-height: 1.3;
    margin-top: 2px;
}


/* ============================================================
   D — Inline (icône à gauche du texte, séparateur entre items)
   Classe : .s45-taxdisp--inline
   ============================================================ */

.s45-taxdisp__list.s45-taxdisp--inline,
.s45-taxdisp--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    column-gap: 0;
}

.s45-taxdisp--inline .s45-taxdisp__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--s45-taxdisp-text-secondary);
    line-height: 1.4;
}

.s45-taxdisp--inline .s45-taxdisp__icon {
    flex-shrink: 0;
}

.s45-taxdisp--inline .s45-taxdisp__icon img,
.s45-taxdisp--inline .s45-taxdisp__icon svg {
    width: 14px;
    height: 14px;
}

/* Séparateur inline */
.s45-taxdisp__sep {
    display: inline-flex;
    align-items: center;
    margin: 0 6px;
    color: var(--s45-taxdisp-text-tertiary);
    font-weight: 400;
    user-select: none;
    line-height: 1;
}

.s45-taxdisp--inline .s45-taxdisp__body {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

.s45-taxdisp--inline .s45-taxdisp__desc {
    font-size: 11px;
    color: var(--s45-taxdisp-text-tertiary);
}


/* ============================================================
   Legacy layouts
   ============================================================ */

.s45-taxdisp__text--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s45-taxdisp__text--grid {
    display: grid;
    gap: 12px;
}

.s45-taxdisp__text--list .s45-taxdisp__item,
.s45-taxdisp__text--grid .s45-taxdisp__item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.s45-taxdisp__body {
    display: inline-flex;
    flex-direction: column;
}

.s45-taxdisp__desc {
    display: block;
    margin-top: 2px;
}