/* ============================================================================
   BARBAROS — guide.css (premium batch 2 · UX ENGINE)
   ----------------------------------------------------------------------------
   Styles for window.BuldGuide: spotlight tour (scrim with a box-shadow cut-out,
   tooltip card) and the per-panel "Conseil" chip. Tokens only, no !important.
   Motion via --bx-dur-* (0 ms under prefers-reduced-motion, see bx-tokens.css).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Tour — blocker + spotlight
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .guide-blocker {
    position: fixed; inset: 0; z-index: var(--p-z-modal);
    background: transparent; cursor: default;
}
html[data-buld-theme] .guide-spot {
    position: fixed; z-index: calc(var(--p-z-modal) + 1);
    left: var(--gs-x, 50vw); top: var(--gs-y, 50vh);
    width: var(--gs-w, 0px); height: var(--gs-h, 0px);
    border-radius: var(--gs-r, 12px);
    box-shadow: 0 0 0 9999px var(--bx-scrim), 0 0 0 1px var(--buld-cta-soft), 0 0 0 4px var(--buld-cta-soft);
    opacity: 0; pointer-events: none;
    transition: opacity var(--bx-dur-overlay) var(--bx-ease),
                left var(--bx-dur-layout) var(--bx-ease), top var(--bx-dur-layout) var(--bx-ease),
                width var(--bx-dur-layout) var(--bx-ease), height var(--bx-dur-layout) var(--bx-ease);
}
html[data-buld-theme] .guide-spot.is-in { opacity: 1; }
html[data-buld-theme] .guide-spot.is-hidden { box-shadow: 0 0 0 9999px var(--bx-scrim); }

/* ----------------------------------------------------------------------------
   2. Tour — tooltip card
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .guide-pop {
    position: fixed; z-index: calc(var(--p-z-modal) + 2);
    left: var(--gp-x, 50vw); top: var(--gp-y, 50vh);
    width: 320px; max-width: calc(100vw - 24px);
    padding: 16px 18px 14px;
    background: var(--p-card-bg); background-image: none;
    border: 1px solid var(--p-card-border); border-radius: 12px;
    box-shadow: var(--bx-shadow-3);
    color: var(--buld-ink-1); font-family: var(--buld-font-text);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--bx-dur-overlay) var(--bx-ease), transform var(--bx-dur-overlay) var(--bx-ease),
                left var(--bx-dur-layout) var(--bx-ease), top var(--bx-dur-layout) var(--bx-ease);
    outline: none;
}
html[data-buld-theme] .guide-pop.is-in { opacity: 1; transform: none; }
html[data-buld-theme] .guide-pop__arrow {
    position: absolute; width: 12px; height: 12px;
    background: var(--p-card-bg); border: 1px solid var(--p-card-border);
    transform: rotate(45deg); border-radius: 2px;
}
html[data-buld-theme] .guide-pop[data-place="bottom"] .guide-pop__arrow { top: -7px; left: calc(var(--ga-x, 50%) - 6px); border-right: 0; border-bottom: 0; }
html[data-buld-theme] .guide-pop[data-place="top"] .guide-pop__arrow { bottom: -7px; left: calc(var(--ga-x, 50%) - 6px); border-left: 0; border-top: 0; }
html[data-buld-theme] .guide-pop[data-place="right"] .guide-pop__arrow { left: -7px; top: calc(var(--ga-y, 50%) - 6px); border-right: 0; border-top: 0; }
html[data-buld-theme] .guide-pop[data-place="left"] .guide-pop__arrow { right: -7px; top: calc(var(--ga-y, 50%) - 6px); border-left: 0; border-bottom: 0; }
html[data-buld-theme] .guide-pop[data-place="center"] .guide-pop__arrow { display: none; }
html[data-buld-theme] .guide-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
html[data-buld-theme] .guide-pop__step { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--buld-cta); }
html[data-buld-theme] .guide-pop__skip {
    height: 24px; padding: 0 6px; border: 0; border-radius: 6px;
    background: transparent; color: var(--buld-ink-3);
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .guide-pop__skip:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html[data-buld-theme] .guide-pop__skip:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 1px; }
html[data-buld-theme] .guide-pop__title { margin: 0 0 6px; font-family: var(--buld-font-display); font-size: 16px; font-weight: 600; letter-spacing: var(--buld-tracking-display); color: var(--buld-ink-1); }
html[data-buld-theme] .guide-pop__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--buld-ink-2); }
html[data-buld-theme] .guide-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
html[data-buld-theme] .guide-pop__dots { display: flex; gap: 5px; }
html[data-buld-theme] .guide-pop__dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--buld-divider);
    transition: background var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .guide-pop__dot.is-done { background: var(--buld-cta); opacity: .45; }
html[data-buld-theme] .guide-pop__dot.is-on { background: var(--buld-cta); transform: scale(1.3); }
html[data-buld-theme] .guide-pop__nav { display: flex; gap: 6px; }
html[data-buld-theme] .guide-pop__nav .bx-btn { gap: 5px; }
html[data-buld-theme] .guide-pop__nav .bx-btn svg,
html[data-buld-theme] .guide-pop__nav .bx-btn i { width: 14px; height: 14px; }

/* ----------------------------------------------------------------------------
   3. "Conseil" tip chip — bottom-left, once per panel
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .guide-tip {
    position: fixed; left: 16px; bottom: 16px; z-index: var(--p-z-flyout);
    display: flex; align-items: flex-start; gap: 12px;
    width: 380px; max-width: calc(100vw - 32px);
    padding: 12px 10px 12px 12px;
    background: var(--p-card-bg); background-image: none;
    border: 1px solid var(--p-card-border); border-radius: 12px;
    box-shadow: var(--bx-shadow-3);
    color: var(--buld-ink-1); font-family: var(--buld-font-text);
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--bx-dur-layout) var(--bx-ease), transform var(--bx-dur-layout) var(--bx-ease);
}
html[data-buld-theme] .guide-tip.is-in { opacity: 1; transform: none; }
html[data-buld-theme] .guide-tip__tile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--buld-cta-soft); color: var(--buld-cta);
}
html[data-buld-theme] .guide-tip__tile svg,
html[data-buld-theme] .guide-tip__tile i { width: 16px; height: 16px; }
html[data-buld-theme] .guide-tip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
html[data-buld-theme] .guide-tip__label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--buld-cta); }
html[data-buld-theme] .guide-tip__text { font-size: 13px; line-height: 1.45; color: var(--buld-ink-1); }
html[data-buld-theme] .guide-tip__act {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    height: 26px; margin-top: 6px; padding: 0 4px 0 10px; border-radius: 999px;
    border: 1px solid var(--buld-divider); background: transparent; color: var(--buld-ink-1);
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: border-color var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .guide-tip__act:hover { border-color: var(--buld-cta); color: var(--buld-cta); }
html[data-buld-theme] .guide-tip__act svg,
html[data-buld-theme] .guide-tip__act i { width: 14px; height: 14px; }
html[data-buld-theme] .guide-tip__close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--buld-ink-3); cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .guide-tip__close:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html[data-buld-theme] .guide-tip__close:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 1px; }
html[data-buld-theme] .guide-tip__close svg,
html[data-buld-theme] .guide-tip__close i { width: 14px; height: 14px; }

@media (max-width: 640px) {
    html[data-buld-theme] .guide-tip { left: 12px; right: 12px; bottom: 12px; width: auto; }
}