/* ------------------------------------------------------------------
 * assets/onboarding/ohm-onboarding.css — Visite guidée Infradesk
 *
 * Overlay « spotlight » bloquant : fond assombri, découpe sur la cible,
 * bulle (popover) avec titre / texte / compteur / boutons.
 * Palette sombre OHM (navy + orange de marque, accent teal pour le focus).
 * Aucune dépendance externe (CSP-clean, self-hosted).
 * ------------------------------------------------------------------ */
.ohm-onb-root {
    --onb-bg:        #0c1329;
    --onb-card:      #131c3a;
    --onb-card-2:    #1a2548;
    --onb-border:    #2a345a;
    --onb-text:      #e8ecf5;
    --onb-muted:     #8a93b0;
    --onb-accent:    #2dd4bf;   /* teal — focus / liseré spotlight */
    --onb-brand:     #F1841F;   /* orange OHM — action primaire */
    --onb-brand-hi:  #ffa54a;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Helvetica, Arial, sans-serif;
    color: var(--onb-text);
}
.ohm-onb-root[hidden] { display: none; }

/* Couche assombrie — 4 rectangles autour de la cible (le « trou »
 * spotlight est l'espace laissé libre entre eux). En mode modale
 * (anchor:null) un seul voile plein couvre tout l'écran. */
.ohm-onb-dim {
    z-index: 1;
    position: fixed;
    background: rgba(6, 11, 26, 0.72);
    pointer-events: auto;           /* bloque les clics sous l'overlay */
    transition: all 120ms ease;
}
.ohm-onb-spot {
    z-index: 2;
    position: fixed;
    pointer-events: none;
    border: 2px solid var(--onb-accent);
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25),
                0 0 22px 4px rgba(45, 212, 191, 0.35);
    transition: all 120ms ease;
}

/* Bulle / popover */
.ohm-onb-bubble {
    z-index: 3;
    position: fixed;
    max-width: 360px;
    width: calc(100vw - 32px);
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--onb-card-2), var(--onb-card));
    border: 1px solid var(--onb-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    padding: 18px 18px 16px;
    pointer-events: auto;
}
.ohm-onb-bubble.is-centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 440px;
}
.ohm-onb-skip {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--onb-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.ohm-onb-skip:hover { color: var(--onb-text); background: rgba(255,255,255,0.06); }

.ohm-onb-title {
    margin: 0 26px 8px 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1px;
}
.ohm-onb-body {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--onb-text);
}
.ohm-onb-counter {
    font-size: 12px;
    color: var(--onb-muted);
    margin-bottom: 12px;
    letter-spacing: 0.4px;
}

.ohm-onb-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.ohm-onb-cta a {
    flex: 1 1 auto;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid var(--onb-border);
}
.ohm-onb-cta a.primary {
    background: linear-gradient(180deg, var(--onb-brand-hi), var(--onb-brand));
    color: #1a1206;
    border-color: var(--onb-brand);
}
.ohm-onb-cta a.secondary {
    background: var(--onb-card);
    color: var(--onb-text);
}
.ohm-onb-cta a:hover { filter: brightness(1.08); }

.ohm-onb-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.ohm-onb-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 9px;
    cursor: pointer;
    border: 1px solid var(--onb-border);
    background: var(--onb-card);
    color: var(--onb-text);
}
.ohm-onb-btn:hover { filter: brightness(1.12); }
.ohm-onb-btn.is-primary {
    background: var(--onb-accent);
    border-color: var(--onb-accent);
    color: #04201c;
}
.ohm-onb-btn[hidden] { display: none; }