/**
 * Transparence IA : styles frontend.
 * Les couleurs, tailles et opacités par catégorie sont gérées
 * en styles inline depuis PHP — ce fichier gère uniquement le layout.
 */

/* ── Conteneur principal ── */
.ia-disclosure {
    --ia-disclosure-font-size:  0.78em;
    --ia-disclosure-opacity:    0.65;
    --ia-disclosure-radius:     2em;

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 0.75em;
    padding: 0.65em 0;
    border-top: 1px solid currentColor;
    border-color: rgba(0,0,0,0.12);
    font-size: var(--ia-disclosure-font-size);
    opacity: var(--ia-disclosure-opacity);
    line-height: 1.5;
    transition: opacity 0.2s ease;
}

.ia-disclosure:hover {
    opacity: min(calc(var(--ia-disclosure-opacity) + 0.2), 1);
}

/* ── Label ── */
.ia-disclosure__label {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Groupe de tags ── */
.ia-disclosure__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35em 0.5em;
    align-items: center;
}

/* ── Tag individuel (layout uniquement, couleurs en inline) ── */
.ia-disclosure-tag {
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* ── Icône SVG ── */
.ia-disclosure-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .ia-disclosure {
        flex-direction: column;
        gap: 0.4em;
    }
}