.turbo-scroll-highlight {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 40px rgba(59, 130, 246, 0.4);
    border-radius: 4px;
}

/** View Transition Styles **/
/** View transitions are a new feature in modern browsers that allow for smooth transitions between different states of a page. **/
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 50ms; /* faster transition */
    animation-timing-function: ease-in-out;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}


/* Animation pulse */
@keyframes skeleton-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Éléments */
div[class*=" skeleton-"] {
    background-color: #e9ecef;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* Éléments */
.skeleton-divider {
    height: 3px;
    width: 100%;
    margin-bottom: 12px;
}
.skeleton-line {
    height: 16px;
    width: 100%;
    margin-bottom: 12px;
}

.skeleton-input {
    height: 51px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-rectangle {
    height: 120px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-textarea {
    height: 96px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-button {
    height: 40px;
    width: 120px;
    margin-bottom: 12px;
}

.skeleton-card {
    height: 200px;
    width: 100%;
    margin-bottom: 16px;
}

.skeleton-avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    margin-bottom: 12px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 16px;
}

.skeleton-card-header {
    height: 56px;
    width: 100%;
    margin-bottom: 12px;
}

.skeleton-card-footer {
    height: 48px;
    width: 100%;
    margin-bottom: 12px;
}

/**
 * StaminaTransition CSS Animations
 * Non-blocking animations for DOM modifications (remove, add, replace, etc.)
 * These allow users to continue interacting while animations play.
 */

/* Default duration variable */
:root {
    --stamina-transition-duration: 150ms;
}

/* Remove animation - fade out and scale down */
.stamina-transition-removing {
    animation: stamina-fade-out var(--stamina-transition-duration, 150ms) ease-out forwards;
}

@keyframes stamina-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Enter animation - fade in and scale up */
.stamina-transition-entering {
    animation: stamina-fade-in var(--stamina-transition-duration, 150ms) ease-out forwards;
}

@keyframes stamina-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Replace animations */
.stamina-transition-replacing-out {
    animation: stamina-fade-out var(--stamina-transition-duration, 150ms) ease-out forwards;
}

.stamina-transition-replacing-in {
    animation: stamina-fade-in var(--stamina-transition-duration, 150ms) ease-out forwards;
}

/* Content change animation - brief opacity pulse */
.stamina-transition-content-changing {
    animation: stamina-content-fade-out calc(var(--stamina-transition-duration, 150ms) / 2) ease-out forwards;
}

.stamina-transition-content-changed {
    animation: stamina-content-fade-in calc(var(--stamina-transition-duration, 150ms) / 2) ease-out forwards;
}

@keyframes stamina-content-fade-out {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

@keyframes stamina-content-fade-in {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .stamina-transition-removing,
    .stamina-transition-entering,
    .stamina-transition-replacing-out,
    .stamina-transition-replacing-in,
    .stamina-transition-content-changing,
    .stamina-transition-content-changed {
        animation: none !important;
        transition: none !important;
    }
}

/*
 * Sidebar menu scroll (CSS-only, remplace metronic-theme-autoheight).
 * .flex-column-fluid = flex:1 0 auto (shrink=0) empêche le wrapper de rétrécir
 * sous son contenu, donc pas de scroll possible sans height explicite.
 * On force shrink=1 + min-height:0 pour que la cascade flex fonctionne, et
 * height:100% sur le wrapper scrollable pour qu'il remplisse l'espace dispo.
 */
.app-sidebar .app-sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
}

.app-sidebar #kt_app_sidebar_menu_wrapper {
    height: 100%;
}
/** Guide pas-à-pas (stamina-core-tour_controller.js) **/
/* Le voile est découpé en quatre panneaux autour de la cible : le trou n'est pas une
   transparence mais une absence, donc ce qu'on montre reste cliquable. */

.stamina-tour__panel {
    position: fixed;
    z-index: 1090;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(1px);
    animation: stamina-tour-fade .18s ease-out;
}

.stamina-tour__ring {
    position: fixed;
    z-index: 1091;
    pointer-events: none;
    border-radius: .625rem;
    box-shadow: 0 0 0 2px var(--bs-primary), 0 0 0 7px rgba(var(--bs-primary-rgb), .22);
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

.stamina-tour__bubble {
    position: fixed;
    z-index: 1092;
    width: 23.5rem;
    max-width: calc(100vw - 1rem);
    padding: 1.125rem 1.25rem 1.25rem;
    border-radius: .75rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, .28);
    animation: stamina-tour-fade .18s ease-out;
}

/* La flèche pointe vers la cible : sans elle, une bulle repliée faute de place
   semble commenter le mauvais élément. */
.stamina-tour__bubble::before {
    content: '';
    position: absolute;
    width: .75rem;
    height: .75rem;
    background: inherit;
    transform: rotate(45deg);
}

.stamina-tour__bubble[data-side="right"]::before { left: -.375rem; top: calc(50% - .375rem); }
.stamina-tour__bubble[data-side="left"]::before { right: -.375rem; top: calc(50% - .375rem); }
.stamina-tour__bubble[data-side="bottom"]::before { top: -.375rem; left: calc(50% - .375rem); }
.stamina-tour__bubble[data-side="top"]::before { bottom: -.375rem; left: calc(50% - .375rem); }
.stamina-tour__bubble[data-side="center"]::before { display: none; }

.stamina-tour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.stamina-tour__count {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bs-primary);
}

.stamina-tour__skip {
    border: 0;
    padding: 0;
    background: none;
    font-size: .8125rem;
    color: var(--bs-gray-600);
    text-decoration: underline;
}

.stamina-tour__skip:hover { color: var(--bs-gray-800); }

.stamina-tour__title {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.stamina-tour__text {
    margin: 0;
    font-size: .9688rem;
    line-height: 1.55;
    color: var(--bs-gray-700);
}

/* L'étape d'introduction énumère : la puce fait le travail que trois <br> faisaient mal. */
.stamina-tour__text ul {
    margin: 0 0 .75rem;
    padding-left: 1.125rem;
}

.stamina-tour__text li + li { margin-top: .375rem; }

.stamina-tour__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.stamina-tour__dots { display: flex; gap: .3125rem; }

.stamina-tour__dot {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--bs-gray-300);
    transition: width .18s ease, background .18s ease;
}

.stamina-tour__dot.is-done { background: rgba(var(--bs-primary-rgb), .45); }
.stamina-tour__dot.is-current { width: 1.125rem; border-radius: .1875rem; background: var(--bs-primary); }

.stamina-tour__actions { display: flex; gap: .375rem; }

.stamina-tour.is-intro .stamina-tour__ring { display: none; }

@keyframes stamina-tour-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .stamina-tour__panel,
    .stamina-tour__bubble { animation: none; }
    .stamina-tour__ring { transition: none; }
}