/* ===== Cercle de progression ===== */

.progress-circle {
    flex-shrink: 0;
    width: var(--size-progress-circle); /* 26px */
    height: var(--size-progress-circle); /* 26px */
}

.progress-circle-bg {
    stroke: var(--color-border);
}

.progress-circle-fill {
    stroke: var(--color-primary);
    transition: stroke-dashoffset var(--transition-slow);
}

.upload-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.summary-text {
    font-family: var(--font-family-label); /* alias Open Sans */
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-dark); /* #000000 */
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

/* ===== Overlay de chargement (#loading) =====
   État initial : invisible + non-interactif, sans inline style (CSP safe).
   Visa.css (legacy, chargé après) fournit position/size/background/z-index.
   Transition : opacity + visibility — la classe .is-visible pilote l'affichage.
   • Sur affichage : visibility passe immédiatement (delay 0s) → opacity 200ms.
   • Sur masquage  : opacity 200ms → visibility après 200ms (delay = durée).    */
#loading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms, visibility 0s 200ms;
}
#loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms, visibility 0s;
}

/* ===== Spinner de chargement (panneau #loading) ===== */
/* Conteneur centré (taille-agnostique, remplace l'ancien .contentLoading) */
.loading-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Cercle (anneau + arc 25% définis dans le sprite #icon-spinner) en rotation continue */
.loading-spinner {
    width: 4.8rem;
    height: 4.8rem;
    transform-origin: center;
    animation: loading-spin 0.9s linear infinite;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}