/**
 * Matrix Digital — Visite guidée interactive (S-tour).
 * Spotlight + bulle, thème-aware, mobile-first.
 */

.mx-tour {
    position: absolute;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
}

/* Voile plein écran (étapes centrées, sans cible) */
.mx-tour__veil {
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 14, 0.72);
    opacity: 0;
    pointer-events: auto;
    transition: opacity .3s ease;
}
.mx-tour--center .mx-tour__veil { opacity: 1; }

/* Spotlight : le box-shadow géant assombrit tout SAUF la cible */
.mx-tour__spot {
    position: fixed;
    display: none;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(6, 6, 14, 0.72),
                0 0 0 2px var(--mx-blue, #2F6BFF),
                0 0 26px 4px rgba(47, 107, 255, 0.55);
    pointer-events: none;
    transition: top .32s ease, left .32s ease, width .32s ease, height .32s ease;
}
.mx-tour--noanim .mx-tour__spot,
.mx-tour--noanim .mx-tour__veil { transition: none; }

/* Bulle */
.mx-tour__bubble {
    position: fixed;
    width: min(360px, calc(100vw - 32px));
    max-width: 360px;
    padding: 1.15rem 1.25rem 1.1rem;
    background: var(--mx-dark, #0D0D1A);
    color: var(--mx-off-white, #F0F0FF);
    border: 1px solid var(--mx-border, rgba(90,120,230,.22));
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    pointer-events: auto;
    animation: mxTourIn .3s ease both;
}
.mx-tour--noanim .mx-tour__bubble { animation: none; }
.mx-tour--center .mx-tour__bubble {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
@keyframes mxTourIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mx-tour--center .mx-tour__bubble { animation-name: mxTourInCenter; }
@keyframes mxTourInCenter {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.mx-tour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.mx-tour--center .mx-tour__head { justify-content: center; position: relative; }
.mx-tour__badge {
    font-family: var(--font-mono, monospace);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mx-gradient, linear-gradient(135deg,#2F6BFF,#C32FD9));
    padding: .28em .7em;
    border-radius: 999px;
}
.mx-tour__close {
    background: none;
    border: none;
    color: var(--mx-muted, #8A93B8);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .3rem;
    transition: color .2s ease;
}
.mx-tour--center .mx-tour__close { position: absolute; right: -.3rem; top: -.3rem; }
.mx-tour__close:hover { color: var(--mx-white, #fff); }

.mx-tour__title {
    margin: 0 0 .35rem;
    font-family: var(--font-display, sans-serif);
    font-size: 1.16rem;
    line-height: 1.25;
    color: var(--mx-white, #fff);
}
.mx-tour__text {
    margin: 0 0 .9rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--mx-off-white, #F0F0FF);
}

.mx-tour__dots {
    display: flex;
    gap: 6px;
    margin-bottom: .9rem;
}
.mx-tour--center .mx-tour__dots { justify-content: center; }
.mx-tour__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mx-border, rgba(140,150,190,.4));
    transition: background .2s ease, transform .2s ease;
}
.mx-tour__dot.is-active {
    background: var(--mx-blue, #2F6BFF);
    transform: scale(1.25);
}

.mx-tour__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mx-tour--center .mx-tour__nav { justify-content: center; flex-wrap: wrap; }
.mx-tour__nav-r { display: flex; gap: 8px; }
.mx-tour__skip {
    background: none;
    border: none;
    color: var(--mx-muted, #8A93B8);
    font-size: .85rem;
    cursor: pointer;
    padding: .3rem 0;
    transition: color .2s ease;
}
.mx-tour__skip:hover { color: var(--mx-off-white, #F0F0FF); text-decoration: underline; }

/* Mode clair */
:root[data-theme="light"] .mx-tour__bubble {
    background: #fff;
    color: var(--mx-ink, #14142B);
    border-color: rgba(20, 20, 43, .12);
}
:root[data-theme="light"] .mx-tour__title { color: var(--mx-ink, #14142B); }
:root[data-theme="light"] .mx-tour__text { color: #2A2A44; }

/* Mobile : bulle ancrée en bas */
@media (max-width: 640px) {
    .mx-tour__bubble,
    .mx-tour--center .mx-tour__bubble {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto !important;
        bottom: 12px;
        width: auto;
        max-width: none;
        transform: none;
        /* Compacte : sur un petit écran, la bulle prenait un tiers de la hauteur.
           Une visite guidée ne doit pas cacher ce qu'elle fait visiter. */
        padding: 0.85rem 0.95rem 0.8rem;
    }
    .mx-tour__title { font-size: 1rem; margin-bottom: 0.3rem; }
    .mx-tour__text  { font-size: 0.85rem; line-height: 1.45; }
    .mx-tour__dots  { margin: 0.6rem 0; }

    /* Cible dans la moitié BASSE (poche d'actions, Neo…) : la bulle passe en haut,
       sinon elle se pose exactement sur ce qu'elle montre. Piloté par placeSpot(). */
    .mx-tour--bubble-top .mx-tour__bubble {
        bottom: auto !important;
        top: calc(var(--mx-header-h, 72px) + 12px) !important;
    }

    .mx-tour--center .mx-tour__bubble { animation-name: mxTourIn; }
}

/* --- Flèche animée pointant vers la cible --- */
.mx-tour__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(47, 107, 255, .5));
}
/* Bulle SOUS la cible → flèche vers le HAUT */
.mx-tour__bubble--up .mx-tour__arrow {
    top: -21px;
    border-bottom-color: var(--mx-dark, #0D0D1A);
    transform: translateX(-50%);
    animation: mxArrUp 1.1s ease-in-out infinite;
}
/* Bulle AU-DESSUS de la cible → flèche vers le BAS */
.mx-tour__bubble--down .mx-tour__arrow {
    bottom: -21px;
    border-top-color: var(--mx-dark, #0D0D1A);
    transform: translateX(-50%);
    animation: mxArrDown 1.1s ease-in-out infinite;
}
/* Bulle à DROITE de la cible → flèche vers la GAUCHE */
.mx-tour__bubble--left .mx-tour__arrow {
    left: -21px;
    border-right-color: var(--mx-dark, #0D0D1A);
    transform: translateY(-50%);
    animation: mxArrLeft 1.1s ease-in-out infinite;
}
/* Bulle à GAUCHE de la cible → flèche vers la DROITE */
.mx-tour__bubble--right .mx-tour__arrow {
    right: -21px;
    border-left-color: var(--mx-dark, #0D0D1A);
    transform: translateY(-50%);
    animation: mxArrRight 1.1s ease-in-out infinite;
}
@keyframes mxArrUp    { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-6px); } }
@keyframes mxArrDown  { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(6px); } }
@keyframes mxArrLeft  { 0%,100%{ transform: translateY(-50%) translateX(0); } 50%{ transform: translateY(-50%) translateX(-6px); } }
@keyframes mxArrRight { 0%,100%{ transform: translateY(-50%) translateX(0); } 50%{ transform: translateY(-50%) translateX(6px); } }
.mx-tour--noanim .mx-tour__arrow { animation: none !important; }

/* Mode clair : flèche couleur de la bulle claire */
:root[data-theme="light"] .mx-tour__bubble--up .mx-tour__arrow    { border-bottom-color: #fff; }
:root[data-theme="light"] .mx-tour__bubble--down .mx-tour__arrow  { border-top-color: #fff; }
:root[data-theme="light"] .mx-tour__bubble--left .mx-tour__arrow  { border-right-color: #fff; }
:root[data-theme="light"] .mx-tour__bubble--right .mx-tour__arrow { border-left-color: #fff; }

/* Sur mobile la bulle est ancrée en bas : flèche masquée (le spotlight suffit) */
@media (max-width: 640px) {
    .mx-tour__arrow { display: none; }
}