/* ALL-EMAILING : animation de chargement (assets/js/loading.js), aux couleurs du thème (--brand). */
.spinner {
    display: inline-block; width: 16px; height: 16px; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: page-loader-spin .7s linear infinite; vertical-align: -3px;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3px; color: var(--brand); }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }

/* Barre fine en haut de l'écran */
.page-loader-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; overflow: hidden;
    background: rgba(var(--brand-rgb, 99, 102, 241), .18);
}
.page-loader-bar::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: var(--brand); border-radius: 3px;
    animation: page-loader-slide 1.1s ease-in-out infinite;
}
@keyframes page-loader-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Panneau « Traitement en cours » pour les envois longs */
.page-loader {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
    background: rgba(25, 30, 41, .35); cursor: progress;
    animation: page-loader-in .2s ease-out;
}
@keyframes page-loader-in { from { opacity: 0; } to { opacity: 1; } }
.page-loader-card {
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 26px 28px; max-width: 360px; text-align: center;
}
.page-loader-title { margin: 14px 0 4px; font-weight: 600; color: var(--ink); }
.page-loader-sub { margin: 0; font-size: 13px; color: var(--muted); }
html.is-loading, html.is-loading * { cursor: progress; }

/* Bouton cliqué : la première icône laisse place à un cercle qui tourne */
.button.is-loading { position: relative; }
.button.is-loading > .icon:first-child { visibility: hidden; }
.button.is-loading::after {
    content: ""; width: 14px; height: 14px; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: page-loader-spin .7s linear infinite;
}
.button.is-loading:has(> .icon:first-child)::after { position: absolute; left: var(--spinner-left, 18px); top: calc(50% - 7px); }
.button-small.is-loading:has(> .icon:first-child)::after { --spinner-left: 12px; }

@media (prefers-reduced-motion: reduce) {
    .page-loader-bar::before { width: 100%; opacity: .6; }
}
@media print { .page-loader, .page-loader-bar { display: none !important; } }