/* Claris Loaders - palette CLARIS officielle
   Tresor 2026-08-23
   Usage HTML :
     <button data-loading="spin">Enregistrer</button>
     <button data-loading="spin" data-loading-text="Enregistrement...">Enregistrer</button>
     <div data-skeleton="lines" data-lines="3"></div>
*/

/* Spinner inline (dans bouton) */
.claris-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: claris-spin 0.7s linear infinite;
    vertical-align: middle;
    opacity: 0.75;
}
@keyframes claris-spin { to { transform: rotate(360deg); } }

/* Bouton loading state (via classe is-loading) */
button.is-loading,
a.is-loading,
input[type="submit"].is-loading {
    position: relative;
    cursor: not-allowed !important;
    opacity: 0.9;
    pointer-events: none;
}
button.is-loading .claris-btn-label,
a.is-loading .claris-btn-label {
    visibility: hidden;
}
button.is-loading::after,
a.is-loading::after,
input[type="submit"].is-loading::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 14px; height: 14px;
    margin-left: -7px; margin-top: -7px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: claris-spin 0.7s linear infinite;
    opacity: 0.75;
}

/* Bouton loading avec texte custom (attribut data-loading-text) */
button.is-loading[data-loading-text]::before {
    content: attr(data-loading-text);
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding-left: 28px;
    font-size: inherit;
    color: inherit;
    opacity: 0.85;
}
button.is-loading[data-loading-text]::after {
    left: calc(50% - 40px);
}

/* Skeleton loader (pour zones AJAX) */
.claris-skeleton {
    background: linear-gradient(
        90deg,
        rgba(30,58,99,0.05),
        rgba(30,58,99,0.10),
        rgba(30,58,99,0.05)
    );
    background-size: 200% 100%;
    animation: claris-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    border: 1px solid rgba(30,58,99,0.06);
    display: block;
}
@keyframes claris-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}
.claris-skeleton-line   { height: 14px; margin: 8px 0; }
.claris-skeleton-line.w75 { width: 75%; }
.claris-skeleton-line.w50 { width: 50%; }
.claris-skeleton-line.w25 { width: 25%; }
.claris-skeleton-card   { height: 100px; padding: 16px; }
.claris-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* Barre de progression indeterminee (pour bandeau top) */
.claris-progress-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #0091b3, transparent);
    background-size: 30% 100%;
    background-repeat: no-repeat;
    animation: claris-progress-scan 1.2s ease-in-out infinite;
    z-index: 99999;
}
@keyframes claris-progress-scan {
    from { background-position: -30% 0; }
    to   { background-position: 130% 0; }
}