/* Styles pour les icônes SVG */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-2xl {
    width: 3rem;
    height: 3rem;
}

/* Icônes avec couleur */
.icon-primary {
    color: var(--color-primary-dark);
}

.icon-white {
    color: white;
}

.icon-success {
    color: var(--color-success);
}

.icon-error {
    color: var(--color-error);
}

/* Utilisation dans les éléments existants */
.brand-icon svg,
.stat-icon svg,
.action-icon svg,
.document-icon svg,
.upload-icon svg {
    width: 100%;
    height: 100%;
}

.brand-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}