/* Guide pas-à-pas posé sur l'écran (Tour au format `page`, stamina-core-tour_controller.js) :
   un voile en quatre panneaux autour de la cible, un anneau, une bulle. Tout vit dans <body>,
   au-dessus des panneaux latéraux (drawer). */

.stamina-tour__panel {
    position: fixed;
    z-index: 1090;
    background: rgb(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(--color-primary-500), 0 0 0 7px color-mix(in srgb, var(--color-primary-500) 22%, transparent);
    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(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 1.25rem 2.5rem rgb(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(--color-primary-500);
}

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

.stamina-tour__skip:hover { color: var(--color-ink); }

.stamina-tour__title {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-ink);
}

.stamina-tour__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--color-ink-2);
}

/* 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;
    list-style: disc;
}

.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(--color-gray-300);
    transition: width .18s ease, background .18s ease;
}

.stamina-tour__dot.is-done { background: color-mix(in srgb, var(--color-primary-500) 45%, transparent); }
.stamina-tour__dot.is-current { width: 1.125rem; border-radius: .1875rem; background: var(--color-primary-500); }

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

/* Une seule étape : ni compteur, ni points, ni Précédent, rien à parcourir. */
.stamina-tour__bubble:has(.stamina-tour__dot:only-child) :is(.stamina-tour__count, .stamina-tour__dots, .stamina-tour__prev) { display: none; }
.stamina-tour__skip { margin-left: auto; }

.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; }
}